JavaScript 中遍历对象的属性

2016-07-25 21:00:00

原文链接

JavaScript 中遍历对象的属性

参考

JavaScript中的属性:如何遍历属性
《JavaScript 高级程序设计》

概述

遍历 JavaScript 对象中的属性没有其他语言那么简单，因为两个因素会影响属性的遍历：属性的 [[Enumerable]] 特性为 true 才能被 for-in 访问；由于原型链，访问属性时会沿着整个原型链从下到上查找属性。所以说遍历属性时，要考虑这两个因素。

开始遍历

先定义两个类吧：Person 和 Student，后者继承前者。然后再声明并初始化一个 Student 的实例 p1。其中自身属性有 grade（可枚举）和 tel（不可枚举），从原型链继承属性 type.
可枚举意思是属性的 [[Enumerable]] 值为 true，自身的属性意思是不是从 原型链 继承的属性

function Person(name) {    this.name = name;}Person.prototype.type = "people";function Student(name, grade) {    Person.call(this, name);    this.grade = grade;}Student.prototype = new Person();Student.prototype.constructor = Student;var p1 = new Student("Zero", "Junior");Object.defineProperty(p1, "tel", {    value: 123456,    enumerable: false});

遍历可枚举的、自身的属性

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

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

for (prop in p1) {    if (p1.hasOwnProperty(prop)) {        console.log(prop);    }}

结果是：name 和 grade 属性
注：后者对浏览器的支持更佳

遍历所有（可枚举的&不可枚举的）、自身的属性

使用 Object.getOwnPropertyNames()

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

结果是：name 、 grade 和 tel 属性

遍历可枚举的、自身+继承的属性

使用 for-in

var getEnumPropertyNames = (obj) => {    var props = [];    for (prop in obj) {        props.push(prop);    }    return props;};for (let prop of getEnumPropertyNames(p1)) {    console.log(prop);}

结果是：name 、 grade 、 constructor 和 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

关键字：JavaScript

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击举报进行投诉反馈！