前端百題斬【005】—— js中9種遍歷對象的方法

寫該系列文章的初衷是「讓每位前端工程師掌握高頻知識點，爲工做助力」。這是前端百題斬的第5斬，但願朋友們關注公衆號「執鳶者」，用知識武裝本身的頭腦

5.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
    }
});

1. Object.keys(obj)

Object.keys 返回一個全部元素爲字符串的數組，其元素來自於從給定的 object上面可直接枚舉的屬性(不含Symbol屬性）。這些屬性的順序與手動遍歷該對象屬性時的一致。

console.log('Object.keys()', Object.keys(Obj)); // Object.keys() [ 'd' ]

2. Object.values(obj)

Object.values()返回一個數組，其元素是在對象上找到的可枚舉屬性值。屬性的順序與經過手動循環對象的屬性值所給出的順序相同。

console.log('Object.values()', Object.values(Obj)); // Object.values() [ 'ddddd' ]

3. Object.entries(obj)

Object.entries()返回一個數組，其元素是與直接在 object上找到的可枚舉屬性鍵值對相對應的數組。屬性的順序與經過手動循環對象的屬性值所給出的順序相同。

console.log('Object.entries()', Object.entries(Obj)); // Object.entries() [ [ 'd', 'ddddd' ] ]

4. Object.getOwnPropertyNames(obj)

Object.getOwnPropertyNames()方法返回一個由指定對象的全部自身屬性的屬性名（包括不可枚舉屬性但不包括Symbol值做爲名稱的屬性）組成的數組。

console.log('Object.getOwnPropertyNames()', Object.getOwnPropertyNames(Obj)); // Object.getOwnPropertyNames() [ 'd', 'e' ]

5. Object.getOwnPropertySymbols(obj)

Object.getOwnPropertySymbols() 方法返回一個給定對象自身的全部 Symbol 屬性的數組。

console.log('Object.getOwnPropertySymbols()', Object.getOwnPropertySymbols(Obj)); // Object.getOwnPropertySymbols() [ Symbol(f) ]

6. 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);
}

7. for……of

必須部署了Iterator接口後才能使用。使用範圍：數組、Set和Map結構、類數組對象（arguments、DOMNodeList對象……）、Generator對象以及字符串

for(let value of Object.values(Obj)) {
    // for of: ddddd
    console.log('for of:', value);
}

8. forEach

使用break不能中斷循環使用

Object.values(Obj).forEach(value => {
    // forEach: ddddd
    console.log('forEach:', value);
});

9. Reflect.ownKeys(obj)

返回一個數組，包含對象自身的全部屬性，無論屬性名是Symbol仍是字符串，也無論是否可枚舉。

console.log('Reflect.ownKeys()', Reflect.ownKeys(Obj)); // Reflect.ownKeys() [ 'd', 'e', Symbol(f) ]

5.2 特色總結

類型	特色
Object.keys(obj)	返回對象自己可直接枚舉的屬性(不含Symbol屬性）
Object.values(obj)	返回對象自己可直接枚舉的屬性值(不含Symbol屬性）
Object.entries(obj)	返回對象自己可枚舉屬性鍵值對相對應的數組(不含Symbol屬性）
Object.getOwnPropertyNames(obj)	返回對象全部自身屬性的屬性名（不包括Symbol值做爲名稱的屬性）
Object.getOwnPropertySymbols(obj)	返回一個給定對象自身的全部 Symbol 屬性的數組
for……in	全部可枚舉的屬性（包括原型上的）
for……of	必須部署了Iterator接口後才能使用，例如數組、Set和Map結構、類數組對象、Generator對象以及字符串
forEach	break不能中斷循環
Reflect.ownKeys(obj)	對象自身全部屬性

5.3 遍歷順序

上述遍歷對象的屬性時都遵循一樣的屬性遍歷次序規則：

1. 首先遍歷全部屬性名爲數值的屬性，按照數字排序
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) ]

1.若是以爲這篇文章還不錯，來個分享、點贊吧，讓更多的人也看到

2.關注公衆號執鳶者，與號主一塊兒斬殺前端百題。