快捷導(dǎo)航

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

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

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

正文

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

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

// 一個(gè)包含幾個(gè)人物對(duì)象的數(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ù)組中所有對(duì)象的年齡和

通過(guò)數(shù)組的reduce方法可以很方便的實(shí)現(xiàn)求和。reduce方法有兩個(gè)參數(shù)，第一個(gè)參數(shù)是一個(gè)回調(diào)函數(shù)，第二個(gè)參數(shù)是初始值。下面就講下這兩個(gè)參數(shù)，回調(diào)函數(shù)，有四個(gè)參數(shù)，函數(shù)體處理自己的邏輯。第二個(gè)參數(shù)，它的值決定回調(diào)函數(shù)第一個(gè)參數(shù)的初始值。重點(diǎn)就是這個(gè)初始值。(文末會(huì)詳細(xì)介紹這幾個(gè)參數(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.按照年齡分組

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

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

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

name為key ，age為value

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

4.參數(shù)打印

最后看下各個(gè)參數(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é)果,第一個(gè)參數(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
})