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

遍歷對(duì)象屬性有五種方法，下圖為一個(gè)場(chǎng)景對(duì)比圖。

可以注意到兩點(diǎn)：

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

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

以上五種方法，用如下代碼來(lái)做例子：

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

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

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

類似的其他兩個(gè)函數(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)遍歷對(duì)象自身和prototype的可枚舉屬性（不含Symbol屬性）

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

Object.getOwnPropertyNames(obj)

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

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

Object.getOwnPropertySymbols(obj)

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

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

Reflect.ownKeys(obj)

返回?cái)?shù)組，包含對(duì)象自身可枚舉屬性、不可枚舉屬性和Symbol屬性。

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

對(duì)象屬性的順序

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

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

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

Symbol按照插入順序。

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

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

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

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

Object.getOwnPropertySymbols和Reflect.ownKeys，MDN文檔沒(méi)有說(shuō)明順序。

總結(jié)來(lái)說(shuō)：避免依賴對(duì)象屬性的順序。

總結(jié)

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

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