Javascript數組遍歷詳解

一、for循環遍曆數組

const array = [1, 2, 3, 4, 5];

for (let i = 0; i < array.length; i++) {
  console.log(array[i]);
}

通過for循環遍曆數組，可以使用循環變數i來訪問數組中的每一個元素。這種遍歷方式是最基礎的也是最常用的一種方式。但是它需要手動維護循環變數，代碼的可讀性相對較差。

二、forEach遍曆數組

const array = [1, 2, 3, 4, 5];

array.forEach(function(element) {
  console.log(element);
});

forEach是數組原型上的一個方法，可以直接使用。它的參數是一個函數，用於遍曆數組中的每個元素。在函數內部，我們可以使用參數element來訪問當前的元素。這種方式相對於for循環，代碼更加簡潔，可讀性更好。

三、map遍曆數組

const array = [1, 2, 3, 4, 5];

const result = array.map(function(element) {
  return element * 2;
});

console.log(result);

map也是數組原型上的一個方法，它可以用來遍曆數組中的每個元素，並將元素通過回調函數的處理轉換成一個新的數組。在回調函數中，我們可以對元素進行任意的操作，比如本例中將每個元素乘以2。map返回的是一個新的數組，所以我們需要將其賦值給一個新的變數。map在開發中使用較多，可以快速生成新的數組。

四、filter遍曆數組

const array = [1, 2, 3, 4, 5];

const result = array.filter(function(element) {
  return element % 2 === 0;
});

console.log(result);

filter也是數組原型上的一個方法，它可以用來遍曆數組中的每個元素，並根據條件過濾出一個新的數組。在回調函數中，我們可以對元素進行條件判斷，如果返回true表示該元素符合條件，將被保留在新的數組中。在本例中，我們通過判斷元素是否為偶數，將符合條件的元素放入一個新的數組中，並最終返回該數組。

五、reduce遍曆數組

const array = [1, 2, 3, 4, 5];

const result = array.reduce(function(previousValue, currentValue) {
  return previousValue + currentValue;
}, 0);

console.log(result);

reduce是數組原型上的一個方法，它可以用來遍曆數組中的每個元素，並將元素通過回調函數的處理迭代成一個單獨的值。在回調函數中，我們可以對元素進行任意的操作，並將元素轉換成一個單值。reduce的第一個參數是回調函數，回調函數的第一個參數previousValue表示上一次迭代的結果，第二個參數currentValue表示當前迭代的元素。reduce的第二個參數是回調函數的初始值，如果沒有指定，將使用數組的第一個元素作為初始值。

六、for…in遍曆數組

const array = [1, 2, 3, 4, 5];

for (let index in array) {
  console.log(array[index]);
}

for…in語法可以用來遍歷對象中的屬性，但是在遍曆數組時，它會將元素的下標作為屬性來進行遍歷。雖然它可以達到遍曆數組的目的，但是不推薦使用，因為它的遍歷順序是不可預測的，並且可能會遍歷到一些非數字屬性。而且在使用ESLint規範代碼時，也會提示不要使用for…in來遍曆數組。