詳解Javascript物件的5種循環遍歷方法

Javascript物件如何循環遍歷？以下這篇文章給大家詳細介紹5種JS物件遍歷方法，並淺顯對比一下這5種方法，希望對大家有幫助！

一、物件的遍歷方法

• #for ... in

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

.getOwnPropertyNames()

Object.getOwnPropertySymbols()

• Reflect.ownKeys()

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

• 屬性名稱為數值，依照數值

  升序排序

屬性名稱為字串

，依照

產生時間升序排序

屬性名稱為

Symbol，依照產生時間

升序排序

• 三、遍歷方法詳解

• #1. for in

• #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

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"]

#Reflect.ownKeys() :相當於Object.getOwnPropertyNames( obj).concat(Object.getOwnPropertySymbols(obj)遍歷方法自身屬性繼承屬性遍歷基本屬性會遍歷原型鏈

	#5 . Reflect.ownKeys()		Reflect.ownKeys() 傳回一個數組，包含物件本身的所有屬性。它和Object.keys()類似，Object.keys()傳回屬性key，但不包含不可列舉的屬性，而Reflect.ownKeys()會傳回所有屬性key：	注意：		Object.keys() ：相當於傳回物件屬性陣列；
。		四、遍歷方法對比

########################################## Symbol類型##################for ... in######自身#####繼承######是########################### ##是######否######不包含############Object.keys()######自己######### #######是######否######否######不包含############Object.getOwnPropertyNames()### ###自身###############是######否#######是#######不包含######### ####Object.getOwnPropertySymbols()######自身###############否######否######是###################################################### ##所有Symbol屬性############Reflect.ownKeys()#######自身###############是##### #否######是######包含################【相關推薦：###javascript學習教學######】## ####

以上是詳解Javascript物件的5種循環遍歷方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！