JavaScript 中遍历对象的属性

原文链接

JavaScript 中遍历对象的属性

参考

JavaScript中的属性:怎样遍历属性
《JavaScript 高等程序设计》

概述

遍历 JavaScript 对象中的属性没有其他言语那末简朴,由于两个要素会影响属性的遍历:对象属性的属性描述符 (property descriptor) 的 [[Enumerable]] 特征为 true (可罗列)才被 for-in 接见;如果在对象本身没有找到属性,接下来会在原型链上查找,接见属性时会沿着全部原型链从下到上查找属性。所以说遍历属性时,要斟酌这两个要素。

最先遍历

先定义两个类吧:Person 和 Student,后者继续前者。然后再声明并初始化一个 Student 的实例 p1。个中本身属性有 grade(可罗列) 和 tel(不可罗列),从原型链继续属性 type.
可罗列意义是属性的 [[Enumerable]] 值为 true,本身的属性意义是 不是原型链 继续的属性

// ES3 ES5
function Person(name) {
    this.name = name;
}

Person.prototype.type = 'people';

function Student(name, grade) {
    Person.call(this, name);
    this.grade = grade;
}

if (Object.setPrototypeOf) {
    Object.setPrototypeOf(Student.prototype, Person.prototype);
} else {
    Student.prototype = Object.create(Person.prototype);
    Object.defineProperty(Student.prototype, 'constructor', {
        enumerable: false,
        writable: true,
        configurable: true,
        value: Student
    });
}

var p1 = new Student('Zero', 'Junior');
Object.defineProperty(p1, 'tel', {
    value: 123456,
    enumerable: false
});
// ES6+
class Person {
    constructor(name) {
        this.name = name;
    }
}

Person.prototype.type = 'people';

class Student extends Person {
    constructor(name, grade) {
        super(name);
        this.grade = grade;
    }
}

var p1 = new Student('zero', 'Junior');
Object.defineProperty(p1, 'tel', {
    value: 123456,
    enumerable: false
});

遍历可罗列的、本身的属性

运用 Object.keys() 或是 for..in + hasOwnProperty()

// Object.keys()返回可罗列、本身的属性
// 再用for..of对返回的数组举行遍历
for (let prop of Object.keys(p1)){
    console.log(prop);
}
// 获得可罗列、本身+继续的属性
for (let prop in p1) {
    // 过滤继续属性
    if (p1.hasOwnProperty(prop)) {
        console.log(prop);
    }
}

效果是:name 和 grade 属性
注: Object.keys() 的运用环境是 ES5+

遍历一切(可罗列的&不可罗列的)、本身的属性

// 运用 `Object.getOwnPropertyNames()`
for (let prop of Object.getOwnPropertyNames(p1)) {
    console.log(prop);
}

效果是:name 、 grade 和 tel 属性

遍历可罗列的、本身+继续的属性

// 运用 `for..in`
for (let prop in p1) {
    console.log(prop);
}

效果是:name 、 grade 和 type 属性

遍历一切的、本身+继续的属性

var getAllPropertyNames = (obj) => {
    var props = [];
    do {
        props = props.concat(Object.getOwnPropertyNames(obj));
    } while (obj = Object.getPrototypeOf(obj));
    return props;
};

for (let prop of getAllPropertyNames(p1)) {
    console.log(prop);
}

效果许多:包含本身属性 name 、 grade 等,继续属性 type 、 toString 、valueOf 等

EOF

    原文作者:zerosrat
    原文地址: https://segmentfault.com/a/1190000006058642
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞