### reduce 方法: - 警告,此方法只適合初學,製作一般數值累加使用 實際上此方法會更複雜,請在爬文參考參考~~ :) - 先上扣: 如這段代碼,我先預設了一筆數組 - arr。 ```javascript let arr = [1,10,-5,100]; console.log('初始陣列狀態:',arr); // 初始陣列狀態: (4) [1, 10, -5, 100] ``` - 接著用 map方法,遍歷了整個 arr 以後,賦予值在 newArr 變數上 每筆結果我都要 * 2: ```javascript let newArr = arr.map((item) => item * 2); console.log('map方法將數值*2以後:',newArr) // 2 , 20 , -10 , 200 ``` ### 關於 reduce 方法 (這邊的介紹可以先省略,因為太複雜): - callback 是一個函數,用於處理陣列中的每個元素。它可以接受四個參數,如下所示: **accumulator**:累加器,用於累積回調函數的返回值。 **currentValue**:當前陣列元素的值。 **currentIndex**:當前陣列元素的索引(可選)。 **array**:調用 reduce 的陣列本身(可選)。 **initialValue** 是一個可選參數,表示用作第一次調用回調函數時的初始值。如果不提供 initialValue,則將使用陣列的第一個元素作為初始值,然後從陣列的第二個元素開始迭代。 ### 講了一堆屁話,終於要來練習 reduce 方法上場了: - 實際上 reduce 方法還可以更複雜,下面的案例會是以累加數值為參考: - 這個範例我是使用了1個參數的情境下去執行:`callback` 這個 callback 函數包含了兩筆參數: - a , 累積器。 - b , 當前處理的元素。 - 我們這邊會針對 newArr 數組來執行 reduce 方法: ```javascript // reduce 方法 , 去執行 newArr 陣列狀態: let result = newArr.reduce((a,b) => { console.log('當前的值:',a); console.log('將要處理的值:',b) return a + b; }) // 輸出的結果: console.log(result) // a -> 2 (a,累加器) // b -> 20 (b,將要處理的值) // a -> 22(a,累加器) // b -> -10 (b,將要處理的值) // a -> 12(a,累加器) // b -> 200 (b,將要處理的值) // result -> 212 - 累加器最終的數值返回。 ``` ### 有設定指定預設值的情況: - 1這題的預設值為 0: ```javascript // 當 reduce 有給預設值的情況: const arr2 = [1,3,-100,250]; console.log('arr2-初始狀態',arr2); // arr2 , 執行 reduce 方法 , 並且預設一個初始值情況: let resultArr = arr2.reduce((a,b) => { console.log('累加器初始值:',a); console.log('當前相加值:',b); return a + b; },0); // 初始值 console.log(resultArr); // 輸出結果如下: - a, 0 - b, 1 - a, 1 - b, 3 - a, 4 - b, -100 - a, -96 - b, 250 - result: 154 ```