JavaScript 中遍历对象的属性

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

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

原文链接

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

idc机房托管私有云遍历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遍历数组总结我们定义一个数组 var arr = [2,4,6]; 1.使用for循环遍历 var lengt...

jiekechoo 2019-08-23 12:55 评论0 收藏0