原文链接
参考
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