zoukankan      html  css  js  c++  java
  • JavaScript中for..in循环陷阱

      好久没有blog了,要不是今晚被一个小小的难题困住了,我是要继续懈怠下去的。这个小小的问题就是:从一个数组中的每一个元素都取出同一个属性,然后把这些属性加在一起。数组的每个元素的类型相同,包含多个属性,区别在于属性的取值不同。

      一开始,采取for in方法来迭代数组:

    //假设被迭代的数组为items = [{a:'10',b:'11',c:'12'},{a:'20',b:'21',c:'22'}]
    var count;
    for( item in items) {
          count += item['a'];      
    }
    

      结果发现count不是我想要的10+20。而是NaN。尝试item.a来取a属性的值,结果都一样。最后没有办法了,唯有逐个log出每个item的a属性的取值,发型无论是item['a']抑或item.a,输出都是 undefined。只得借助网上力量。原来javascript的for in和java的for in有天渊之别。

    javascript提供了一种特殊的循环(也就是for .. in循环),用来迭代对象的属性或数组的每个元素,for...in循环中的循环计数器是字符串,而不是数字。它包含当前属性的名称或当前数组元素的索引。 
    案例一: 

    //使用for..in循环遍历对象属性 
    var person={ 
    name: "Admin", 
    age: 21, 
    address:"shandong" 
    }; 
    for(var i in person){ 
    console.log(i); 
    } 
    
    //输出
    name 
    age 
    address 
    

      当遍历一个对象的时候,变量 i 也就是循环计数器 为 对象的属性名:

    var array = ["admin","manager","db"] 
    for(var i in array){ 
    console.log(i); 
    } 
    //输出
    0 
    1 
    2 
    

      无论如何,被遍历的都不是对象本身,不是索引就是属性。

      不过,for in还不止这么简单呢,请看案例2:

    var array =["admin","manager","db"]; 
    //给Array的原型添加一个name属性 
    Array.prototype.name= "zhangsan"; 
    for(var i in array){ 
    console.log(array[i]); 
    } 
    
    //输出
    admin 
    manager 
    db 
    zhangsan 
    

      看到没,竟然连原型的属性也被输出了。如果使用常规的for循环进行,又是如何:

    var array = ["admin","manager","db"]; 
    //给Array的原型添加一个name属性 
    Array.prototype.name = "zhangsan"; 
    for(var i =0 ; i<array.length; i++){ 
    console.log(array[i]); 
    }; 
    
    运行结果: 
    admin 
    manager 
    db 
    

      这种情况下,原型的属性没有被输出。

      原来for..in循环会把某个类型的原型(prototype)中方法与属性给遍历出来,所以这可能会导致代码中出现意外的错误。为了避免这个问题,我们可以使用对象的hasOwnProperty()方法来避免这个问题,如果对象的属性或方法是非继承的,那么hasOwnProperty() 方法返回true。即这里的检查不涉及从其他对象继承的属性和方法,只会检查在特定对象自身中直接创建的属性。

    var array = ["admin","manager","db"]; 
    Array.prototype.name= "zhangshan"; 
    for(var i in array){ 
    //如果不是该对象自身直接创建的属性(也就是该属//性是原型中的属性),则跳过显示 
    if(!array.hasOwnProperty(i)){ 
    continue; 
    } 
    console.log(array[i]); 
    } 

    运行结果: 
    admin 
    manager 
    db 

      借助hasOwnProperty方法,就能避免遍历到继承过来的方法及属性了。话说回来,既然如此麻烦,如果只是单纯遍历数组元素,还是常规的for+i来得直接有效。

      最后,顺便记下javascript的字符型到整形的转换方法:parseInt

    不闻不若闻之,闻之不若见之,见之不若知之,知之不若行之
  • 相关阅读:
    webpack 配置缓存
    Python-----多线程threading用法
    LINUX 编程定位工具gstack,pstack
    数据库session立即生效(64---8192) SCOPE参数
    shell中wait命令详解
    Go语言学习笔记
    使用go语言数据库
    Oracle数据库管理----性能优化
    数据库索引实例
    Linux串口设置及编程(转)
  • 原文地址:https://www.cnblogs.com/lauyu/p/4181472.html
Copyright © 2011-2022 走看看