前言

JavaScript 提供了許多陣列方法來處理資料, 其中 find() 和 reduce() 是兩個常用但功能完全不同的方法. 這篇文章將詳細介紹它們的用法與差異.

find() 方法

語法

array.find(callback[, thisArg])

功能

尋找符合指定條件的第一個元素, 如果找到則返回該元素, 否則返回 undefined.

callback 參數

接受 3 個參數:

  • element: 當前遍歷到的陣列元素
  • index (可選): 當前遍歷到的陣列元素的索引
  • array (可選): 被遍歷的陣列

返回值: 如果符合指定條件, 則返回 true, 否則返回 false.

範例

const arr = [1, 2, 3, 4, 5];
const result = arr.find((num) => num > 3);

console.log(result); // 4

(num) => num > 3 是回調函數, 用來判斷陣列中的每個元素是否大於 3. 當第一個符合條件的元素被找到時, 該元素就會成為 find() 方法的返回值.

  • num: 當前遍歷到的陣列元素
  • num > 3: 表示判斷當前的元素是否大於 3

reduce() 方法

語法

array.reduce(callback[, initialValue])

功能

對陣列中的所有元素進行累加計算, 返回計算結果.

callback 參數

接受 4 個參數:

  • accumulator: 上一次調用回調函數時返回的累積值或初始值
  • currentValue: 當前遍歷到的陣列元素
  • index (可選): 當前遍歷到的陣列元素的索引
  • array (可選): 被計算的陣列

返回值: 返回計算結果.

範例

const arr = [1, 2, 3, 4, 5];
const result = arr.reduce((sum, num) => sum + num, 0);

console.log(result); // 15

(sum, num) => sum + num 是回調函數, 用來將陣列中的每個元素與之前的累加值相加, 得到新的累加值.

  • sum: 上一次回調函數返回的累加值, 初始值為 0
  • num: 當前遍歷到的陣列元素
  • sum + num: 表示將上一次的累加值 sum 和當前的元素值 num 相加
  • 0: 是 reduce() 方法的第二個參數, 表示初始值. 因為第一次調用回調函數時, 上一次的累加值為初始值, 而不是陣列的第一個元素

總結

兩個方法的主要差異:

  • find() 方法尋找符合指定條件的第一個元素, 而 reduce() 方法對陣列中的所有元素進行累加計算
  • find() 方法的回調函數返回布爾值, 而 reduce() 方法的回調函數返回計算結果
  • find() 方法返回找到的元素, 如果沒有找到則返回 undefined, 而 reduce() 方法返回計算結果