建站
咨詢
售后
建站咨詢
新聞中心
1 簡介
對象是在編程中最常見的部分，很多情況下需要遍歷該對象上的屬性，那么有幾種方式可以幫助我們遍歷該對象上的屬性呢?下面一起來了解九種方法。
讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領域值得信任、有價值的長期合作伙伴，公司提供的服務項目有：域名注冊、網(wǎng)站空間、營銷軟件、網(wǎng)站建設、婺城網(wǎng)站維護、網(wǎng)站推廣。
下面測試方法所用的對象如下所示：
- 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 返回一個所有元素為字符串的數(shù)組，其元素來自于從給定的object上面可直接枚舉的屬性(不含Symbol屬性)。這些屬性的順序與手動遍歷該對象屬性時的一致。
- console.log('Object.keys()', Object.keys(Obj)); // Object.keys() [ 'd' ]
Object.values(obj)
Object.values()返回一個數(shù)組，其元素是在對象上找到的可枚舉屬性值。屬性的順序與通過手動循環(huán)對象的屬性值所給出的順序相同。
- console.log('Object.values()', Object.values(Obj)); // Object.values() [ 'ddddd' ]
Object.entries(obj)
Object.entries()返回一個數(shù)組，其元素是與直接在object上找到的可枚舉屬性鍵值對相對應的數(shù)組。屬性的順序與通過手動循環(huán)對象的屬性值所給出的順序相同。
- console.log('Object.entries()', Object.entries(Obj)); // Object.entries() [ [ 'd', 'ddddd' ] ]
Object.getOwnPropertyNames(obj)
Object.getOwnPropertyNames()方法返回一個由指定對象的所有自身屬性的屬性名(包括不可枚舉屬性但不包括Symbol值作為名稱的屬性)組成的數(shù)組。
- console.log('Object.getOwnPropertyNames()', Object.getOwnPropertyNames(Obj)); // Object.getOwnPropertyNames() [ 'd', 'e' ]
Object.getOwnPropertySymbols(obj)
Object.getOwnPropertySymbols() 方法返回一個給定對象自身的所有 Symbol 屬性的數(shù)組。
- console.log('Object.getOwnPropertySymbols()', Object.getOwnPropertySymbols(Obj)); // Object.getOwnPropertySymbols() [ Symbol(f) ]
for……in
遍歷所有可枚舉的屬性(包括原型上的)，然后可利用hasOwnProperty判斷對象是否包含特定的自身(非繼承)屬性，其具有以下特點：
(1)index索引為字符串型數(shù)字，不能直接進行幾何運算
(2)遍歷順序有可能不是按照實際數(shù)組的內(nèi)部順序
(3)會遍歷數(shù)組的所有可枚舉屬性，包括原型
(4)for...in更適合便利對象，不要使用for...in遍歷數(shù)組
- 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接口后才能使用。使用范圍：數(shù)組、Set和Map結構、類數(shù)組對象(arguments、DOMNodeList對象……)、Generator對象以及字符串
- for(let value of Object.values(Obj)) {
- // for of: ddddd
- console.log('for of:', value);
- }
forEach
使用break不能中斷循環(huán)使用
- Object.values(Obj).forEach(value => {
- // forEach: ddddd
- console.log('forEach:', value);
- });
Reflect.ownKeys(obj)
返回一個數(shù)組，包含對象自身的所有屬性，不管屬性名是Symbol還是字符串，也不管是否可枚舉。
- console.log('Reflect.ownKeys()', Reflect.ownKeys(Obj)); // Reflect.ownKeys() [ 'd', 'e', Symbol(f) ]
2 特點總結
| 類型 | 特點 |
|---|---|
| Object.keys(obj) | 返回對象本身可直接枚舉的屬性(不含Symbol屬性） |
| Object.values(obj) | 返回對象本身可直接枚舉的屬性值(不含Symbol屬性） |
| Object.entries(obj) | 返回對象本身可枚舉屬性鍵值對相對應的數(shù)組(不含Symbol屬性） |
| Object.getOwnPropertyNames(obj) | 返回對象所有自身屬性的屬性名（不包括Symbol值作為名稱的屬性） |
| Object.getOwnPropertySymbols(obj) | 返回一個給定對象自身的所有 Symbol 屬性的數(shù)組 |
| for……in | 所有可枚舉的屬性（包括原型上的） |
| for……of | 必須部署了Iterator接口后才能使用，例如數(shù)組、Set和Map結構、類數(shù)組對象、Generator對象以及字符串 |
| forEach | break不能中斷循環(huán) |
| Reflect.ownKeys(obj) | 對象自身所有屬性 |
3 遍歷順序
上述遍歷對象的屬性時都遵循同樣的屬性遍歷次序規(guī)則：
- 首先遍歷所有屬性名為數(shù)值的屬性，按照數(shù)字排序
- 其次遍歷所有屬性名為字符串的屬性，按照生成時間排序
- 最后遍歷所有屬性名為Symbol值的屬性，按照生成時間排序
用下面代碼來驗證上述遍歷規(guī)則
- 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) ]
本文轉載自微信公眾號「執(zhí)鳶者」，可以通過以下二維碼關注。轉載本文請聯(lián)系執(zhí)鳶者公眾號。
當前名稱：前端百題斬之—— JS中9種遍歷對象的方法
分享網(wǎng)址：http://www.dlmjj.cn/article/codpdcd.html
