博客

1.属性的数据特征

1.ES5中每个对象的每一个属性都有一个相应的描述对象,用于控制这个属性的行为。每个对象都有四个数据特征。

• configurable 对象属性是否可重新定义
  
  作用：能否使用delete、能否需改属性特性、或能否修改访问器属性、，false为不可重新定义，默认值为true
• enumerable 对象属性是否可枚举
  
  作用： 对象属性是否可通过for-in循环，flase为不可循环，默认值为true
• writable 对象属性是否可重写
  
  作用： 对象属性是否可修改,flase为不可修改，默认值为true
• value 对象属性的默认值
  
  作用：默认值为undefined

2.设置属性特征的方法的获取属性特征的方法

• 设置对象属性的方法 Object.defineProperty（）

参数：  第一个参数   要修改属性的对象
        第二个参数   要修改属性的名字
        第三个参数   修改的操作

• 获取对象的某个属性特征的方法 Object.getOwnPropertyDescriptor（）

参数： 第一个参数  要查询属性的对象
       第二个参数  要查询的属性的名称

3.简单应用

       let obj = {
            name:'me',
            age:18,
            wife:'桥本环奈'
        }       

        // 打印对象obj
        for(let [key,value] of Object.entries(obj)){
            console.log(key + ':' + value)
            //name : 'me'
            //age : 18
            //wife: '桥本环奈'
        }

        
        //对象的数据属性默认值均为true，所以我们可以修改obj的三个属性

        obj.name = 'you';
        obj.age = 90;
        obj.wife = 'none';
        for(let [key,value] of Object.entries(obj)){
            console.log(key + ':' + value)
            //name : 'you'
            //age : 90
            //wife: 'none'
        }


        //这时候我们将wife属性设置为不可修改
        Object.defineProperty(obj,'wife',{
            writable:false
        })
        
        obj.wife = '红太狼';
        console.log(obj.wife)  
        //none   可见wife属性已经被定义为不可修改

        //我们不妨调用 Object.getPropertyDescritor()来查看一下
        //第一个参数  要查询属性的对象

        //要查询的属性的名称
        console.log(Object.getOwnPropertyDescriptor(obj,'wife'));
        //{value: "none", writable: false, enumerable: true, configurable: true}

        //可以看到 wife属性的writable属性为false 不可修改

ES6遍历对象属性

1.创建一个特殊的对象



这个对象具有不可枚举属性，继承属性以及symbol属性。

 {    
        
        
           function Person(){
               this.JCname = 'father',
               this.JCage = 50
           }

           Son.prototype = new Person()
           function Son(){
               this.qq = '861918672',
               this.father = 'person',
               this.home = 'china' 
           }

           var son = new Son();
        //    son.JCname  father
        //    son.father person
        
        //    son.JCage  50
        //    son.home china
        //    son.qq 861918672

        //定义一个symbol属性,并且赋值
        let mysymbol = Symbol();
        Object.defineProperty(son, mysymbol,{
            value:'hello',
        })

        // 将属性home定义为不可枚举属性
        Object.defineProperty(son,'home',{
            enumerable:false
        })
        // console.log(son[mysymbol]);//hello
        }

• for … in

for(let i in son){
            console.log(i);
            //qq
            //father
            //JCname
            //JCage
        }
        结论  for ... in 循环可以遍历出可枚举的对象自身的属性和继承来的属性
       不含不可枚举属性，不含symbol属性

• Object.keys()

Object.keys() 返回一个数组
        console.log(Object.keys(son));
        //["qq", "father"]
        结论 Object.keys() 方法只能遍历自身的可枚举属性
        不含不可枚举属性，不含继承属性，不含symbol属性

• Object.getOwnPropertyNames()

        console.log(Object.getOwnPropertyNames(son));
        //["qq", "father", "home"]
		结果返回一个数组
        结论： 返回自身的所有（包括不可枚举属性）属性（除了symbol属性）

• Object.getOwnPropertySymbols()

        console.log(Object.getOwnPropertySymbols(son));
        [Symbol()]
        结果返回一个数组
        结论： 返回一个数组，包含自身所有的symbol属性

• Reflect.ownKeys()

        console.log(Reflect.ownKeys(son));
        //["qq", "father", "home", Symbol()]
        返回一个数组
        包含对象自身的所有属性 (不论是否可枚举，或者是symbol属性)

最后我们可以通过for … in 可以遍历出对象自身和继承可枚举属性属性的特点以及reflect.ownKeys()遍历自身所有属性的特点

封装一个遍历自身所有属性以及继承来的可枚举属性的函数

就当是练习一下ES6的一些方法：

function attrArray(obj){
            let forArray = [];
            let refArray = [];
            let newArray = [];
            let finalArray = [];
            //先用for ... in 
            for(let i in obj){
                forArray.push(i);
                // ["qq", "father", "JCname", "JCage"]
            }

            //reflect.ownKeys()
            refArray = Reflect.ownKeys(obj);
            // ["qq", "father", "home", Symbol()]

            //数组合并
            newArray = [...forArray,...refArray];
            //  ["qq", "father", "JCname", "JCage", "qq", "father", "home", Symbol()]

            //数组去重
            finalArray = (new Set(newArray))
            return [...finalArray];
        }
        console.log(attrArray(son));
        //["qq", "father", "JCname", "JCage", "home", Symbol()]

大功告成 明天总结一下set 和 get 数据结构