js foreach比for多出两个undefined

Question

varEle=document.getElementsByTagName("iframe");
/*	for(variinEle){
	alert(Ele[i].src);
	}*/
	for(vari=0;i	alert(Ele[i].src);
	}注释里运行的结果会多alert两次undefined，为什么呢

Answer 1

foreach是取一个对象上的所有属性，而非遍历数组，例如如下代码：varprop,obj={a:"a",b:"b"};obj[0]="c";for(propinobj){console.log(prop+"="+obj[prop]);}输出是类似：0=c,a=a,b=b楼主的foreach实际遍历的是一个NodeList对象而非纯数组，此对象上有一个item方法和一个length属性（由W3CDOMSpec-InterfaceNodeList定义），在代码循环中追加log可以看出：varEle=document.getElementsByTagName("iframe");for(variinEle){console.log(i+"="+Ele[i]);}输出应该是类似：0=xxx,1=xxx...length=?,item=function(){...}，后面两个一个是int一个是function，src属性自然为空最后建议遍历数组还是尽量用for，foreach有风险

Answer 2

首先两次undefined的根本原因在于用forin遍历时，遍历到了两个不存在src属性的属性。举个例子：​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​vardivs=document.getElementsByTagName('div');console.dir(divs)我们可以得到：NodeList[2] 0:HTMLDivElement 1:HTMLDivElement length:2 __proto__:NodeList constructor:functionNodeList(){[nativecode]} item:functionitem(){[nativecode]} __proto__:Object上面的divs是一个NodeList对象，也是一个伪数组。即本质上是对象但也有数组的一些特性，比如有length属性，可以用索引遍历但没有数组的push,shift等函数。而NodeList对象有两个属性：length：返回节点列表中的节点数目item()：返回节点列表中处于指定的索引号的节点。forin遍历时遍历到了length,item()方法，因为没有上面的src属性，因此返回undefined。而for(vari=0,len=divs.length;i