快捷導(dǎo)航

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

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

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

語法：

reduce()對數(shù)組中的每個元素進(jìn)行累加，返回一個新的值，可以傳入初始值
簡單的講就是返回?cái)?shù)組中所有元素的和數(shù) 不會改變原始組的值不會對空數(shù)組執(zhí)行回調(diào)函數(shù)

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

tmp：上一次的累加值，初始值為外部傳進(jìn)去的初始值 startValue，若沒傳默認(rèn)是數(shù)組第一個值
value：數(shù)組元素；若累加值tmp為數(shù)組第一個值，則value為從數(shù)組第二個值開始
index：數(shù)組索引（可選）
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的組合

篩選出數(shù)組中年齡>18歲的，并添加屬性，用map和filter的組合需要遍歷數(shù)組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只用遍歷數(shù)組一次

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

返回結(jié)果：

3、高級用法：對象數(shù)組去重

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)

返回結(jié)果：

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

const result = [
  {subject: '物理', marks: 41},
  {subject: '化學(xué)', marks: 59},
  {subject: '高等數(shù)學(xué)', marks: 36},
  {subject: '應(yīng)用數(shù)學(xué)', 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)

返回結(jié)果：