接續前一天的陣列方法介紹，今天是reduce()和join()。尤其reduce()功能很強大，不但能遍歷陣列，還能將結果累積成任何型別，例如數字、字串、物件等，一起來看看吧~

reduce()

1. 功能：透過callback函式將陣列中的所有元素依序進行處理，累積為一個結果。
2. 語法：

array.reduce(callbackFn[accumulator, currentValue, currentIndex, array], initialValue)

第一個參數callbackFn：裡面有包含四個參數，

• accumulator：累加器，前一次callback回傳的值
• currentValue：當前的元素
• currentIndex(選填)：當前的索引值
• array(選填)：呼叫reduce的陣列本身

第二個參數initialValue(選填)：初始值

• 如果有傳入initialValue：accumulator會是initialValue，currentValue是陣列第一個元素array[0]。
• 如果沒有傳入initialValue：reduce()會以陣列的第一個元素作為初始值，也就是accumulator會是陣列第一個元素array[0]，currentValue是陣列第二個元素array[1]。

4. 回傳值：會產生一個單一結果，可以是一個數字、一個物件等
5. 範例：

把陣列加總

const numbers = [3, 5, 7, 9];
const result = numbers.reduce(function (accumulator, currentValue) {
  return accumulator + currentValue;
}, 1);
console.log(result); //25

有提供initialValue初始值，accumulator會等於initialValue，也就是1。

currentValue會等於陣列第一個元素，也就是3。

過程

最後結果為25，執行次數4次。。

如果沒有提供initialValue，accumulator會等於陣列第一個元素，也就是3。

currentValue會等於陣列第二個元素，也就是5。

const numbers = [3, 5, 7, 9];
const result = numbers.reduce(function (accumulator, currentValue) {
  return accumulator + currentValue;
});

console.log(result); //24

過程

最後結果為24，可以看到執行次數變為3次。

與forEach()寫法比較一下：

const numbers = [3, 5, 7, 9];
let result = 0; // 當累加器

numbers.forEach(function (currentValue) {
  result += currentValue; // 將每個數字累加到 result
});

console.log(result); // 24

因為forEach()不會回傳結果，所以必須另設一個變數存放累加過程。

陣列轉換為物件

const names = ["Waston", "Jeremy", "Tangerine", "Jami"];
const result = names.reduce(function (acc, name, index) {
  acc[index + 1] = name; //用index作為屬性
  return acc;
}, {});

console.log(result);

//{1: 'Waston', 2: 'Jeremy', 3: 'Tangerine', 4: 'Jami'}

初始值是 {} 空物件，callback函式執行時，name 是當前處理的元素，也就是陣列裡的名字字串，並將index作為物件的屬性，並設置其值為 name，最後得到一個物件{1: 'Waston', 2: 'Jeremy', 3: 'Tangerine', 4: 'Jami'}。

reduce和forEach真的很像，都會把全部的元素跑一遍，差別在於reduce有累加器存放前一次callback回傳的值，而且可以把陣列改成一個字串、一個數值、一個物件等結果。

join()

1. 功能：陣列轉字串的方法，合併陣列中的元素成一個字串並回傳。
2. 語法：

join(separator)

separator(選填)：可以指定分隔陣列元素的符號，沒有寫的話，預設是逗號,。

4. 回傳值：回傳一個字串
5. 範例：

沒有指定分隔符號：

const names = ["Waston", "Jeremy", "Tangerine", "Jami"];

const result = names.join(); 
console.log(result); //"Waston,Jeremy,Tangerine,Jami"

沒有提供 separator，預設會使用逗號, 作為分隔符。

自訂其他分隔符號：

const names = ["Waston", "Jeremy", "Tangerine", "Jami"];

const result = names.join(""); //空字串分隔
console.log(result); //"WastonJeremyTangerineJami"

const result = names.join("-"); //連字號分隔
console.log(result); //"Waston-Jeremy-Tangerine-Jami"

以上分享，謝謝！

參考資料

MDN - reduce
MDN - join
Day 13 咩色用得好 - Array.prototype.reduce (新手摧毀者)