JS中遍历对象的方法有哪些
本篇内容主要讲解“JS中遍历对象的方法有哪些”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“JS中遍历对象的方法有哪些”吧!
成都创新互联是网站建设专家,致力于互联网品牌建设与网络营销，专业领域包括成都网站建设、成都网站设计、电商网站制作开发、微信平台小程序开发、微信营销、系统平台开发，与其他网站设计及系统开发公司不同，我们的整合解决方案结合了恒基网络品牌建设经验和互联网整合营销的理念，并将策略和执行紧密结合，且不断评估并优化我们的方案，为客户提供全方位的互联网品牌整合方案！
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) ]到此，相信大家对“JS中遍历对象的方法有哪些”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
本文名称：JS中遍历对象的方法有哪些
网页URL：http://6mz.cn/article/iieeso.html