JavaScript 中遍歷對(duì)象的屬性

Atom 發(fā)布于2019-08-21 10:56 / 2011人閱讀

摘要：所以說(shuō)遍歷屬性時(shí)，要考慮這兩個(gè)因素。開(kāi)始遍歷先定義兩個(gè)類吧和，后者繼承前者。然后再聲明并初始化一個(gè)的實(shí)例。

原文鏈接

JavaScript 中遍歷對(duì)象的屬性

參考

JavaScript中的屬性:如何遍歷屬性
《JavaScript 高級(jí)程序設(shè)計(jì)》

概述

遍歷 JavaScript 對(duì)象中的屬性沒(méi)有其他語(yǔ)言那么簡(jiǎn)單，因?yàn)閮蓚€(gè)因素會(huì)影響屬性的遍歷：對(duì)象屬性的屬性描述符 (property descriptor) 的 [[Enumerable]] 特性為 true （可枚舉）才能被 for-in 訪問(wèn)；如果在對(duì)象本身沒(méi)有找到屬性，接下來(lái)會(huì)在原型鏈上查找，訪問(wèn)屬性時(shí)會(huì)沿著整個(gè)原型鏈從下到上查找屬性。所以說(shuō)遍歷屬性時(shí)，要考慮這兩個(gè)因素。

開(kāi)始遍歷

先定義兩個(gè)類吧：Person 和 Student，后者繼承前者。然后再聲明并初始化一個(gè) Student 的實(shí)例 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對(duì)返回的數(shù)組進(jìn)行遍歷
for (let prop of Object.keys(p1)){
    console.log(prop);
}

// 得到可枚舉、自身+繼承的屬性
for (let prop in p1) {
    // 過(guò)濾繼承屬性
    if (p1.hasOwnProperty(prop)) {
        console.log(prop);
    }
}

結(jié)果是：name 和 grade 屬性
注： Object.keys() 的使用環(huán)境是 ES5+

遍歷所有（可枚舉的&不可枚舉的）、自身的屬性

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

結(jié)果是：name 、 grade 和 tel 屬性

遍歷可枚舉的、自身+繼承的屬性

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

結(jié)果是：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);
}

結(jié)果很多：包括自身屬性 name 、 grade 等，繼承屬性 type 、 toString 、valueOf 等

EOF