詳解Javascript物件的5種循環遍歷方法-js教程-PHP中文網

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

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

一、物件的遍歷方法

#for ... in
#Object.keys(), Object.values(), Object.entries()

.getOwnPropertyNames()

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(&#39;键名：&#39;, i); 
    console.log(&#39;键值：&#39;, obj[i]); 
}

登入後複製

輸出結果：

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

登入後複製

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

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

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

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

let obj = { 
  id: 1, 
  name: &#39;hello&#39;, 
  age: 18 
};
console.log(Object.keys(obj));   // 输出结果: [&#39;id&#39;, &#39;name&#39;, &#39;age&#39;]
console.log(Object.values(obj)); // 输出结果: [1, &#39;hello&#39;, 18]
console.log(Object.entries(obj));   // 输出结果: [[&#39;id&#39;, 1], [&#39;name&#39;, &#39;hello&#39;], [&#39;age&#39;, 18]

登入後複製

注意

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

結果陣列中的屬性值都是物件本身

可列舉的屬性，不包含繼承來的屬性。

3. Object.getOwnPropertyNames()

#Object.getOwnPropertyNames()

方法與

類似，也是接受一個物件作為參數，傳回一個數組，包含了該物件本身的所有屬性名稱。但它能傳回
不可枚舉的屬性。

let a = [&#39;Hello&#39;, &#39;World&#39;];
 
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(&#39;baz&#39;)]: {
  value: &#39;Symbol baz&#39;,
  enumerable: false
 }
})
 
// 给对象添加一个可枚举的 Symbol 属性
obj[Symbol(&#39;foo&#39;)] = &#39;Symbol foo&#39;
 
Object.getOwnPropertySymbols(obj).forEach((key) => {
 console.log(obj[key]) 
})
 
// 输出结果：Symbol baz Symbol foo

登入後複製

var obj = {
 a: 1,
 b: 2
}
Object.defineProperty(obj, &#39;method&#39;, {
 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)遍歷方法自身屬性繼承屬性遍歷基本屬性會遍歷原型鏈

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

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

相關標籤：

javascript 物件循環遍歷

來源：php.cn

上一篇：BOM核心之window物件（總結分享）下一篇：深入淺析JavaScript中的定時器

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

作者最新文章