写该系列文章的初衷是“让每位前端工程师把握高频知识点，为工作助力”。这是前端百题斩的第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 }});- 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) ]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 遍历程序
上述遍历对象的属性时都遵循同样的属性遍历秩序规定：
- 首先遍历所有属性名为数值的属性，依照数字排序
- 其次遍历所有属性名为字符串的属性，依照生成工夫排序
- 最初遍历所有属性名为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.关注公众号执鸢者，与号主一起斩杀前端百题。