详解forin，Object.keys和Object.getOwnPropertyNames的区别
以前笔者一直搞不太清楚三者之间的区别，最近再看这块的内容，顺便理清一下思路。
本文将用一个例子说明三者之间的区别，如果你还不知道这些方法，那么不放看一下这篇文章。
前言
这三个方法，都可以用来遍历对象，这非常有用，其中后两个都是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了。
如果你想在老旧浏览器中也是用这些方法，那试试 es5shim 吧。
正文到此结束
热门推荐
相关文章
近期评论
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
搞个gitee的项目
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
