前端百题斩【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.关注公众号执鸢者，与号主一块儿斩杀前端百题。