find() 方法

  • 用法: array.find(callback[, thisArg])

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

  • callback:

    • 接受 3 個參數:

      • element: 當前遍歷到的陣列元素

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

      • array(可選): 被遍歷的陣列

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

find() 範例

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(可選): 被計算的陣列

    • 返回值: 返回計算結果

reduce() 範例

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