上一篇談的是一些較簡單的陣列內建方法，這邊來談複雜一點點的。

array.map()

• 會建立新陣列
• 新陣列的元素們來自於 callbackFn 計算後的結果集合
• 若迭代時 index 不存在，則不會呼叫 callbackFn。

// 語法 from MDN
let newArr = arr.map(function callbackFn( currentValue[, index[, array]]) {
    // return element for new_array
}[, thisArg])

• 參數說明

  • callbackFn：每次迴圈時執行 callbackFn 並產生結果。結果們會存入到 newArr
    • callbackFn 可接受三個參數
      • currentValue：正被 map 迭代（iteration）處理的元素
      • index：正被 map 迭代處理的元素之 index
      • array：被 map 迭代的 array
  • thisArg：執行 callbackFn 時的 this 值。

• 回傳值：為 callbackFn 運算結果所集合成的新陣列。

什麼時候不該用 map() ?

• 不使用 map 產生的新陣列時
• 不需要回傳新陣列時

來個練習吧！

// 問題 from GPT
// 求每個名字的長度，用陣列表示
const names = ["Alice", "Bob", "Charlie", "David"];

let length = names.map(function (name) {
　// 我本來寫這樣
　// let len = name.length;
　// return len;
  return name.length; // GPT 建議這樣，可以少寫點XD
});

console.log(length); // 5, 3, 7, 5

array.filter()

• 會建立新陣列
• 新陣列的內容為經過 callbackFn 驗算後，得到的元素集合

let newArr = arr.filter(callback(element[, index[, array]])[, thisArg])

• 參數說明

  • callback：每次迴圈時執行 callback 並回傳結果（true/false）。結果為 true 時，會將當前元素存入 newArr 中
    • callback 可接受三個參數
      • element：正被 filter 迭代處理的元素
      • index：正被 filter 迭代處理的元素之 index
      • array：被 filter 迭代的 array
  • thisArg：執行 callback 時的 this 值。

• 回傳值：為通過 callback 計算的結果們所集合成的新陣列。

來個練習吧！

// 問題 from GPT
// 找出年紀大於等於 18 者。以陣列表示
const ages = [15, 22, 18, 30, 16, 25];

let over18 = ages.filter(function (age) {
  return age >= 18;
});

console.log(over18); // 22, 18, 30, 25

reduce

• 將累加器及陣列中每個元素由左至右傳入 callback ，最終回傳一個結果值

// 語法
arr.reduce(callback[accumulator, currentValue, currentIndex, array], initialValue)

• 參數說明

  • callback：處理 arr 中每個元素的函式。可傳入四個參數如下

    • accumulator：為存放上一次呼叫 callback 迴圈結果的累加值。
    • currentValue：正被迭代處理的元素
    • currentIndex：正被迭代處理的元素之索引值。
      • 有給 initialValue，則由 index 0 開始；
      • 若無 initialValue，則由 index 1 開始
    • array：被 reduce 迭代的 array／呼叫 reduce 的array

  • initialValue：於第一次呼叫 callback 時，給 accumulator 的初始值。建議給予

    • 若沒給 initialValue，會以 arr 中的第一個元素（index=0）當作初始值。
• 回傳值：為通過 callback 計算的結果們所集合成的新陣列。

來個練習吧！

// 問題 from GPT
// 計算陣列中的數字總和
const numbers = [1, 2, 3, 4, 5];

let sum = numbers.reduce(function (
  accumulator,
  currentValue,
  currentIndex,
  array
) {
  return accumulator + currentValue;
},
0);

console.log(sum); // 15

concat

• 用來將舊陣列與一或多個陣列合併，並回傳一個新陣列。

// 語法
let new_array = old_array.concat(value1[, value2[, ...[, valueN]]])

• 參數說明
• valuen：欲合併的陣列或值
• 回傳值：一個新陣列
• concat 對原有陣列執行了淺拷貝（shallow copy）

來個練習吧！

// 問題 from Bard; GPT 暫時上不去QQ
// 串聯這兩個陣列
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];

let newArr = array1.concat(array2);

console.log(newArr); // 1, 2, 3, 4, 5, 6

array.find()

• find 會以 callback 迭代檢查 arr 的每一個元素，直到出現第一個使 callback 檢查為 true 的元素，並回傳其值。
• 若迭代時無結果，則回傳 undefined

// 語法
arr.find(callback[, thisArg])

• 參數說明

  • callback：對 arr 執行迭代檢查的函式。可接受三個參數如下

    • element：正被 callback 迭代處理的元素
    • index：正被迭代處理的元素之索引值。
    • array：正被 find 迭代的 array／呼叫 find 的array

  • thisArg：執行 callback 時的 this 值。

• 回傳值：第一個使 callback 檢查為 ture 的元素。

來個練習吧！

// 問題 from Bard; GPT 暫時上不去QQ
// 找到陣列中的第一個偶數元素
const arr = [1, 2, 3, 4, 5, 6];
let ans = arr.find(function (item) {
  return item % 2 === 0;
});

console.log(ans); // 2

// 找到陣列中的第一個不為空的字符串
const arr = ["", "Hello", "World"];

let ans = arr.find(function (item) {
  return item != "";
});

console.log(ans); // Hello

array.findindex()

• 依據給予的 callback 函式迭代檢查 array 中的每個元素，直至檢查結果為 true，並回傳該元素的 index。
• 若檢查完仍找不到符合的對象，則回傳 -1

// 語法
arr.findIndex(callback[, thisArg])

• 參數說明

  • callback：對 arr 執行迭代檢查的函式。可接受三個參數如下

    • element：正被 callback 迭代處理的元素
    • index：正被迭代處理的元素之索引值
    • array：正被 find 迭代的 array／呼叫 find 的array

  • thisArg：執行 callback 時的 this 值。

• 回傳值：第一個使 callback 檢查為 ture 的元素的 index。

來個練習吧！

// 問題 from Bard; GPT 暫時上不去QQ
// 找到陣列中第一個偶數元素的索引
const arr = [1, 2, 3, 4, 5, 6];

let index = arr.findIndex(function (item) {
  return item % 2 === 0;
});

console.log(index); // 1

提醒：只要是 callback 檢查結果為 true/false，再回傳所篩出元素值的原生方法們，檢查的函式內容須注意邏輯，檢查 return 的結果只會有 true/false。

參考資料

• Array.prototype.map() - JavaScript | MDN，https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/map
• Array.prototype.filter() - JavaScript | MDN，https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
• Array.prototype.reduce() - JavaScript | MDN，https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce
• Array.prototype.concat() - JavaScript | MDN，https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/concat
• Array.prototype.find() - JavaScript | MDN，https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/find
• Array.prototype.findIndex() - JavaScript | MDN，https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex