JS中reduce怎么用

這篇文章給大家分享的是有關(guān)JS中reduce怎么用的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

reduce方法是一個(gè)數(shù)組的迭代方法，和map、filter不同，reduce方法可緩存一個(gè)變量，迭代時(shí)我們可以操作這個(gè)變量，然后返回它。

這是我大白話的解釋，可能還是不容易理解，下面看例子吧

1. 數(shù)組累加

數(shù)組累加是項(xiàng)目經(jīng)常遇到的，比如計(jì)算商品總價(jià)等，使用reduce就可以一行代碼搞定，而且不用定義外部變量，reduce是完全無(wú)副作用的函數(shù)。

// 累加
[1, 2, 3, 4, 5, 6, 7, 8].reduce((a, i) => a + i);
// 輸出：36

// 累加，默認(rèn)一個(gè)初始值
[1, 2, 3, 4, 5, 6, 7, 8].reduce((a, i) => a + i, 5);
// 輸出：41

// 累乘
[1, 2, 3, 4, 5, 6, 7, 8].reduce((a, i) => a * i);
// 輸出：40320

2. 找出數(shù)組最大值

在數(shù)組每次的迭代中，我們使用Math.max獲取最大值并返回，最后我們將得到數(shù)組所有項(xiàng)目的最大值。

[1, 2, 3, 4, 5, 6, 7, 8].reduce((a, i) => Math.max(a, i));

當(dāng)然如果數(shù)組每項(xiàng)都是數(shù)字我們可以使用...展開(kāi)運(yùn)算符和Math.max配合。

Math.max(...[1, 2, 3, 4, 5, 6, 7, 8]);

3. 處理不規(guī)則數(shù)組

通過(guò)map和reduce配合使用，返回每個(gè)子數(shù)組拼接好的結(jié)果。

let data = [
  ["紅色","128g", "蘋果手機(jī)"],
  ["南北","兩室一廳","128㎡","洋房住宅"],
  ["小米","白色","智能運(yùn)動(dòng)手表","心率血壓血氧","來(lái)電信息提醒"], 
  ["官方發(fā)售","2020年秋季","籃球","球鞋","品牌直郵"]
]
let dataConcat = data.map(item=>item.reduce((a,i)=>`${a} ${i}`))

// 輸出結(jié)果：
["紅色 128g 蘋果手機(jī)"
"南北 兩室一廳 128㎡ 洋房住宅"
"小米 白色 智能運(yùn)動(dòng)手表 心率血壓血氧 來(lái)電信息提醒"
"官方發(fā)售 2020年秋季 籃球 球鞋 品牌直郵"]

4. 刪除數(shù)據(jù)重復(fù)項(xiàng)

檢查當(dāng)前迭代項(xiàng)是否存在，如果不存在添加到數(shù)組中。

let array = [1, 2, 3, 'a', 'b', 'c', 1, 2, 3, 'a', 'b', 'c'];
array.reduce((noDupes, curVal) => {
  if (noDupes.indexOf(curVal) === -1) { noDupes.push(curVal) }
  return noDupes
}, [])

// 輸出：[1, 2, 3, 'a', 'b', 'c']

5. 驗(yàn)證括號(hào)是否合法

這是一個(gè)很巧妙的用法，我在dev.to上看到的用法。如果結(jié)果等于0說(shuō)明，括號(hào)數(shù)量是合法的。

[..."(())()(()())"].reduce((a,i)=> i === '(' ? a+1 : a-1 , 0);
// 輸出：0

// 使用循環(huán)方式
let status=0
for (let i of [..."(())()(()())"]) {
  if(i === "(")
    status = status + 1
  else if(i === ")")
    status = status - 1
  if (status < 0) {
    break;
  }
}

6. 按屬性分組

按照指定key將數(shù)據(jù)進(jìn)行分組，這里我用國(guó)家字段分組，在每次迭代過(guò)程中檢查當(dāng)前國(guó)家是否存在，如果不存在創(chuàng)建一個(gè)數(shù)組，將數(shù)據(jù)插入到數(shù)組中。并返回?cái)?shù)組。

let obj = [
  {name: '張三', job: '數(shù)據(jù)分析師', country: '中國(guó)'},
  {name: '艾斯', job: '科學(xué)家', country: '中國(guó)'},
  {name: '雷爾', job: '科學(xué)家', country: '美國(guó)'},
  {name: '鮑勃', job: '軟件工程師', country: '印度'},
]

obj.reduce((group, curP) => {
  let newkey = curP['country']
  if(!group[newkey]){
    group[newkey]=[]
  }
  group[newkey].push(curP)
  return group
}, [])
// 輸出：
[ 中國(guó): [{…}, {…}]
  印度: [{…}]
  美國(guó): [{…}] ]

7. 數(shù)組扁平化

這里展示的數(shù)組只有一級(jí)深度，如果數(shù)組是多級(jí)可以使用遞歸來(lái)進(jìn)行處理

[[3, 4, 5], [2, 5, 3], [4, 5, 6]].reduce((singleArr, nextArray) => singleArr.concat(nextArray), [])
// 輸出：[3, 4, 5, 2, 5, 3, 4, 5, 6]

當(dāng)然也可以使用ES6的.flat方法替代

[ [3, 4, 5], 
 [2, 5, 3], 
 [4, 5, 6]
].flat();

8. 反轉(zhuǎn)字符串

這也是一種很奇妙的實(shí)現(xiàn)方法

[..."hello world"].reduce((a,v) => v+a)

或者

[..."hello world"].reverse().join('')

感謝各位的閱讀！關(guān)于“JS中reduce怎么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！