Javascript對象如何循環(huán)遍歷？下面本篇文章給大家詳細介紹5種JS對象遍歷方法，并淺顯對比一下這5種方法，希望對大家有所幫助！

一、對象的遍歷方法

• for ... in

• Object.keys(), Object.values(), Object.entries()

• Object.getOwnPropertyNames()

• Object.getOwnPropertySymbols()

• Reflect.ownKeys()

二、對象屬性遍歷次序規(guī)則

以上5種方法遍歷對象的屬性時都遵守同樣的屬性遍歷次序規(guī)則

• 屬性名為數(shù)值，按照數(shù)值升序排序

• 屬性名為字符串，按照生成時間升序排序

• 屬性名為Symbol，按照生成時間升序排序

三、遍歷方法詳解

1. for in

for…in 主要用于循環(huán)對象屬性。循環(huán)中的代碼每執(zhí)行一次，就會對對象的屬性進行一次操作。其語法如下：

for (var in object) {  執(zhí)行的代碼塊 }

其中兩個參數(shù)：

• var：必須。指定的變量可以是數(shù)組元素，也可以是對象的屬性。

• object：必須。指定迭代的的對象。

var obj = {a: 1, b: 2, c: 3};    for (var i in obj) {      console.log('鍵名：', i);      console.log('鍵值：', obj[i]);  }

輸出結(jié)果：

鍵名：a 鍵值：1 鍵名：b 鍵值：2 鍵名：c 鍵值：3

注意：

• for in 方法不僅會遍歷當(dāng)前的對象所有的可枚舉屬性，還會遍歷其原型鏈上的屬性。

2. Object.keys()、Object.values()、Object.entries()

這三個方法都用來遍歷對象，它會返回一個由給定對象的自身可枚舉屬性（不含繼承的和Symbol屬性）組成的數(shù)組，數(shù)組元素的排列順序和正常循環(huán)遍歷該對象時返回的順序一致，這個三個元素返回的值分別如下：

• Object.keys()：返回包含對象鍵名的數(shù)組；

• Object.values()：返回包含對象鍵值的數(shù)組；

• Object.entries()：返回包含對象鍵名和鍵值的數(shù)組。

let obj = {    id: 1,    name: 'hello',    age: 18  }; console.log(Object.keys(obj));   // 輸出結(jié)果: ['id', 'name', 'age'] console.log(Object.values(obj)); // 輸出結(jié)果: [1, 'hello', 18] console.log(Object.entries(obj));   // 輸出結(jié)果: [['id', 1], ['name', 'hello'], ['age', 18]

注意

• Object.keys()方法返回的數(shù)組中的值都是字符串，也就是說不是字符串的key值會轉(zhuǎn)化為字符串。

• 結(jié)果數(shù)組中的屬性值都是對象本身可枚舉的屬性，不包括繼承來的屬性。

3. Object.getOwnPropertyNames()

Object.getOwnPropertyNames()方法與Object.keys()類似，也是接受一個對象作為參數(shù)，返回一個數(shù)組，包含了該對象自身的所有屬性名。但它能返回不可枚舉的屬性。

let a = ['Hello', 'World'];   Object.keys(a) // ["0", "1"] Object.getOwnPropertyNames(a) // ["0", "1", "length"]

這兩個方法都可以用來計算對象中屬性的個數(shù)：

var obj = { 0: "a", 1: "b", 2: "c"}; Object.getOwnPropertyNames(obj) // ["0", "1", "2"] Object.keys(obj).length // 3 Object.getOwnPropertyNames(obj).length // 3

4. Object.getOwnPropertySymbols()

Object.getOwnPropertySymbols() 方法返回對象自身的 Symbol 屬性組成的數(shù)組，不包括字符串屬性：

let obj = {a: 1}   // 給對象添加一個不可枚舉的 Symbol 屬性 Object.defineProperties(obj, {  [Symbol('baz')]: {   value: 'Symbol baz',   enumerable: false  } })   // 給對象添加一個可枚舉的 Symbol 屬性 obj[Symbol('foo')] = 'Symbol foo'   Object.getOwnPropertySymbols(obj).forEach((key) => {  console.log(obj[key])  })   // 輸出結(jié)果：Symbol baz Symbol foo

5. Reflect.ownKeys()

Reflect.ownKeys() 返回一個數(shù)組，包含對象自身的所有屬性。它和Object.keys()類似，Object.keys()返回屬性key，但不包括不可枚舉的屬性，而Reflect.ownKeys()會返回所有屬性key：

var obj = {  a: 1,  b: 2 } Object.defineProperty(obj, 'method', {  value: function () {      alert("Non enumerable property")  },  enumerable: false })   console.log(Object.keys(obj)) // ["a", "b"] console.log(Reflect.ownKeys(obj)) // ["a", "b", "method"]

注意：

• Object.keys() ：相當(dāng)于返回對象屬性數(shù)組；

• Reflect.ownKeys() :相當(dāng)于 Object.getOwnPropertyNames(obj).concat(Object.getOwnPropertySymbols(obj)。

四、遍歷方法對比

【