JS數組遍歷的幾種方法

一、使用for循環遍曆數組

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

使用for循環遍曆數組是最基本的方法。通過設置循環的初始值和循環條件來遍曆數組中的元素。每次循環，我們都會訪問下一個元素。

for循環還可以倒序遍曆數組。這是因為我們只需要修改循環的初始值和循環條件，使它們反向即可。

for (let i = arr.length - 1; i >= 0; i--) {
  console.log(arr[i]);
}

二、使用forEach遍曆數組

const arr = [1, 2, 3, 4];
arr.forEach(function(item) {
  console.log(item);
});

forEach方法是一個數組的函數方法，它將數組中的每個元素傳遞給回調函數，並依次執行回調函數。它在每個元素上運行回調函數，但它不返回新數組。回調函數的參數包括元素的值、元素的索引和數組本身。

和for循環不同，forEach方法不能跳過或者停止循環，但它在代碼可讀性上卻非常友好。

三、使用map遍曆數組並返回新數組

const arr = [1, 2, 3, 4];
const newArray = arr.map(function(item) {
  return item * 2;
});
console.log(newArray);

和forEach方法類似，map方法也是一個數組的函數方法。它將元素傳遞給回調函數，允許我們修改元素值，最後返回一個新的數組。

map方法最有用處的地方在於不改變原數組。如果需要對原數組進行改變，使用數組的forEach方法或者for循環會更合適。

四、使用for-in遍曆數組

const arr = [1, 2, 3, 4];
for (let index in arr) {
  console.log(arr[index]);
}

for-in循環通常用於枚舉對象。但是它也可以枚舉數組，它會枚舉數組元素和屬性（包括非數字屬性）。如果只是想遍曆數組，for-in循環並不是最好的選擇。

五、使用for-of遍曆數組

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

for-of循環是ES6引入的，它是一種用於遍歷可迭代對象的循環，包括數組、字符串、Set和Map等。for-of循環提供了一種更簡潔、更簡單的語法來遍曆數組。

六、使用while循環遍曆數組

const arr = [1, 2, 3, 4];
let i = 0;
while (i < arr.length) {
  console.log(arr[i]);
  i++;
}

while循環和for循環一樣，也可以用於遍曆數組。只要設置好退出循環的條件，使用while循環遍曆數組同樣可行。

七、遍歷字符串並轉換為數組

const str = 'hello world';
const arr = str.split('');
for (let item of arr) {
  console.log(item.toUpperCase());
}

當需要遍歷字符串時，我們可以使用JavaScript的split()方法將它轉換為數組，然後使用for-of循環來遍歷每一個單獨的字符。在這個示例中，我們把字符串中的所有字符轉換為大寫的形式。

八、使用Array.from()將類數組轉換為數組並遍歷

const obj = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3
};
const arr = Array.from(obj);
for (let item of arr) {
  console.log(item);
}

有些時候，我們需要遍歷類數組。雖然類數組不是真正的JavaScript數組形式，但是可以使用Array.from()方法將它轉換為真正的JavaScript數組。

九、使用reduce()方法遍曆數組並計算元素總和

const arr = [1, 2, 3, 4];
const sum = arr.reduce(function(prev, curr) {
  return prev + curr;
}, 0);
console.log(sum);

reduce()方法也是一個數組的函數方法。它接收一個回調函數，其中前一個元素的結果會傳遞到下一個元素中。一旦處理完所有元素，reduce()方法將返回一個結果。

在這個示例中，我們使用reduce()方法計算了數組中所有元素的總和。在回調函數中，prev代表前一個元素的結果，而curr代表當前的元素。

十、ES6的解構賦值和剩餘運算符遍曆數組

const arr = ['a', 'b', 'c', 'd'];
const [first, second, ...others] = arr;
console.log(first, second, others);

ES6的解構賦值和剩餘運算符可以幫助我們更容易地遍歷和操作數組。

在這個示例中，我們使用解構賦值從數組中提取了前兩個元素，並使用了剩餘運算符將剩下的元素存入了一個新數組中。

十一、使用for-await-of循環遍歷異步生成器生成的數組

async function* generateArr() {
  yield 'a';
  yield 'b';
  yield 'c';
  yield 'd';
}

(async () => {
  for await (let item of generateArr()) {
    console.log(item);
  }
})();

異步生成器是ES2018中引入的新特性之一。在這個示例中，我們創建了一個異步生成器來生成一個數組，然後使用for-await-of循環來遍歷這個數組。

在遍歷異步生成器生成的數組時，我們使用了(async () => {})()自執行函數，以便在程序中使用async/await語法。