在開發(fā)過程中，經(jīng)常需要對 API 返回的數(shù)據(jù)進行處理，例如從對象數(shù)組中提取某些字段，并將它們組成新的數(shù)組。這里我們將介紹如何通過 JavaScript 的 map 和 reduce 方法來完成這一需求，并深入比較這兩者的用法與適用場景。

需求：提取 id 字段組成新數(shù)組

假設(shè)我們有如下數(shù)據(jù)結(jié)構(gòu)：

const res = {data: [{ id: 1, name: 'Alice' },{ id: 2, name: 'Bob' },{ id: 3, name: 'Charlie' }]
}

我們的目標(biāo)是從 res.data 中提取每個對象的 id 字段，將它們組成一個新的數(shù)組，最終得到結(jié)果：

[1, 2, 3]

使用 map 實現(xiàn)需求

map 方法用于遍歷數(shù)組中的每個元素，并對每個元素執(zhí)行相同的操作，生成一個新數(shù)組。它的典型應(yīng)用場景是逐個處理元素，創(chuàng)建新數(shù)組。

代碼示例

const ids = res.data.map(item => item.id)
console.log(ids) // 輸出: [1, 2, 3]

解析

1. map 方法會遍歷 res.data 中的每個對象。
2. 每次遍歷時，item => item.id 會將對象的 id 提取出來，形成一個包含 id 的新數(shù)組。

優(yōu)點

• 簡潔明了，代碼可讀性高。
• 專為創(chuàng)建新數(shù)組而設(shè)計，適用于提取、格式化或轉(zhuǎn)換數(shù)組的場景。

使用 reduce 實現(xiàn)需求

reduce 方法用于對數(shù)組執(zhí)行累積操作，它可以生成一個最終的單一值（可以是數(shù)組、對象等）。它常用于聚合數(shù)據(jù)或進行復(fù)雜的數(shù)據(jù)處理。

代碼示例

const ids = res.data.reduce((accumulator, item) => {accumulator.push(item.id) // 將id推入累積數(shù)組return accumulator         // 返回更新后的累積數(shù)組
}, []) // 初始化累積值為空數(shù)組 []console.log(ids) // 輸出: [1, 2, 3]

解析

1. reduce 初始化一個空數(shù)組 [] 作為 accumulator 的初始值。
2. 在每次遍歷中，將當(dāng)前元素的 id 推入到 accumulator 數(shù)組中。
3. 最終 reduce 返回的 accumulator 數(shù)組即為目標(biāo)數(shù)組 [1, 2, 3]。

優(yōu)點

• 靈活性高，支持更復(fù)雜的聚合操作。
• 適用于需要累計或合并數(shù)據(jù)的情況。