求指点，为什么注释里运行的结果会多alert两次undefined？

Question

var Ele = document.getElementsByTagName("iframe");/* 	for(var i in Ele){
	alert(Ele[i].src);
	}  */
	for(var i=0;i<Ele.length;i++){
	alert(Ele[i].src);
	}

Answer 1

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

Answer 2

首先两次undefined的根本原因在于用for in遍历时，遍历到了两个不存在src属性的属性。举个例子：<div&nbsp;class="div1"></div> <div&nbsp;class="div2"></div>var&nbsp;divs&nbsp;=&nbsp;document.getElementsByTagName('div');console.dir(divs)我们可以得到：NodeList[2] 0:&nbsp;HTMLDivElement 1:&nbsp;HTMLDivElement length:&nbsp;2 __proto__:&nbsp;NodeList constructor:&nbsp;function&nbsp;NodeList()&nbsp;{&nbsp;[native&nbsp;code]&nbsp;} item:&nbsp;function&nbsp;item()&nbsp;{&nbsp;[native&nbsp;code]&nbsp;} __proto__:&nbsp;Object上面的 divs 是一个NodeList 对象，也是一个伪数组。即本质上是对象但也有数组的一些特性，比如有length属性，可以用索引遍历但没有数组的push,shift等函数。而 NodeList 对象有两个属性：length：返回节点列表中的节点数目item()：返回节点列表中处于指定的索引号的节点。for in遍历时遍历到了length,item()方法，因为没有上面的src属性，因此返回undefined。而for(var i=0,len=divs.length;i<len;i++)遍历只遍历了前面length个属性。最后，不要用for in来遍历数组，除非有意为之。