JS遍历对象的几种方法
几天前一个小伙伴问我 Object.getOwnPropertyNames()
是干什么用的
平时还真没有使用到这个方法,一时不知如何回答
从方法名称来分析,应该是返回的是对象自身属性名组成的数组
那和 Object.keys()
方法不就一样了吗
感觉事情并不这么简单,于是我仔细看了一下这几种遍历对象的方法的区别
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 属性就被过滤掉了
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()
方法了
Object.getOwnPropertyNames
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()
方法
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
})
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遍历对象的几种方法的更多相关文章
- js遍历对象的属性和方法
js遍历对象的属性和方法 一.总结 二.实例 练习1:具有默认值的构造函数 实例描述: 有时候在创建对象时候,我们希望某些属性具有默认值 案例思路: 在构造函数中判断参数值是否为undefined,如 ...
- js es6遍历对象的6种方法(应用中推荐前三种)
javaScript遍历对象总结 1.for … in 循环遍历对象自身的和继承的可枚举属性(循环遍历对象自身的和继承的可枚举属性(不含Symbol属性).). 2.使用Object.keys ...
- 【Javascript】JS遍历数组的三种方法:map、forEach、filter
前言 近一段时间,因为项目原因,会经常在前端对数组进行遍历.处理,JS自带的遍历方法有很多种,往往不加留意,就可能导致知识混乱的现象,并且其中还存在一些坑.前端时间在ediary中总结了js原生自带的 ...
- 辨析js遍历对象与数组的方法
1 遍历对象的方法? (1) for-in(也可遍历数组,但效率较低,一般用来遍历对象) 示例: // 生成一个原型上有属性并且有可枚举属性与不可枚举属性的对象 const data = Ob ...
- javascript生成对象的三种方法
/** js生成对象的三种方法*/ // 1.通过new Object,然后添加属性 示例如下: var people1 = new Object(); people1.name = 'xiaohai ...
- (转载)Java中如何遍历Map对象的4种方法
在Java中如何遍历Map对象 How to Iterate Over a Map in Java 在java中遍历Map有不少的方法.我们看一下最常用的方法及其优缺点. 既然java中的所有map都 ...
- js定义对象的几种容易犯的错误
//js定义对象的几种容易犯的错误function Person() { getName = function (){ console.info(1); }; return this;}//Perso ...
- 转载:遍历Map的四种方法
http://www.cnblogs.com/kristain/articles/2033566.html 遍历Map的四种方法 public static void main(String[] ar ...
- Java反射 - 1(得到类对象的几种方法,调用方法,得到包下的所有类)
通过反射获得对象的方法 准备工作: 有一个User类如下 package o1; /** * Created by yesiming on 16-11-19. */ public class User ...
随机推荐
- .NET CORE 依赖注入 实践总结
知识点回顾 依赖包. Microsoft.Extensions.DependencyInjection.Abstractions 核心对象和方法. IServiceCollection.注入对象的容器 ...
- 百度前端技术学院2018笔记 之 利用 CSS animation 制作一个炫酷的 Slider
前言 题目地址 利用 CSS animation 制作一个炫酷的 Slider 思路整理 首先页面包含三种东西 一个是type为radio的input其实就是单选框 二是每个单选框对应的label 三 ...
- [PHP学习教程 - 数字]001.数字补0(Num padding)
引言:在日常工作中,经常要用到数字前后补0的操作,如:日期格式yyyy-MM-dd等等. 在php中有多种前后填充函数——今天,我们就介绍常用的两种,实现数字补零: str_pad sprintf 大 ...
- Cypress系列(3)- Cypress 的初次体验
如果想从头学起Cypress,可以看下面的系列文章哦 https://www.cnblogs.com/poloyy/category/1768839.html 前言 这里的栗子项目时 Cypress ...
- Rocket - debug - TLDebugModuleInner - Program Buffer
https://mp.weixin.qq.com/s/kjhJJ3moRQzxHt6pJOXEgg 简单介绍TLDebugModuleInner中Program Buffer寄存器的实现. 1. pr ...
- jchdl - GSL实例 - ComplementTwo(二的补码)
https://mp.weixin.qq.com/s/Gh2xJJvfg1SlyuayK4LRyQ 二的补码指对二进制数的所有位数整体求补.二进制运算下0,1互为补数,n位二进制数a的补数为2^n ...
- Chisel3 - model - Builder
https://mp.weixin.qq.com/s/THqyhoLbbuXXAtdQXRQDdA 介绍构建硬件模型的Builder. 1. DynamicContext 动态上下文 ...
- Dubbo源码笔记-服务注册
今天来简单做一下Dubbo服务注册部分源码学习手记. 一.Dubbo配置解析 目前Dubbo最多的用法就是跟Spring集成,既然跟Spring集成,那么,Dubbo对象的实例化都将交由Spring统 ...
- Java实现蓝桥杯互补二元组
分三处 1.当差值为0并且只有一个二元组就不管他 2.当差值为0并且二元组个数>=1加上他并减去它本身 3.当差值为存在并且不为0时直接加上他 因为都计算了两次,所以最后ans/2 用了map的 ...
- java实现第八届蓝桥杯数位和
数位和 题目描述 数学家高斯很小的时候就天分过人.一次老师指定的算数题目是:1+2+-+100. 高斯立即做出答案:5050! 这次你的任务是类似的.但并非是把一个个的数字加起来,而是对该数字的每一个 ...