zoukankan      html  css  js  c++  java
  • 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]
    }
  • 相关阅读:
    Python的一些小技巧
    Python连接sqlite3数据库
    闭包和toString方法的使用
    webpack(10) webpack扩展(插件. loader)
    webpack(9) 配置文件
    webpack(8) plugin
    webpack(7) 样式处理和图片处理之手写loader
    webpack(6) loader
    webpack(5)入口和出口
    webpack(4)编译过程分析
  • 原文地址:https://www.cnblogs.com/mengfangui/p/9041705.html
Copyright © 2011-2022 走看看