JavaScript 中 9 種遍歷對象的方法
1 簡介
對象是在編程中最常見的部分,很多情況下需要遍歷該對象上的屬性,那麼有幾種方式可以幫助我們遍歷該對象上的屬性呢?下面一起來了解九種方法。
下面測試方法所用的對象如下所示:
const parentObj = {
a: 'aaaaa',
b: Symbol('bbbbb'),
c: 'ccccc'
};
const Obj = Object.create(parentObj, {
d: {
value: 'ddddd',
enumerable: true
},
e: {
value: 'eeeee',
enumerable: false
},
[Symbol('f')]: {
value: 'fffff',
enumerable: true
}
});
- Object.keys(obj)
Object.keys
返回一個所有元素爲字符串的數組,其元素來自於從給定的object
上面可直接枚舉的屬性 (不含 Symbol 屬性)。這些屬性的順序與手動遍歷該對象屬性時的一致。
console.log('Object.keys()', Object.keys(Obj)); // Object.keys() [ 'd' ]
- Object.values(obj)
Object.values()
返回一個數組,其元素是在對象上找到的可枚舉屬性值。屬性的順序與通過手動循環對象的屬性值所給出的順序相同。
console.log('Object.values()', Object.values(Obj)); // Object.values() [ 'ddddd' ]
- Object.entries(obj)
Object.entries()
返回一個數組,其元素是與直接在object
上找到的可枚舉屬性鍵值對相對應的數組。屬性的順序與通過手動循環對象的屬性值所給出的順序相同。
console.log('Object.entries()', Object.entries(Obj)); // Object.entries() [ [ 'd', 'ddddd' ] ]
- Object.getOwnPropertyNames(obj)
Object.getOwnPropertyNames()
方法返回一個由指定對象的所有自身屬性的屬性名(包括不可枚舉屬性但不包括 Symbol 值作爲名稱的屬性)組成的數組。
console.log('Object.getOwnPropertyNames()', Object.getOwnPropertyNames(Obj)); // Object.getOwnPropertyNames() [ 'd', 'e' ]
- Object.getOwnPropertySymbols(obj)
Object.getOwnPropertySymbols()
方法返回一個給定對象自身的所有 Symbol 屬性的數組。
console.log('Object.getOwnPropertySymbols()', Object.getOwnPropertySymbols(Obj)); // Object.getOwnPropertySymbols() [ Symbol(f) ]
- for……in
遍歷所有可枚舉的屬性(包括原型上的),然後可利用 hasOwnProperty 判斷對象是否包含特定的自身(非繼承)屬性,其具有以下特點:
(1)index 索引爲字符串型數字,不能直接進行幾何運算
(2)遍歷順序有可能不是按照實際數組的內部順序
(3)會遍歷數組的所有可枚舉屬性,包括原型
(4)for...in 更適合便利對象,不要使用 for...in 遍歷數組
for(let key in Obj) {
// for in: d
// for in: a
// for in: b
// for in: c
console.log('for in:', key);
}
- for……of
必須部署了 Iterator 接口後才能使用。使用範圍:數組、Set 和 Map 結構、類數組對象(arguments、DOMNodeList 對象……)、Generator 對象以及字符串
for(let value of Object.values(Obj)) {
// for of: ddddd
console.log('for of:', value);
}
- forEach
使用 break 不能中斷循環使用
Object.values(Obj).forEach(value => {
// forEach: ddddd
console.log('forEach:', value);
});
- Reflect.ownKeys(obj)
返回一個數組,包含對象自身的所有屬性,不管屬性名是 Symbol 還是字符串,也不管是否可枚舉。
console.log('Reflect.ownKeys()', Reflect.ownKeys(Obj)); // Reflect.ownKeys() [ 'd', 'e', Symbol(f) ]
2 特點總結
3 遍歷順序
上述遍歷對象的屬性時都遵循同樣的屬性遍歷次序規則:
-
首先遍歷所有屬性名爲數值的屬性,按照數字排序
-
其次遍歷所有屬性名爲字符串的屬性,按照生成時間排序
-
最後遍歷所有屬性名爲 Symbol 值的屬性,按照生成時間排序
用下面代碼來驗證上述遍歷規則
const Obj = {
[Symbol(0)]: 'symbol',
1 : '1',
'c': 'c',
'1a1': '11',
22223333: '2',
'd': 'd'
};
console.log(Reflect.ownKeys(Obj)); // [ '1', '22223333', 'c', '1a1', 'd', Symbol(0) ]
前端之神 一位前端小菜雞,寫過 100 多篇原創文章,全網有 5w + 個前端朋友,夢想是成爲” 前端之神 “~
本文由 Readfog 進行 AMP 轉碼,版權歸原作者所有。
來源:https://mp.weixin.qq.com/s/RbuZWsgO4hzsbnzqViN99w