前端百题斩【005】—— js中9种遍历对象的方法

写该系列文章的初衷是“让每位前端工程师掌握高频知识点，为工作助力”。这是前端百题斩的第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' ]

1. Object.values(obj)

Object.values()返回一个数组，其元素是在对象上找到的可枚举属性值。属性的顺序与通过手动循环对象的属性值所给出的顺序相同。

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

1. Object.entries(obj)

Object.entries()返回一个数组，其元素是与直接在object上找到的可枚举属性键值对相对应的数组。属性的顺序与通过手动循环对象的属性值所给出的顺序相同。

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

1. Object.getOwnPropertyNames(obj)

Object.getOwnPropertyNames()方法返回一个由指定对象的所有自身属性的属性名（包括不可枚举属性但不包括Symbol值作为名称的属性）组成的数组。

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

1. Object.getOwnPropertySymbols(obj)

Object.getOwnPropertySymbols() 方法返回一个给定对象自身的所有 Symbol 属性的数组。

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

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

1. for……of

必须部署了Iterator接口后才能使用。使用范围：数组、Set和Map结构、类数组对象（arguments、DOMNodeList对象……）、Generator对象以及字符串

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

1. forEach

使用break不能中断循环使用

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

1. Reflect.ownKeys(obj)

返回一个数组，包含对象自身的所有属性，不管属性名是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)	返回对象本身可枚举属性键值对相对应的数组(不含Symbol属性）
Object.getOwnPropertyNames(obj)	返回对象所有自身属性的属性名（不包括Symbol值作为名称的属性）
Object.getOwnPropertySymbols(obj)	返回一个给定对象自身的所有 Symbol 属性的数组
for……in	所有可枚举的属性（包括原型上的）
for……of	必须部署了Iterator接口后才能使用，例如数组、Set和Map结构、类数组对象、Generator对象以及字符串
forEach	break不能中断循环
Reflect.ownKeys(obj)	对象自身所有属性

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.关注公众号执鸢者，领取学习资料，定期为你推送原创深度好文

3.扫描下方添加进群，里面大佬多多，一起向他们学习

1. 前端百题斩[001]——typeof和instanceof

2. 前端百题斩【002】——js中6种变量声明方式

3. 前端百题斩【003-004】——从基本类型、引用类型到包装对象

4. 百度、小红书三面，均遇“赛马”问题

5. 十五张图带你彻底搞懂从URL到页面展示发生的故事

6. 一文搞懂Cookie、Storage、IndexedDB

7. 六张图带你从HTTP/0.9进化到HTTP3.0

8. （2.6w字）网络知识点灵魂拷问（上）——前端面试必问

9. （2.6w字）网络知识点灵魂拷问（下）——前端面试必问

10. 理论与API相结合理解Node中的网络通信

11. 硬核知识点——浏览器中的三类五种请求

12. 理论与实践相结合彻底理解CORS

13. 三步法解析Express源码

14. 一篇搞定前端高频手撕算法题（36道）

15. 十七张图玩转Node进程——榨干它

16. 理论与API相结合理解Node中的网络通信

17. 一文彻底搞懂前端监控

18. 前端的葵花宝典——架构

19. canvas从入门到猪头

20. 前端工程师的一大神器——puppeteer

21. 2021 年前端宝典【超三百篇】

22. 前端也要懂机器学习（上）

23. 前端也要懂机器学习（下）

24. 学架构助力前端起飞

25. 假如只剩下canvas标签

26. Vue源码思想在工作中的应用

27. 一文搞定Diff算法