banner
Tenifs

Tenifs

雄关漫道真如铁,而今迈步从头越。
github
follow
zhihu
email

JavaScript 中,reduce 函数的用法

reduce() 是 JavaScript 中數組的一個高階函數,用於將數組中的所有元素通過某種方式匯總成一個單一的值。它的基本用法是通過提供一個回調函數,回調函數接收四個參數:accumulator(累積器)、currentValue(當前值)、currentIndex(當前索引)、array(原數組)。其中,accumulator 用來保存每次迭代的結果,而 currentValue 則是當前迭代項的值。

語法:#

array.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])
  • callback: 執行的回調函數,接收四個參數:
    • accumulator: 上一次回調函數返回的值,或者是初始值(initialValue)。
    • currentValue: 當前正在處理的數組元素。
    • index: 當前元素的索引(從 0 開始)。
    • array: 被操作的原數組。
  • initialValue(可選):指定第一次調用回調函數時 accumulator 的初始值。如果沒有提供 initialValue,則默認 accumulator 的初始值為數組的第一個元素,currentValue 從數組的第二個元素開始。

示例 1:求數組元素的和#

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

const sum = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0);  // 0 是初始值

console.log(sum);  // 15

示例 2:數組去重#

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

const uniqueNumbers = numbers.reduce((accumulator, currentValue) => {
  if (!accumulator.includes(currentValue)) {
    accumulator.push(currentValue);
  }
  return accumulator;
}, []);

console.log(uniqueNumbers);  // [1, 2, 3, 4]

示例 3:計算數組中每個元素的出現次數#

const fruits = ['apple', 'banana', 'apple', 'orange', 'banana', 'banana'];

const fruitCount = fruits.reduce((accumulator, currentValue) => {
  if (accumulator[currentValue]) {
    accumulator[currentValue] += 1;
  } else {
    accumulator[currentValue] = 1;
  }
  return accumulator;
}, {});

console.log(fruitCount);  // { apple: 2, banana: 3, orange: 1 }

示例 4:鏈式操作#

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

const result = numbers
  .reduce((acc, currentValue) => acc + currentValue, 0)
  .toString()
  .split('')
  .reverse()
  .join('');

console.log(result);  // "10" (數字 10 被反轉成 "01")

總結#

reduce() 是一個非常強大的方法,適用於各種場景,如數組聚合、轉換、計數等。它能將複雜的操作簡化為一行代碼,但要注意初學者可能會覺得它有點抽象。

載入中......
此文章數據所有權由區塊鏈加密技術和智能合約保障僅歸創作者所有。