• Object.keys与for in遍历的区别


    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]
    }
     
     
     
     
     
  • 相关阅读:
    BZOJ4066 简单题(KD-Tree)
    [HAOI2006]受欢迎的牛 tarjan缩点 + 拓扑排序
    [JSOI2007]重要的城市 floyd:最短路计数
    [SDOI2017]新生舞会 0/1分数规划
    [APIO2017]商旅 0/1分数规划
    [HNOI2009]最小圈
    算法——0/1分数规划
    运动员最佳匹配问题 KM算法:带权二分图匹配
    [NOI2015]荷马史诗
    [HAOI2010]计数 数位DP+组合数
  • 原文地址:https://www.cnblogs.com/zuobaiquan01/p/16403557.html
Copyright © 2020-2023  润新知