資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 JavaScript 中使用 for...in 語句遍歷陣列？
我們使用 JavaScript 的for...in語句來迴圈遍歷陣列或物件的列舉屬性。它是一種 for 迴圈的變體。與 JavaScript 中的其他迴圈結構不同，for...in 迴圈不必關心迭代次數。這是因為迭代大小是根據物件的列舉屬性或陣列中元素的數量固定的。
JavaScript 中的“for...in”語句
for...in 迴圈迭代物件的所有可列舉屬性。所有使用簡單賦值運算子或預設初始化程式分配的屬性都被視為可列舉屬性。
語法
for(var num in numbers){
// statement
}
這將建立一個變數num，它迭代陣列 numbers 中的所有元素。此 num 依次獲取儲存在 numbers 陣列中的元素的索引。
讓我們看一個 for...in 迴圈工作原理的示例。
示例 1
這裡我們將建立一個字串陣列，然後使用 for...in 迴圈遍歷它。讓我們看看相應的程式碼。
<!DOCTYPE html> <html> <body> <h3> for...in loop in JavaScript</h3> <div id="result"></div> <script> var arr = ["xyz", "abc", "pqr"]; var text = ""; for(var str in arr){ text += arr[str] + ","; } document.getElementById("result").innerHTML = text; </script> </body> </html>
在上面的程式碼中，str分別取值 0、1 和 2，用於檢索陣列的元素。
注意，但是索引順序依賴於實現。這意味著不能保證索引按正確的順序遍歷。由於這個原因，不建議將 for...in 迴圈用於陣列。應該使用其他迴圈結構，如傳統的 for 迴圈或 for...of 迴圈。
雖然 for...in 迴圈可以使用，但它更適合用於物件而不是陣列。這是因為迴圈變數依次獲取鍵的值，從而使物件的迭代變得非常容易。
語法
for(var num of numbers){
// statement
}
這將建立一個變數 num，它迭代陣列 numbers 中的所有元素。此 num 依次獲取儲存在 numbers 陣列中的元素的值。
以下是如何在 JavaScript 中使用 for...of 迴圈遍歷物件的示例。
示例 2
這裡我們將建立一個包含不同資料型別的元素陣列。我們將使用 for...of 迴圈遍歷該陣列。
<!DOCTYPE html> <html> <body> <h3> for...of loop in JavaScript</h3> <div id="result"></div> <script> var arr = ["Jane Doe", 2 , 59.57]; var text = "The elements of the array are <br><br>"; for(var ele of arr){ text += ele + "<br>"; } document.getElementById("result").innerHTML = text; </script> </body> </html>
在上面的程式碼中，正如輸出中可見的那樣，變數ele獲取陣列中存在的元素的值。
我們還可以使用Array.prototype.forEach()方法遍歷陣列。forEach() 的引數是一個函式，該函式將對陣列的所有元素執行。
語法
const arr = ["Jane Doe", 2, 59.57]
arr.forEach(function fun(ele){
// statement
}
注意，“prototype”被替換為陣列的名稱，在本例中為arr。函式 fun 具有一個引數 ele，它依次獲取儲存在陣列 arr 中的元素的值。
以下是如何在 JavaScript 中使用 forEach() 方法遍歷陣列的示例。
示例 3
這裡我們將建立一個包含不同資料型別的元素陣列。我們將使用 forEach() 方法遍歷該陣列。
讓我們看看相應的程式碼。
<!DOCTYPE html> <html> <body> <h3> forEach() method in javascript</h3> <div id="result"></div> <script> var arr = ["Jane Doe", 2 , 59.57]; var text = "The elements of the array are <br><br>"; arr.forEach(function fun(ele){ text += ele + "<br>"; }) document.getElementById("result").innerHTML = text; </script> </body> </html>
在上面的程式碼中，正如輸出中可見的那樣，變數ele獲取陣列中存在的元素的值。
結論
for...in、for...of 和 forEach() 結構透過提供傳統 for 迴圈的急需變體，使我們的生活更輕鬆。
173 次檢視
