for in 与 Object.keys 与 hasOwnProperty区别

Posted mengfangui

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了for in 与 Object.keys 与 hasOwnProperty区别相关的知识,希望对你有一定的参考价值。

1、结论

for in遍历对象所有可枚举属性 包括原型链上的属性

Object.keys遍历对象所有可枚举属性 不包括原型链上的属性

hasOwnProperty 检查对象是否包含属性名,无法检查原型链上是否具有此属性名

2、示例代码

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>for in 与 Object.keys 与 hasOwnProperty区别</title>
    </head>

    <body>
        <script type="text/javascript">
            var aa = [12, 34, 5];
            Array.prototype.add = function() {}
            for(let i in aa) {
                console.log(i);
                //输出0 1 2 add
            }
            console.log(--------------)
            console.log(Object.keys(aa));
            //输出0 1 2 
            
            console.log(aa.hasOwnProperty(add))
            //输出false
            console.log(aa.hasOwnProperty(0))
            //输出true
        </script>
    </body>

</html>

3、ESLINT对for in的限制

当你在某个对象上用 for in 语句遍历对象属性,而又忘了用 hasOwnProperty 判断属性来源的时候,你就会发现被你扩展的原型属性也会被遍历出来,这往往都不是我们想要的结果。

总的来说,操作中引入继承的属性会让问题复杂化,大多数时候,我们只关心对象自身的属性。所以,尽量不要用for...in循环,而用Object.keys()代替

ES2017 引入了跟Object.keys配套的Object.valuesObject.entries,作为遍历一个对象的补充手段,供for...of循环使用。

 

let {keys, values, entries} = Object;
let obj = { a: 1, b: 2, c: 3 };

for (let key of keys(obj)) {
  console.log(key); // ‘a‘, ‘b‘, ‘c‘
}

for (let value of values(obj)) {
  console.log(value); // 1, 2, 3
}

for (let [key, value] of entries(obj)) {
  console.log([key, value]); // [‘a‘, 1], [‘b‘, 2], [‘c‘, 3]
}

 

以上是关于for in 与 Object.keys 与 hasOwnProperty区别的主要内容,如果未能解决你的问题,请参考以下文章

for in 与 Object.keys 与 hasOwnProperty区别

for in,Object.keys()与for of的区别

for in,Object.keys()与for of的区别

for-in vs Object.keys forEach 没有继承属性

可枚举属性和不可枚举属性(for...in循环和Objec.keys()和Object.getOwnPropertyNames())

对象属性 Object.getOwnPropertyNames() Object.keys for...in