JavaScript 中遍历对象的属性

Atom 发布于2019-08-21 10:56 / 1976人阅读

摘要：所以说遍历属性时，要考虑这两个因素。开始遍历先定义两个类吧和，后者继承前者。然后再声明并初始化一个的实例。

原文链接

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

云服务器 GPU云服务器遍历json对象属性 js包装对象中的属性 javascript对象遍历对象的属性

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86431.html

javaScript遍历对象属性

摘要：遍历对象的属性并没有像中遍历一个那么简单，主要原因有以下两点在中对象的属性分为可枚举与不可枚举之分他们是由属性的的值决定的。 javascript遍历对象的属性并没有像java中遍历一个Map那么简单，主要原因有以下两点: 在javascript中对象的属性分为可枚举与不可枚举之分,他们是由属性的 enumerable 的值决定的。可枚举性决定了这个属性是否可以被 for-in ...

liaorio 2019-08-22 13:51 评论0 收藏0
JavaScript 中的 for 循环

摘要：在中，引入了新的循环，即循环。而且，遍历数组元素的顺序可能是随机的。所以，鉴于以上种种缺陷，我们需要改进原先的循环。总结一下，循环有以下几个特征这是最简洁最直接的遍历数组元素的语法。在ECMAScript5（简称 ES5）中，有三种 for 循环，分别是：简单for循环 for-in forEach 在2015年6月份发布的ECMAScript6（简称 ES6）中，新增了一种循...

chengjianhua 2019-08-21 10:42 评论0 收藏0
JavaScript对象遍历

摘要：简单说就是一个有一个函数，这个函数执行的返回值一定是一个对象，对象有两个属性标记迭代是否结束，标记这次迭代的结果值。引言遍历对象是平常工作中很常见的一个操作，几乎是日常操作，但是遍历对象真的是一件很容易的事情么，显然不是的。常用的方式 for...in for (variable in object) {...} 这个是一个很常见的用法，相信每个人顺手都可以写出来。但是这里需要主...

Seay 2019-08-26 13:53 评论0 收藏0
JavaScript：遍历

摘要：中可以实现遍历的数据类型主要是对象，其中包括普通对象与数组。遍历器是一种接口，为各种不同的数据结构提供统一的访问机制。实例五遍历器对象实例五是的遍历过程，通过手动调用其对象的方法实现信息获取。为每个数组元素执行函数。前言将依据自身痛点学习，计划对原生JavaScript写一个系统，本文为第一篇，感兴趣的同学可以关注个人公众号：ZeroToOneMe，或者github博客，将持续...

ThinkSNS 2019-08-23 17:51 评论0 收藏0
javascript对象原型成员详解

摘要：和的作用一样，区别在于写法语法对象对象作用判断对象是否在对象的原型链上语法对象构造函数作用判断构造函数的属性是否在对象的原型链上，如果在，就返回属性是否可枚举用于检查给定的属性是否能够使用语句。 ## javascript对象原型成员详解 ## ECMAScript 中的对象就是一组数据和功能的集合，对象可以通过 new 操作符后跟要创建的对象名称来...

zhkai 2019-08-23 12:12 评论0 收藏0