ES6遍历对象属性的方法


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 数据结构

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值