首页 > 代码库 > JavaScript中for..in循环陷阱
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
JavaScript中for..in循环陷阱