JavaScript 遍歷陣列

1. 在 JavaScript 中使用 for 迴圈來迴圈遍歷陣列
2. 在 JavaScript 中使用 while 迴圈來迴圈遍歷陣列
3. 在 JavaScript 中使用 do...while 迴圈迴圈遍歷陣列
4. 在 JavaScript 中使用 forEach 迴圈迴圈遍歷陣列
5. 在 JavaScript 中使用 for...of 遍歷陣列
6. 在 JavaScript 中使用 for...in 遍歷陣列
7. 在 JavaScript 中使用 map 方法遍歷陣列
8. 在 JavaScript 中使用 reduce 方法遍歷陣列
9. 在 JavaScript 中使用 filter 方法遍歷陣列
10. 在 JavaScript 中使用 some 遍歷陣列
11. 在 JavaScript 中使用 every 遍歷的陣列

本教程說明了如何遍歷 JavaScript 中的陣列。我們可以使用 Vanilla JavaScript 中的傳統方法（例如 for 迴圈和 while 迴圈）或使用 ES5，ES6 引入的較新方法（例如 forEach、for ... of、for ... in）來執行此操作以及許多其他方法，具體取決於我們的用例和程式碼的速度/效率。

在 JavaScript 中使用 for 迴圈來迴圈遍歷陣列

傳統的 for 迴圈類似於其他語言（例如 C++，Java 等）中的 for 迴圈。它包含 3 個部分：

1. 變數/迭代器的初始化在執行 for 迴圈之前執行。
2. 每次執行迴圈之前要檢查的條件。
3. 迴圈執行後每次執行的步驟。

const arr = [1,2,3,4,5,6];
var length = arr.length;
for (var i = 0; i < length; i++) {
    console.log(arr[i]);  
}

輸出：

1
2
3
4
5
6

我們使用迭代器 i，並使用 for 迴圈遍歷陣列，該迴圈在每次迭代後將 i 增加 1，並將其移動到 next 元素。

在 JavaScript 中使用 while 迴圈來迴圈遍歷陣列

while 迴圈非常簡單，因為它具有在每次迭代後都要檢查的條件，除非滿足該條件，否則它將繼續執行。

const arr = [1,2,3,4,5,6];
var length = arr.length;
let i=0;

while(i<length){
    console.log(arr[i]);
    i++;
}

像 for 迴圈一樣，我們採用迭代器 i 並將其增加直到陣列的長度遍歷所有元素。

在 JavaScript 中使用 do...while 迴圈迴圈遍歷陣列

do...while 迴圈與 while 迴圈相同，不同之處在於即使迴圈條件為 false，它也至少執行一次。因此，在編寫此迴圈時我們必須小心。

const arr = [1,2,3,4,5,6];
var length = arr.length;
var i = 0;

do {
    console.log(arr[i]);
    i++;
}
while (i < length);

在 JavaScript 中使用 forEach 迴圈迴圈遍歷陣列

ES5 引入了 forEach 作為迭代陣列的新方法。forEach 接受一個函式作為引數，併為陣列記憶體在的每個元素呼叫它。

const arr = [ 1, 2, 3, 4, 5, 6 ]; 
arr.forEach(item => console.log(item)); 

在這裡，我們編寫了一個箭頭函式，以列印出傳遞給該函式的引數，並將該函式賦予 forEach 以遍歷陣列並列印該元素。

在 JavaScript 中使用 for...of 遍歷陣列

ES6 引入了可迭代物件的概念，並提供了 for ... of，可用於迭代 Array 物件。

let arr = [1,2,3,4,5,6];
for (const item of arr){
    console.log(item);
}

我們將其用作常規迴圈，但可以輕鬆地迭代各種各樣的物件，而不僅僅是陣列。

在 JavaScript 中使用 for...in 遍歷陣列

我們可以使用 for ... in 來迭代陣列，但是不建議這樣做，因為它會列舉物件的屬性。它甚至列舉了陣列元素之外的附加到 Array.prototype 的方法。

var arr = [1, 2, 3, 4, 5, 6];

for (var i in arr) {
    console.log(arr[i]);
}

在 JavaScript 中使用 map 方法遍歷陣列

map 方法遍歷陣列，在每個元素上使用回撥函式，然後返回一個新陣列，即，它接受輸入陣列並將其對映到新陣列，並由回撥函式執行計算。

arr = [ 1, 2, 3, 4, 5, 6 ]; 
const square = (x) => {
    return Math.pow(x, 2);
}
mapped = arr.map(square); 
console.log(arr); 
console.log(mapped);

在這裡，我們遍歷了輸入陣列，並形成了一個在陣列內部具有元素正方形的陣列。

在 JavaScript 中使用 reduce 方法遍歷陣列

reduce 方法在陣列上迴圈並呼叫 reducer 函式，以通過累加器函式儲存陣列計算的值。累加器是在所有迭代中都記住的變數，用於儲存遍歷陣列的累加結果。

const arr = [1, 2, 3, 4];
const reducer = (accumulator, curr) => accumulator + curr;
console.log(arr.reduce(reducer));

在這裡，我們遍歷陣列並求和一個累加器中的所有元素。

在 JavaScript 中使用 filter 方法遍歷陣列

filter 方法迴圈遍歷陣列並濾除滿足特定給定條件的元素。

const fruits = ['apple', 'orange', 'pomegranete', 'banana', 'pear', 'blueberry'];
const result = fruits.filter(word => word.length > 6);
console.log(result);

在這裡，我們遍歷陣列，檢查給定的水果名稱的長度是否大於 6。如果是，則將其包含在結果陣列中，即，我們過濾掉所需的元素。

在 JavaScript 中使用 some 遍歷陣列

它用於遍歷陣列並檢查陣列中存在的至少一個元素是否滿足給定條件。

array = [ 1, 2, 3, 4, 5, 6 ]; 
const under_three = x => x < 3; 
console.log(array.some(under_three));

在這裡，我們使用 some 來檢查陣列中是否存在小於 3 的元素。它返回布林值 true 或 false。

在 JavaScript 中使用 every 遍歷的陣列

它用於遍歷陣列，並檢查陣列內的所有元素是否滿足給定條件。

array = [ 1, 2, 3, 4, 5, 6 ]; 
const under_three = x => x < 3; 
console.log(array.every(under_three));

在這裡，我們使用 every 來檢查陣列中存在的所有元素是否小於 3。它返回布林值 true 或 false。