为什么在JavaScript数组迭代中使用“ for…in”循环是个坏主意?

在大多数情况下,通常最好使用' for '循环而不是“ for ... in ”循环,因为“ for ... in ”循环会产生索引 ,而不会打扰剩余的索引普通的“ for ”循环显示这些值,并且在剩余索引中将执行一个名为“ undefined”的值,以便开发人员在编写代码时不会感到困惑。

语法1

for (var x in array) {
//代码
};

上面的代码是“ for ... in ”循环的语法。

语法2

for () {
//代码
};

上面是普通的“ for ”循环的语法。

示例1

在下面的示例中,最初,数组“ num ”只有5位数字(索引从0-4)。当将远离索引“ 4” 的另一个索引7添加到数组中时,连续执行了索引,而没有通知有关剩余索引(5和6)的任何信息。普通的“ for ”循环不是这种情况。这可能会使开发人员感到困惑。 

<html>
<body>
<script>
   var num = [1,2,3,4,5];
   num[7] = 7;
   for (var x in num) {
      document.write(x);
      document.write("</br>");
   }
</script>
</body>
</html>

输出结果

0
1
2
3
4
7


示例2

在下面的示例中,与“ for ... in ”循环不同,在常规“ for ”循环中,显示值而不是索引,并且在剩余索引中执行undefined 值,以免使开发人员感到困惑。

<html>
<body>
<script>
   var num = [1,2,3,4,5];
   num[7] = 7;
   for (var i = 0; i < num.length; i++) {
      document.write(num[i]);
      document.write("</br>");
   }
</script>
</body>
</html>

输出结果

1
2
3
4
5
undefined
undefined
7