JavaScript中數組reduce()方法使用詳情

更新時間：2022年09月01日 16:57:24 作者：行行_出狀元

這篇文章主要介紹了JavaScript中數組reduce()方法使用詳情，reduce()對數組中的每個元素進行累加，返回一個新的值，可以傳入初始值，更多相關內容需要的小伙伴可以參考一下下面文章介紹

語法：

reduce()對數組中的每個元素進行累加，返回一個新的值，可以傳入初始值
簡單的講就是返回數組中所有元素的和數不會改變原始組的值不會對空數組執(zhí)行回調函數

arr.reduce(function(tmp, value, [index]) {
    // dosomething...
},  [startValue]) // 提供初始值通常更安全

tmp：上一次的累加值，初始值為外部傳進去的初始值 startValue，若沒傳默認是數組第一個值
value：數組元素；若累加值tmp為數組第一個值，則value為從數組第二個值開始
index：數組索引（可選）
startValue：外部傳入的初始值（可選）

用法：

1、簡單用法：求和、乘積、平均值

let arr = [1, 2, 3, 4]
let sum = arr.reduce((x,y) => x + y) // 求和
let mul = arr.reduce((x,y) => x * y) // 求乘積
let average = arr.reduce((x, y) => (x + y) / arr.length) // 求平均值

2、升級用法：使用reduce代替map和filter的組合

篩選出數組中年齡>18歲的，并添加屬性，用map和filter的組合需要遍歷數組2次

const list = [
    { name:'張三', age:20 },
    { name:'李四', age:15 },
    { name:'王五', age:35}
]
const newList = list.filter(item => item.age > 18).map(item => {
    return Object.assign({}, item, {
        is: '成年'
    })
})

同樣操作使用reduce只用遍歷數組一次

const newList = list.reduce((tmp, item) => {
    return item.age > 18 ? tmp.concat(Object.assign({}, item, { is: '成年' })) : tmp
}, [])
console.log(newList)

返回結果：

3、高級用法：對象數組去重

let person = [
  {id: 0, name: "小明"},
  {id: 1, name: "小張"},
  {id: 2, name: "小李"},
  {id: 3, name: "小孫"},
  {id: 1, name: "小周"},
  {id: 2, name: "小陳"},
]
 
let obj = {}
person = person.reduce((prev,item)=>{
  if(obj[item.id] === undefined) {
    prev.push(item)
    obj[item.id] = 1
  }
  return prev
}, [])
console.log(person)

返回結果：

4、高級用法：按屬性分組對象

const result = [
  {subject: '物理', marks: 41},
  {subject: '化學', marks: 59},
  {subject: '高等數學', marks: 36},
  {subject: '應用數學', marks: 90},
  {subject: '英語', marks: 64},
]
let initialValue = {
  pass: [],
  fail: []
}
const groupedResult = result.reduce((accumulator, current) => {
  (current.marks >= 50) ? accumulator.pass.push(current) : accumulator.fail.push(current)
  return accumulator
}, initialValue)
console.log(groupedResult)

返回結果：