JS遍历对象的几种方法
JS遍历对象的几种方法
1.for in
for in循环是最基础的遍历对象的方式,它还会得到对象原型链上的属性
// 创建一个对象并指定其原型,bar 为原型上的属性 const obj = Object.create({ bar: 'bar' }) // foo 为对象自身的属性 obj.foo = 'foo' for (let key in obj) { console.log(obj[key]) // foo, bar }
可以看到对象原型上的属性也被循环出来了
在这种情况下可以使用对象的hasOwnProperty()方法过滤掉原型链上的属性
for (let key in obj) { if (obj.hasOwnProperty(key)) { console.log(obj[key]) // foo } }
这时原型上的bar属性就被过滤掉了
2.Object.keys
Object.keys()是ES5新增的一个对象方法,该方法返回对象自身属性名组成的数组,他会自动过滤掉原型链上的属性,然后可以通过数组的forEach()方法来遍历。
Object.keys(obj).forEach((key) => { console.log(obj[key]) // foo })
另外还有Object.values()方法和Object.entries()方法,这两种方法的作用范围和Object.keys()方法类似,因此不再说明
for in循环和object.keys()方法都不会返回对象的不可枚举属性
如果需要遍历不可枚举的属性,就要用到Object.getOwnPropertyNames()方法了
3.Object.getOwnPropertyNames()
也是ES5新增的一个对象方法,该方法返回对象自身属性名组成的数组,包括不可枚举的属性,也可以通过数组的forEach()方法来遍历。
// 创建一个对象并指定其原型,bar 为原型上的属性 // baz 为对象自身的属性并且不可枚举 const obj = Object.create({ bar: 'bar' }, { baz: { value: 'baz', enumerable: false } }) obj.foo = 'foo' // 不包括不可枚举的 baz 属性 Object.keys(obj).forEach((key) => { console.log(obj[key]) // foo }) // 包括不可枚举的 baz 属性 Object.getOwnPropertyNames(obj).forEach((key) => { console.log(obj[key]) // baz, foo })
ES2015 新增了 Symbol 数据类型,该类型可以作为对象的键,针对该类型 ES2015 同样新增了Object.getOwnPropertySymbols()方法
4.Object.getOwnPropertySymbols()
Object.getOwnPropertySymbols()
方法返回对象自身的 Symbol 属性组成的数组,不包括字符串属性
Object.getOwnPropertySymbols(obj).forEach((key) => { console.log(obj[key]) })
什么都没有,因为该对象还没有 Symbol 属性
// 给对象添加一个不可枚举的 Symbol 属性 Object.defineProperties(obj, { [Symbol('baz')]: { value: 'Symbol baz', enumerable: false } }) // 给对象添加一个可枚举的 Symbol 属性 obj[Symbol('foo')] = 'Symbol foo' Object.getOwnPropertySymbols(obj).forEach((key) => { console.log(obj[key]) // Symbol baz, Symbol foo })
5.Reflect.ownKeys
Reflect.ownKeys() 方法是 ES2015 新增的静态方法,该方法返回对象自身所有属性名组成的数组,包括不可枚举的属性和 Symbol 属性
Reflect.ownKeys(obj).forEach((key) => { console.log(obj[key]) // baz, foo, Symbol baz, Symbol foo })
对比
方式 | 基本属性 | 原型链 | 不可枚举 | Symbol |
---|---|---|---|---|
for in | 是 | 是 | 否 | 否 |
Object.keys() | 是 | 否 | 否 | 否 |
Object.getOwnPropertyNames() | 是 | 否 | 是 | 否 |
Object.getOwnPropertySymbols() | 否 | 否 | 是 | 是 |
Reflect.ownKeys() | 是 | 否 | 是 | 是 |
结论
这其中只有 for in 循环会得到对象原型链上的属性,其它方法都只适用于对象自身的属性
ES 语言后续添加的新特性不会对以前的代码产生副作用,比如在 ES2015 之前就存在的 for in 循环,Object.keys() 和 Object.getOwnPropertyNames() 是肯定不会返回 Symbol 属性的
- js对象的几种创建方法和for- in 遍历对象
- JS--定义对象的几种方法
- js中遍历对象的属性和值的方法
- JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
- JS遍历页面所有对象属性及实现方法
- js创建对象的几种方法
- jquery遍历筛选数组的几种方法和遍历解析json对象
- JS中几种常见的创建对象的方法
- js中遍历Map对象的方法
- 获取/设置IFRAME内对象元素的几种JS方法
- Js遍历键值对形式对象或Map形式的方法
- js中数组遍历的几种方法及其区别
- JS创建对象的几种方法
- jquery遍历筛选数组的几种方法和遍历解析json对象
- Js对一个对象应用滤镜的几种方法【整理】
- js 获取函数的所有参数和遍历JavaScript某个对象所有的属性名称和值的方法
- jquery的$.each方法解决了有索引特征js对象的遍历
- js 遍历对象常用的方法
- JS 数组和对象的遍历方式,以及几种方式的比较。
- js数组对象的几种遍历方式