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

时间: 2024-10-02 23:05:57

JavaScript中for..in循环陷阱的相关文章

JavaScript中for..in循环陷阱介绍

for...in循环中的循环计数器是字符串,而不是数字它包含当前属性的名称或当前数组元素的索引,下面有个不错的示例大家可以参考下 大家都知道在JavaScript中提供了两种方式迭代对象: (1)for 循环: (2)for..in循环: 使用for循环进行迭代数组对象,想必大家都已经司空见惯了.但是,使用for.. in循环时,大家可要注意了,为什么这么说呢?大家听我娓娓道来.... javascript提供了一种特殊的循环(也就是for .. in循环),用来迭代对象的属性或数组的每个元素,

深入理解javascript中的事件循环event-loop

前面的话 本文将详细介绍javascript中的事件循环event-loop 线程 javascript是单线程的语言,也就是说,同一个时间只能做一件事.而这个单线程的特性,与它的用途有关,作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM.这决定了它只能是单线程,否则会带来很复杂的同步问题.比如,假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线程为准? 为了利用多核CPU的计算能力,HTML

深入了解 JavaScript 中的 for 循环

学习前端的同学注意了!!! 学习过程中遇到什么问题或者想获取学习资源的话,欢迎加入前端学习交流群,群号码:328058344   在ECMAScript5(简称 ES5)中,有三种 for 循环,分别是: 简单for循环 for-in forEach 在2015年6月份发布的ECMAScript6(简称 ES6)中,新增了一种循环,是: for-of 下面我们就来看看这 4 种 for 循环. 简单 for 循环 下面先来看看大家最常见的一种写法: const arr = [1, 2, 3];

JavaScript 中 for in 循环和数组的问题

本文由 伯乐在线 - ElvisKang 翻译,进林 校稿.未经许可,禁止转载!英文出处:adripofjavascript.com.欢迎加入翻译小组. JavaScript的for…in循环用于迭代访问对象中的可枚举(enumerable)属性: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 var tMinus = {     two: "Two",     one: "One",     zero: "Blast

JavaScript中的if循环语句

<html> <head>  <meta charset="UTF-8">  <title></title>  <script type="text/javascript">   /*    * 向页面中输出连续数字    */   //document.write(1);   var n=1;   document.write(n++ + "<br />"); 

Javascript中的For循环

在开发的过程中,遍历是一个经常遇到的.而for循环则是Javascript工具箱里一个好用的,也常用的工具.每个人的习惯不同,for循环的写法也不尽相同. 1.不写声明变量的写法: for(var i = 0;i<arr.length;i++){} 我们很多时候的写法使这种(做小白不堪回首的那些年),但这种写法,每次都会获取一下数组的长度,这会降低代码的效率. 2.写声明变量的写法: for(var i = 0,len = arr.length;i < len;i++){} 这样写只获取一次数

JavaScript基础Javascript中的循环

1.普通循环JavaScript中一般的循环写法是这样的: // sub-optimal loop for (var i = 0; i < myarray.length; i++) { // do something with myarray[i] } 这种写法的问题是,每循环一次,都需要从myarray对象中读取length属性,这对于JavaScript来说,可能会导致较大的性能问题.如果myarray是一些大型的对象,或是DOM对象更犹是如此,因为DOM对象的这些方法都是在执行时才进行查询

浅谈javascript中的For in语法

相信大家都使用过javascript中的for循环,主要用来遍历数组对象,方便执行重复操作,体现代码的重用性.但是,应为数组的索引一般是整 型的数字,当遇到JSON对象或者object对象时,就不能使用for循环遍历了,应当使用for in函数遍历对象,这里就谈谈个人对for in的理解. 首先,虽然叫For in语法但关键字还是用for,这个语法还可以用来遍历对象,拿到的是对象的属性名称,然后通过对象名[属性名称]就可以拿到对象.个人觉得,理解这个语法的本质,关键在于理解每次循环得到的到底是什

JavaScript的几种循环方式

JavaScript提供了许多通过LOOPS迭代的方法.本教程解释了现代JAVASCRIPT中各种各样的循环可能性 目录: for forEach do...while while for...in for...of for...in vs for...of 介绍 JavaScript提供了许多迭代循环的方法.本教程通过一个小例子和主要属性解释每一个. for const list = ['a', 'b', 'c'] for (let i = 0; i < list.length; i++) {