本人詳細(xì)介紹了JS遍歷對象N種方法，歡迎關(guān)注收藏。

遍歷對象屬性有五種方法，下圖為一個場景對比圖。

可以注意到兩點：

只有for ... in 才可以遍歷原型鏈屬性，且只能遍歷可枚舉屬性。

Object.getOwnPropertyNames + Object.getOwnPropertySymbols = Reflect.ownKeys.

以上五種方法，用如下代碼來做例子：

let obj = {enum_prop: "enum_val",[Symbol("symbol")]: "symbol" };Object.defineProperty(obj, "no_enum_prop", {value: "no_enum_val", enumerable: false});Object.getPrototypeOf(obj).proto_enum_prop = "proto_enum_prop";

Object.keys

返回一個數(shù)組，包含對象自身所有enumerable屬性（不含Symbol屬性）的鍵名。

console.log(Object.keys(obj)); // 輸出：["enum_prop"]

類似的其他兩個函數(shù)為Object.values() 和Object.entries()。

console.log(Object.values(obj)); // 輸出：["enum_val"] console.log(Object.entries(obj)); // 輸出：[[enum_prop: "enum_val"]]

for ... in

循環(huán)遍歷對象自身和prototype的可枚舉屬性（不含Symbol屬性）

for(let prop in obj){console.log(prop); } // 輸出: enum_prop proto_enum_prop

Object.getOwnPropertyNames(obj)

返回一個數(shù)組，包含對象自身所有可枚舉和不可枚舉屬性的（不含Symbol屬性）的鍵名

console.log(Object.getOwnPropertyNames(obj)); // 輸出：["enum_prop", "no_enum_prop"]

Object.getOwnPropertySymbols(obj)

返回一個數(shù)組，包含對象自身的所有Symbol屬性的鍵名。

console.log(Object.getOwnPropertySymbols(obj)); // 輸出：[Symbol(symbol)]

Reflect.ownKeys(obj)

返回數(shù)組，包含對象自身可枚舉屬性、不可枚舉屬性和Symbol屬性。

console.log(Reflect.ownKeys(obj)); // 輸出：["enum_prop", "no_enum_prop", Symbol(symbol)]

對象屬性的順序

對于對象屬性的順序，經(jīng)常看到的說法是：ES5 沒有制定，ES6按照如下方式：

值為整形的按照升序排序。

普通字符串的按照插入順序。

Symbol按照插入順序。

但是，以下是我從MDN上找到：

for ... in: 返回的屬性順序是不確定的。以下來自MDN文檔：

Object.keys(obj)：返回順序與for ... in 相同。以下來自MDN文檔：

Object.getOwnPropertyNames(obj)：返回順序中可枚舉屬性和 for ...in相同，不可枚舉屬性的順序沒有定義，參見：

Object.getOwnPropertySymbols和Reflect.ownKeys，MDN文檔沒有說明順序。

總結(jié)來說：避免依賴對象屬性的順序。

總結(jié)

以上是生活随笔為你收集整理的遍历对象属性_细说JS遍历对象属性的N种方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。