JavaScript 中遍歷對象的屬性

Atom 發布于2019-08-21 10:56 / 2007人閱讀

摘要：所以說遍歷屬性時，要考慮這兩個因素。開始遍歷先定義兩個類吧和，后者繼承前者。然后再聲明并初始化一個的實例。

原文鏈接

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對象遍歷對象的屬性

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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