前言

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() 方法返回計算結果