Vue,reduce js

reduce() 累加器

reduce() 累加器

reduce() 方法將一個累加器及陣列中每項元素（由左至右）傳入回呼函式，將陣列化為單一值。
組成結構

1
2
arr.reduce(callback[accumulator, currentValue, currentIndex, array], initialValue)
arr.reduce(回調[累加器,當前值、目前索引、數組],初始值)

callback:用於處理陣列中每個元素的函式，可傳入四個參數

  • accumulator用來累積回呼函式回傳值的累加器（accumulator）或 initialValue（若有提供的話，詳如下敘）。累加器是上一次呼叫後，所回傳的累加數值。
  • currentValue原陣列目前所迭代處理中的元素。
  • currentIndex 選擇性原陣列目前所迭代處理中的元素之索引。若有傳入 initialValue，則由索引 0 之元素開始，若無則自索引 1 之元素開始。
  • array 選擇性呼叫 reduce() 方法的陣列。
  • initialValue 選擇性於第一次呼叫 callback 時要傳入的累加器初始值。若沒有提供初始值，則原陣列的第一個元素將會被當作初始的累加器。假如於一個空陣列呼叫 reduce() 方法且沒有提供累加器初始值，將會發生錯誤。
回傳值
reduce js 累加總和
1
2
3
const numbers =[1,2,3,4,5];
const sum = numbers.reduce((acc,cur)=> acc + cur);
console.log('sum 總和', sum) //sum 總和 15
reduce js 累乘總和
1
2
3
const numbers =[1,2,3,4,5];
const multiplication = numbers.reduce((acc,cur)=> acc * cur);
console.log('multiplication 累乘總和', multiplication) // multiplication 累乘總和 120
算出訂購單總和
  • 使用map:取出陣列的price
  • 使用reduce:累計加總
1
2
3
4
5
6
7
8
const orderItem =[
    {name:'apple',price:25,qty:1},
    {name:'orange',price:10,qty:1},
    {name:'piniaApple',price:45,qty:1},
]

const sumOrder = (orderItem) => orderItem.map((item,index)=>item.price).reduce((arr,cur)=>arr+cur)
console.log('sumOrder 加總',sumOrder(orderItem))
reduce 計算相同元素數量並物件取出值轉為陣列
這裡用到