快捷導(dǎo)航

JavaScript高階API數(shù)組reduce函數(shù)使用示例

更新時間：2022年11月09日 09:20:54 作者：CodeForBetter

這篇文章主要為大家介紹了JavaScript數(shù)組高階API?reduce函數(shù)使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

正文

前面我們講了數(shù)組的一些基本方法，今天給大家講一下數(shù)組的reduce(),它是數(shù)組里面非常重要也是比較難的函數(shù)，那么這篇文章就好好給大家介紹下reduce函數(shù)。

還是老樣子，我們直接在應(yīng)用中學習，直接上例子。讓我們先定義一個包含幾個對象的數(shù)組，注意觀察下這個數(shù)組，可以看到里面有兩個對象的age都是30。(下面會用到)

// 一個包含幾個人物對象的數(shù)組。
const people = [
  { name: "John", age: 20 },
  { name: "Jane", age: 22 },
  { name: "Joe", age: 23 },
  { name: "Jack", age: 24 },
  { name: "Jackson", age: 30 },
  { name: "Jeff", age: 30 },
]

1.求數(shù)組中所有對象的年齡和

通過數(shù)組的reduce方法可以很方便的實現(xiàn)求和。reduce方法有兩個參數(shù)，第一個參數(shù)是一個回調(diào)函數(shù)，第二個參數(shù)是初始值。下面就講下這兩個參數(shù)，回調(diào)函數(shù)，有四個參數(shù)，函數(shù)體處理自己的邏輯。第二個參數(shù)，它的值決定回調(diào)函數(shù)第一個參數(shù)的初始值。重點就是這個初始值。(文末會詳細介紹這幾個參數(shù))

// 注意init 什么類型 res就是什么類型的
// res的初始值為0 ，求和所以得從0開始
const sum = people.reduce((res, cur) => res+cur.age, 0)
console.log(`結(jié)果：${sum}`); // 結(jié)果：149
// 如果我們把初始值設(shè)為100 那么結(jié)果應(yīng)該是149+100了
const sum = people.reduce((res, cur) => res+cur.age, 100)
console.log(`結(jié)果：${sum}`); // 結(jié)果：249

2.按照年齡分組

（比如上面有兩個人都是30歲，那么他們應(yīng)該分在一起）

const sum = people.reduce((res, cur) => {
   // console.log(res,cur);
   const age = cur.age
   if (res[age] == null) {
       // 這里需要使用[]動態(tài)獲取age值 ， 用.age會有不一樣的效果
       res[age] = []
   }
   // 通過push插入值
   res[age].push(cur.name)
   return res
}, {})
code1.png

3.將數(shù)組對象轉(zhuǎn)化為對象

name為key ，age為value

// 寫法1
const sum = people.reduce((res, cur) => {
   const name = cur.name
   res[name]=cur.age
   return res
}, {})
// 寫法2 解構(gòu)返回值 化簡
const sum = people.reduce((res, cur) => ({
   ...res,
   [cur.name] : cur.age
}), {})
// 寫法3 回調(diào)方法的第二個參數(shù)也可以解構(gòu)
const sum = people.reduce((res, { name, age }) => ({
   ...res,
   [name] : age
}), {})
// 結(jié)果都是一樣的
console.log(sum)
image.png

4.參數(shù)打印

最后看下各個參數(shù)打印的結(jié)果，以及不寫定義初始值的情況

// 1.定義初始值
const sum = people.reduce((res, cur, index, array) => {
   console.log('?? ~ file:  ~ res', res)
   console.log('?? ~ file:  ~ cur', cur)
   console.log('?? ~ file:  ~ index', index)
   console.log('?? ~ file:  ~ array', array)
    return  res + cur.age
}, 0)

可以看到輸出結(jié)果,第一個參數(shù)res等于初始值0

const sum = people.reduce((res, cur, index, array) => {
   console.log('?? ~ file:  ~ res', res)
   console.log('?? ~ file:  ~ cur', cur)
   console.log('?? ~ file:  ~ index', index)
   console.log('?? ~ file:  ~ array', array)
    return  res + cur.age
})