写该系列文章的初衷是“让每位前端工程师掌握高频知识点,为工作助力”。这是前端百题斩的第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) ]
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 遍历顺序
上述遍历对象的属性时都遵循同样的属性遍历次序规则:
首先遍历所有属性名为数值的属性,按照数字排序
其次遍历所有属性名为字符串的属性,按照生成时间排序
最后遍历所有属性名为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
3. 前端百题斩【003-004】——从基本类型、引用类型到包装对象
6. 一文搞懂Cookie、Storage、IndexedDB
8. (2.6w字)网络知识点灵魂拷问(上)——前端面试必问
9. (2.6w字)网络知识点灵魂拷问(下)——前端面试必问
12. 理论与实践相结合彻底理解CORS
13. 三步法解析Express源码
17. 一文彻底搞懂前端监控
18. 前端的葵花宝典——架构
19. canvas从入门到猪头
21. 2021 年前端宝典【超三百篇】
22. 前端也要懂机器学习(上)
23. 前端也要懂机器学习(下)
24. 学架构助力前端起飞
26. Vue源码思想在工作中的应用
27. 一文搞定Diff算法