詳解Javascript物件的5種迴圈遍歷方法

一、物件的遍歷方法

• for ... in

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

• Object.getOwnPropertyNames()

• Object.getOwnPropertySymbols()

• Reflect.ownKeys()

二、物件屬性遍歷次序規則

以上5種方法遍歷物件的屬性時都遵守同樣的屬性遍歷次序規則

• 屬性名為數值，按照數值升序排序

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

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

三、遍歷方法詳解

1. for in

for…in 主要用於迴圈物件屬性。迴圈中的程式碼每執行一次，就會對物件的屬性進行一次操作。其語法如下：

for (var in object) {
 執行的程式碼塊
}

其中兩個引數：

• var：必須。指定的變數可以是陣列元素，也可以是物件的屬性。

• object：必須。指定迭代的的物件。

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

輸出結果：

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

注意：

• for in 方法不僅會遍歷當前的物件所有的可列舉屬性，還會遍歷其原型鏈上的屬性。

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

這三個方法都用來遍歷物件，它會返回一個由給定物件的自身可列舉屬性（不含繼承的和Symbol屬性）組成的陣列，陣列元素的排列順序和正常回圈遍歷該物件時返回的順序一致，這個三個元素返回的值分別如下：

• Object.keys()：返回包含物件鍵名的陣列；

• Object.values()：返回包含物件鍵值的陣列；

• Object.entries()：返回包含物件鍵名和鍵值的陣列。

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

注意

• Object.keys()方法返回的陣列中的值都是字串，也就是說不是字串的key值會轉化為字串。

• 結果陣列中的屬性值都是物件本身可列舉的屬性，不包括繼承來的屬性。

3. Object.getOwnPropertyNames()

Object.getOwnPropertyNames()方法與Object.keys()類似，也是接受一個物件作為引數，返回一個陣列，包含了該物件自身的所有屬性名。但它能返回不可列舉的屬性。

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

這兩個方法都可以用來計算物件中屬性的個數：

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 屬性組成的陣列，不包括字串屬性：

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]) 
})
 
// 輸出結果：Symbol baz Symbol foo

5. Reflect.ownKeys()

Reflect.ownKeys() 返回一個陣列，包含物件自身的所有屬性。它和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() ：相當於返回物件屬性陣列；

• Reflect.ownKeys() :相當於 Object.getOwnPropertyNames(obj).concat(Object.getOwnPropertySymbols(obj)。

四、遍歷方法對比

【相關推薦：】

以上就是詳解Javascript物件的5種迴圈遍歷方法的詳細內容，更多請關注TW511.COM其它相關文章！