還是大劍師蘭特：曾是美國某知名大學計算機專業(yè)研究生，現(xiàn)為航空航海領域高級前端工程師；CSDN知名博主，GIS領域優(yōu)質創(chuàng)作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技術開發(fā)，歡迎加底部微信（gis-dajianshi），一起交流。

reduce() 函數是 ECMAScript 6 (ES6) 中數組的一個迭代方法，它接收一個回調函數作為累加器（accumulator），對該數組的所有元素（從左到右）執(zhí)行操作，最后將計算結果累積為單一輸出值。

一、定義與語法

arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

• callback：必需，是一個函數，它接受四個參數：

  • accumulator（累計器）：累計回調的返回值，也是上一次調用回調時返回的值，或者是 initialValue。
  • currentValue（當前值）：數組中當前正在處理的元素。
  • index（可選）：當前元素在數組中的索引（從0開始或從initialValue指定的位置開始）。
  • array（可選）：調用 reduce 方法的原數組。

• initialValue（可選）：傳遞給 reduce 的初始值。如果不提供此值，那么 reduce 會從數組的第二個元素開始執(zhí)行，并使用第一個元素作為 accumulator 的初始值。

二、示例代碼：

1. 數組求和：

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

// 不提供初始值的情況
const sumWithoutInitialValue = numbers.reduce((acc, current) => acc + current);
console.log(sumWithoutInitialValue); // 輸出：15

// 提供初始值的情況
const sumWithInitialValue = numbers.reduce((acc, current) => acc + current, 0);
console.log(sumWithInitialValue); // 輸出：15

2. 數組扁平化：

const nestedArrays = [[1, 2], [3, 4], [5, 6]];

const flattenedArray = nestedArrays.reduce((acc, current) => [...acc, ...current], []);
console.log(flattenedArray); // 輸出：[1, 2, 3, 4, 5, 6]

3. 計算對象數組中某個屬性的總和：

const products = [
  { id: 1, price: 10 },
  { id: 2, price: 20 },
  { id: 3, price: 30 },
];

const totalPrice = products.reduce((total, product) => total + product.price, 0);
console.log(totalPrice); // 輸出：60

三、應用場景

reduce方法是 JavaScript 中的一個高階函數，以下是一些實際項目中使用reduce方法的場景：文章來源地址http://www.zghlxwxcb.cn/news/detail-850406.html

• 數組求和：對一個數組中的所有元素進行求和。
• 數組求平均值：對一個數組中的所有元素進行求平均值。
• 數組元素的去重：對一個數組中的所有元素進行去重。
• 統(tǒng)計數組中每個元素出現(xiàn)的次數：將結果以對象的形式輸出。
• 根據指定屬性對對象數組中的對象進行分組。
• 結合spread運算符（三點運算符...）一起使用。
• 遍歷數組，同時對符合條件的數組元素進行操作。
• 將promise的鏈式操作，按照順序執(zhí)行。
• 開啟由多個函數組成的管道。
• 用reduce模擬數組的map函數。

到了這里，關于ES6 reduce方法：示例與詳解、應用場景的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！