美文网首页
JS常用方法整理-遍历对象

JS常用方法整理-遍历对象

作者: love丁酥酥 | 来源:发表于2018-02-23 18:20 被阅读89次

    1. 简介

    JS中经常需要对对象的属性进行遍历,下面我们来总结一下JS遍历对象属性的几种方法。

    2. for...in...

    for...in...循环会遍历对象自身的和继承的可枚举属性(不含Symbol属性)。

    // demo2
    function SuperType() {
        this.superVal = 'super';
    };
    SuperType.prototype.saySuperVal = function () {
        console.log(this.superVal);
    };
    
    function SubType() {
        this.subValOne = 'subOne';
        this.subValTwo = 'subTwo';
    };
    SubType.prototype = new SuperType();
    
    SubType.prototype.saySubValOne = function () {
        console.log(this.subValOne);
    };
    var obj = new SubType();
    Object.defineProperty(obj, 'notEnum', {
        value: 'notEnum',
        enumerable: false
    });
    for (let key in obj) {
        console.log(`${key}:${obj[key]}`);
    }
    
    // subValOne:subOne
    // subValTwo:subTwo
    // superVal:super
    /* saySubValOne:function () {
         console.log(this.subValOne);
    }*/
    /* saySuperVal:function () {
        console.log(this.superVal);
    }*/
    

    3.Object.entries()

    Object.keys()方法接收一个对象为参数,返回该对象自身可枚举属性的键值对数组,其排列与使用for...in...循环循环遍历该对象时返回的顺序一致(区别在于 for-in 循环也枚举原型链中的属性)。

    // 接demo2
    console.log(Object.entries(obj));  // [["subValOne", "subOne"], ["subValTwo", "subTwo"]]
    

    4. Object.keys()

    Object.keys()方法接收一个对象为参数,返回一个数组,包含该对象自身的(不含继承的)可枚举属性的key值(不含Symbol属性)。

    // 接demo2
    console.log(Object.keys(obj));  // ["subValOne", "subValTwo"]
    

    5. Object.values()

    Object.values()方法接收一个对象为参数,返回一个数组,包含该对象自身的(不含继承的)可枚举属性得value值(不含Symbol属性)。

    // 接demo2
    console.log(Object.values(obj));  // ["subOne", "subTwo"]
    

    6. Object.getOwnPropertyNames()

    Object.getOwnPropertyNames()方法接收一个对象为参数,返回一个数组,包含该对象自身的所有属性(不含Symbol属性,但是包含不可枚举属性)

    // 接demo2
    Object.getOwnPropertyNames(obj);  // ["subVal", "notEnum"]
    

    7. Object.getOwnPropertySymbols()

    Object.getOwnPropertySymbols()方法接收一个对象为参数,返回一个数组,包含该对象自身的所有Symbol属性。

    8. Reflect.ownKeys()

    Reflect.ownKeys()方法接收一个对象为参数,返回一个数组,包含该对象自身的所有属性(包含Symbol和不可枚举属性)。

    注:7,8涉及到ES6新增类型Symbol,我会在ES6知识中详细讲解。

    参考

    如何遍历JS对象中所有的属性 包括enumerable=false的属性?
    javaScript遍历对象、数组总结
    【探秘ES6】系列专栏(八):JS的第七种基本类型Symbols
    MDN-Object

    相关文章

      网友评论

          本文标题:JS常用方法整理-遍历对象

          本文链接:https://www.haomeiwen.com/subject/mgjgtftx.html