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

在编程语言中，能够重复执行一系列指令或函数，直到某个条件不再满足，这被称为循环。

for-in 语句用于迭代对象的属性。此语句将沿原型链向上移动并显示所有继承的属性，这通常是不可取的。

在迭代数组元素时，有几个原因说明你不应该使用 for..in。

  • 例如，如果有人修改了 Array.prototype，这在旨在与其他脚本良好协作的代码中绝对是不好的做法，for..in 将循环遍历数组对象的所有自身和继承属性（非 DontEnum 属性）。此外，这些属性将被迭代；你可以通过选择 hasOwnProperty() 来忽略继承的属性，但这对于在数组对象本身中设置的属性不起作用。

  • 不能保证 for..in 会保持元素顺序。

  • 它花费很长时间，因为你必须遍历数组对象及其整个原型链的每个属性才能获得属性的值；相反，你将只获得该属性的名称。

语法

Array.prototype.myCustomProp = "Hello World";

JavaScript 中 for..in 循环的缺点

如果你使用原型向对象或数组添加属性，并且在迭代数组 x 时向任何其他与该属性无关的数组 arr 添加该属性，你将获得此属性。

示例 1

在这个例子中，让我们了解你通过添加 myCustomProp 属性来修改 Array.prototype。接下来，创建一个名为 myArray 的数组，赋予它一个值，然后遍历 for 循环。

<!DOCTYPE html>
<html>
<title>Why is using “for…in” loop in JavaScript array iteration a bad idea - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <script>

      // written to add property using myCustomProp
      Array.prototype.myCustomProp = "Visit Tutorialspoint!";
      let myArray = [1, 2, 3, 4, 5, 6];

      // written to iterate using for..in loop
      for (var index in myArray) {
         document.write(myArray[index] +'<br>');
      }
   </script>
</body>
</html>

示例 2

在这个例子中，让我们了解如何通过使用 hasOwnProperty() 方法来解决这个问题。

<!DOCTYPE html>
<html>
<title>Why is using “for…in” loop in JavaScript array iteration a bad idea - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <script>

      // written to add property using myCustomProp
      Array.prototype.myCustomProp = "Visit Tutorialspoint!";
      let myArray = [1, 2, 3, 4, 5, 6];

      // written to iterate using for..in loop
      for (var index in myArray) {

         // written to check the myArray has the item in it or not
         if (myArray.hasOwnProperty(index)) {
            document.write(myArray[index]);
         }
      }
   </script>
</body>
</html>

for..in 循环忽略数组的未定义值。例如，如果你生成了空数组 myArray 并向 myArray[0]、myArray[2] 和 myArray[4] 添加了一些项，则 for..in 循环会忽略 myArray[1]、myArray[3] 和 myArray[5] 的未定义值。

示例 3

在这个例子中，让我们了解 for..in 循环如何忽略数组的未定义值。

<!DOCTYPE html>
<html>
<title>Why is using “for…in” loop in JavaScript array iteration a bad idea - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
  <script>
      let myArray = [];
      myArray[0] = "Bajaj";
      myArray[2] = "Honda";
      myArray[4] = "Suzuki";
      document.write("Used for loop" +">br>");
      for (let i = 0; i < myArray.length; i++) {

         // "Bajaj", undefined, Honda, "undefined", "Suzuki"
         document.write(myArray[i] +">br>");
      }
      document.write(">br>",">br>", "Used for..in loop" +">br>");
      for (let index in myArray) {
         
         // "Bajaj", "Honda", "Suzuki"
         document.write(myArray[index] +">br>");
      }
   </script>
</body>
</html>

示例 4

在这个例子中，让我们了解 for..in 循环如何忽略所有未定义的值，而基本的 for 循环打印数组的每个条目，包括未定义的值。当未定义的值明确包含在数组中时，for..in 循环不会忽略这些未定义的值，但这仅适用于其值为未定义的数组。

<!DOCTYPE html>
<html>
<title>Why is using “for…in” loop in JavaScript array iteration a bad idea - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <script>
      let myArray = [undefined, undefined, undefined, "Welcome to tutorialspoint!"];
      for (let index in myArray) {
         document.write(myArray[index] +"<br>");
      }
   </script>
</body>
</html>

更新于：2022年8月24日

190 次浏览

启动您的 职业生涯

完成课程获得认证

开始学习
广告