在使用javascript过程中,想循环遍历一个数组,经常使用的语法有两种:
for (var i; i statement; } for (var i in array) { statement; }
这两种用法看起来能做同样的事情,但实际上两个循环的循环次数一般是不一样的。
源码如下:
<script><BR> window.onload = function() {<BR> var obutton = document.getElementsByTagName("button")[0];<BR> var outer = document.getElementById("outer");<BR> var outerDiv = outer.getElementsByTagName("div");<BR> obutton.onclick = function() {<BR> for(var p in outerDiv) outerDiv[p].style.background = "red";<BR> };<BR> };<br><br> </script>
点击变红色
这段代码用了 for - in 语句做循环,看上去没有问题。 可是在浏览器调试的时候,会报错: "Uncaught TypeError: Cannot set property 'background' of undefined" 为什么会这样呢? 如果我们把 stament 的内容改一下,就会发现问题了: for(var p in outerDiv) alert(p); 结果输出是:0 1 2 length item 所以,当 property 取到 length 和 item 时,再试图用调用 style 方法,当然就 undefined 了。 修改如下:
<script><BR> window.onload = function() {<BR> var obutton = document.getElementsByTagName("button")[0];<BR> var outer = document.getElementById("outer");<BR> var outerDiv = outer.getElementsByTagName("div");<BR> obutton.onclick = function() {<BR> for (var i = 0; i < outerDiv.length; i++){<BR> outerDiv[i].style.background = "red";<BR> }<BR> };<BR> };<br><br> </script>
点击变红色