原文鏈接

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對返回的數(shù)組進行遍歷 for (let prop of Object.keys(p1)){console.log(prop); } // 得到可枚舉、自身+繼承的屬性 for (let prop in p1) {// 過濾繼承屬性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

總結(jié)

以上是生活随笔為你收集整理的JavaScript 中遍历对象的属性的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。