欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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 什么類(lèi)型 res就是什么類(lèi)型的
// res的初始值為0 ,求和所以得從0開(kāi)始
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

// 寫(xiě)法1
const sum = people.reduce((res, cur) => {
   const name = cur.name
   res[name]=cur.age
   return res
}, {})
// 寫(xiě)法2 解構(gòu)返回值 化簡(jiǎn)
const sum = people.reduce((res, cur) => ({
   ...res,
   [cur.name] : cur.age
}), {})
// 寫(xiě)法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é)果,以及不寫(xiě)定義初始值的情況

// 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
})

總結(jié)

總結(jié)下回調(diào)函數(shù)中的四個(gè)參數(shù)

  • 第一個(gè)參數(shù)

1.第一次迭代:當(dāng)給了初始值時(shí),它的初始值就為該值。然后通過(guò)該值去執(zhí)行相關(guān)邏輯操作,第二次迭代它的值就為上次迭代的結(jié)果。后面依次類(lèi)推。

2.第一次迭代:當(dāng)沒(méi)有給初始值時(shí),它的初始值就是數(shù)組本身的第一個(gè)迭代對(duì)象。

后續(xù)(同上)

建議:最好給一個(gè)初始值,因?yàn)樗鼪Q定你最終需要什么類(lèi)型的結(jié)果(它決定回調(diào)函數(shù)的第一個(gè)參數(shù))。

  • 第二個(gè)參數(shù)是當(dāng)前迭代的對(duì)象;

1.當(dāng)沒(méi)有給初始值時(shí),它的初始值就是數(shù)組本身的第一個(gè)迭代對(duì)象;

2.當(dāng)給了初始值時(shí),它的初始值就是數(shù)組本身的第二個(gè)迭代對(duì)象

  • 第三個(gè)參數(shù)是第二個(gè)參數(shù)的索引

第四個(gè)參數(shù)是將要迭代的所有對(duì)象的數(shù)組(簡(jiǎn)單說(shuō)就是數(shù)組本身)

對(duì)于reduce()我們只需要弄清楚其參數(shù)與返回值,那么基本就掌握該函數(shù)了。

以上就是JavaScript高階API數(shù)組reduce函數(shù)使用示例的詳細(xì)內(nèi)容,更多關(guān)于JavaScript數(shù)組API reduce的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

  • 讓微信小程序支持ES6中Promise特性的方法詳解

    讓微信小程序支持ES6中Promise特性的方法詳解

    微信更新自家的Web開(kāi)發(fā)工具后無(wú)法使用原生 Promise,下面這篇教程教你引入第三方庫(kù)來(lái)使用 Promise,文中通過(guò)圖文介紹的非常詳細(xì),對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面跟著小編一起來(lái)學(xué)習(xí)學(xué)習(xí)吧。
    2017-06-06
  • function foo的原型與prototype屬性解惑

    function foo的原型與prototype屬性解惑

    最近在研究js,疑惑也比較多。主要是被原型這個(gè)東西給弄迷糊了。
    2010-11-11
  • JavaScript基于replace+正則實(shí)現(xiàn)ES6的字符串模版功能

    JavaScript基于replace+正則實(shí)現(xiàn)ES6的字符串模版功能

    這篇文章主要介紹了JavaScript基于replace+正則實(shí)現(xiàn)ES6的字符串模版功能,結(jié)合實(shí)例形式分析了replace結(jié)合正則實(shí)現(xiàn)ES6字符串模板功能的具體步驟與相關(guān)操作技巧,需要的朋友可以參考下
    2017-04-04
  • 最新評(píng)論