資料結構
網路
關係型資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學為什麼在 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>
190 次瀏覽
