为什么在 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]，则 myArray[1]、myArray[3] 和 myArray[5] 的未定义值会被 for..in 循环忽略。
示例 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>
