過去十年 JavaScript 在不斷進(jìn)化，新的數(shù)組方法不僅能讓我們的代碼更簡(jiǎn)潔易讀的代碼，還能幫我們避免一系列常見錯(cuò)誤。

一、for 循環(huán)的問題

讓我們先來(lái)看看一個(gè)經(jīng)典的 for 循環(huán)場(chǎng)景，將一個(gè)數(shù)組中的每個(gè)數(shù)字翻倍：

const numbers = [1, 2, 3, 4, 5];
const doubled = [];

for (let i = 0; i < numbers.length; i++) {
  doubled.push(numbers[i] * 2);
}
console.log(doubled); // [2, 4, 6, 8, 10]

代碼不僅冗余，讀起來(lái)也像在描述過程，意圖不清晰。

二、聲明式與函數(shù)式

JavaScript 為我們提供了很多優(yōu)秀的數(shù)組遍歷方法。

1. 遍歷執(zhí)行：forEach

forEach 是 for 循環(huán)最直接的替代品，用于對(duì)數(shù)組中的每個(gè)元素執(zhí)行一次操作，但它不返回新的數(shù)組。

場(chǎng)景：打印數(shù)組中的每一項(xiàng)

沒有了索引 i 的管理，代碼更干凈，意圖也更明確。

2. 數(shù)據(jù)轉(zhuǎn)換：map

map 是最常用的數(shù)組方法之一。它會(huì)遍歷數(shù)組中的每個(gè)元素，用一個(gè)函數(shù)對(duì)它進(jìn)行處理，然后返回一個(gè)包含所有處理結(jié)果的新數(shù)組。

// 舊方法 (`for`) (見上文)
// 新形態(tài) (`map`)
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(number => number * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

一行代碼就完成了 for 循環(huán)五六行代碼的工作，而且 map 不會(huì)修改原數(shù)組 numbers，有效避免了副作用。

3. 數(shù)據(jù)篩選：filter

filter 方法會(huì)創(chuàng)建一個(gè)新數(shù)組，其中包含所有通過了由提供的函數(shù)實(shí)現(xiàn)的測(cè)試的元素。

場(chǎng)景：從一個(gè)班級(jí)里篩選出所有成績(jī)及格的學(xué)生

filter 這個(gè)詞本身就完美地描述了它的功能，核心邏輯 student.score >= 60 非常突出，沒有被循環(huán)的模板代碼所淹沒。

4. 數(shù)據(jù)聚合：reduce

reduce 是功能強(qiáng)大的數(shù)組方法，可以將一個(gè)數(shù)組轉(zhuǎn)化為單一值（可以是數(shù)字、字符串、對(duì)象，甚至是另一個(gè)數(shù)組）。

場(chǎng)景：計(jì)算數(shù)組中所有數(shù)字的總和

// 舊方法 (`for`)
const numbers = [1, 2, 3, 4, 5];
let sum = 0;
for (let i = 0; i < numbers.length; i++) {
  sum += numbers[i];
}
// 新形態(tài) (`reduce`)
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);

三、鏈?zhǔn)秸{(diào)用

現(xiàn)代數(shù)組方法的真正威力在于它們的組合性，map 和 filter 都返回新數(shù)組，所以我們可以將它們像鏈條一樣串聯(lián)起來(lái)。

const totalValue = numbers
  .filter(number => number > 3) 
  .map(number => number * 2)
  .reduce((total, value) => total + value, 0);

從 for 循環(huán)到 map/filter/reduce 的轉(zhuǎn)變，其背后是推動(dòng)我們從關(guān)注“如何做”的命令式思維，轉(zhuǎn)向關(guān)注“做什么”的聲明式思維。