<转>Object.keys与for in,Object.getOwnPropertyNames的区别

在实际开发中,我们有时需要知道对象的所有属性,js原生给我们提供了一个很好的方法:Object.keys,该方法返回一个数组,并且只能返回可以枚举属性和方法的名称

Object.getOwnPropertyNames():它会返回可枚举和不可枚举的属性和方法的名称。

Object.keys():它只会返回可枚举的属性和方法的名称。

但是都不能取到原型链上的属性名称。

for in可以取到原型链上的属性名称

这三个方法,都可以用来遍历对象,这非常有用,其中后两个都是es5中新增的方法。
本文会用到一些es5的对象知识,如果你不了解,可以看一下开头提到的文章,首先我们需要一个父对象。
var parent = Object.create(Object.prototype, {
a: {
value: 1,
writable: true,
enumerable: true,
configurable: true
}
});
parent继承自Object.prototype,有一个可枚举的属性a。下面我们在创建一个继承自parent的对象child。
var child = Object.create(parent, {
b: {
value: 2,
writable: true,
enumerable: true,
configurable: true
},
c: {
value: 3,
writable: true,
enumerable: false,
configurable: true
}
});
child有两个属性b和c,其中b为可枚举属性,c为不可枚举属性。
下面我们将用四种方法遍历child对象,来比较四种方法的不同。如下的代码代表程序的输出。
console.log('yanhaijing is God');
// > yanhaijing is God
注:⑤代表es5中新增的方法,你可能需要一款现代浏览器来访问。
for in
for in是es3中就存在,最早用来遍历对象(集合)的方法。
for (var key in child) {
console.log(key);
}
// > b
// > a
从输出可以看出,for in会输出自身以及原型链上可枚举的属性。
注意:不同的浏览器对for in属性输出的顺序可能不同。
如果仅想输出自身的属性可以借助 hasOwnProperty。可以过滤掉原型链上的属性。
for (var key in child) {
if (child.hasOwnProperty(key)) {
console.log(key);
}
}
// > b
上面的代码,仅输出了child自己的可枚举属性b,而没有输出原型parent中的属性。
Object.keys⑤
Object.keys是es5中新增的方法,用来获取对象自身可枚举的属性键。
console.log(Object.keys(child));
// > ["b"]
可以看出Object.keys的效果和for in+hasOwnProperty的效果是一样的。
Object.getOwnPropertyNames⑤
Object.getOwnPropertyNames也是es5中新增的方法,用来获取对象自身的全部属性名。
console.log(Object.getOwnPropertyNames(child));
// > ["b", "c"]
从输出可以看出其和Object.keys的区别。
总结
相信看完后,搞不清楚的同学应该明白了,在es3中,我们不能定义属性的枚举性,所以也不需要那么多方法,有了keys和getOwnPropertyNames后基本就用不到for in了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,810评论 19 139
  • 1.属性的简洁表示法 允许直接写入变量和函数 上面代码表明,ES6 允许在对象之中,直接写变量。这时,属性名为变量...
    雨飞飞雨阅读 4,850评论 0 3
  • 属性的简洁表示法 ES6允许直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁。 上面代码表明,ES6允...
    呼呼哥阅读 7,972评论 0 2
  • 官方中文版原文链接 感谢社区中各位的大力支持,译者再次奉上一点点福利:阿里云产品券,享受所有官网优惠,并抽取幸运大...
    HetfieldJoe阅读 7,391评论 9 22
  • 女儿,妈妈有好多话想跟你说,你知道吗,这五年以来你带给我们多少幸福和满足?从出生到现在你的每一个第一次都让我难以忘...
    悦欣悦己悦生活阅读 3,068评论 1 0

友情链接更多精彩内容