資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
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 次
