8個JS的reduce使用實例和reduce操作方式
更新時間：2021年09月29日 11:57:51 作者：傲夫靠斯
reduce方法是JavaScript中一個比較強大的方法，可能在平時開發(fā)中，有人根本沒用過，通過下面的8個例子，學(xué)會reduce的用法以及它的常用場景,需要的朋友可以參考一下
reduce方法是一個數(shù)組的迭代方法，和map、filter不同，reduce方法可緩存一個變量，迭代時我們可以操作這個變量，然后返回它。
這是我大白話的解釋，可能還是不容易理解，下面看例子吧
1. 數(shù)組累加
數(shù)組累加是項目經(jīng)常遇到的，比如計算商品總價等，使用reduce就可以一行代碼搞定，而且不用定義外部變量，reduce是完全無副作用的函數(shù)。
// 累加 [1, 2, 3, 4, 5, 6, 7, 8].reduce((a, i) => a + i); // 輸出：36 // 累加，默認一個初始值 [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ù)組所有項目的最大值。
[1, 2, 3, 4, 5, 6, 7, 8].reduce((a, i) => Math.max(a, i));
當(dāng)然如果數(shù)組每項都是數(shù)字我們可以使用...展開運算符和Math.max配合。
Math.max(...[1, 2, 3, 4, 5, 6, 7, 8]);
3. 處理不規(guī)則數(shù)組
通過map和reduce配合使用，返回每個子數(shù)組拼接好的結(jié)果。
let data = [
["紅色","128g", "蘋果手機"],
["南北","兩室一廳","128㎡","洋房住宅"],
["小米","白色","智能運動手表","心率血壓血氧","來電信息提醒"],
["官方發(fā)售","2020年秋季","籃球","球鞋","品牌直郵"]
]
let dataConcat = data.map(item=>item.reduce((a,i)=>`${a} ${i}`))
// 輸出結(jié)果：
["紅色 128g 蘋果手機"
"南北 兩室一廳 128㎡ 洋房住宅"
"小米 白色 智能運動手表 心率血壓血氧 來電信息提醒"
"官方發(fā)售 2020年秋季 籃球 球鞋 品牌直郵"]
4. 刪除數(shù)據(jù)重復(fù)項
檢查當(dā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. 驗證括號是否合法
這是一個很巧妙的用法，我在dev.to上看到的用法。如果結(jié)果等于0說明，括號數(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ù)進行分組，這里我用國家字段分組，在每次迭代過程中檢查當(dāng)前國家是否存在，如果不存在創(chuàng)建一個數(shù)組，將數(shù)據(jù)插入到數(shù)組中。并返回數(shù)組。
let obj = [
{name: '張三', job: '數(shù)據(jù)分析師', country: '中國'},
{name: '艾斯', job: '科學(xué)家', country: '中國'},
{name: '雷爾', job: '科學(xué)家', country: '美國'},
{name: '鮑勃', job: '軟件工程師', country: '印度'},
]
obj.reduce((group, curP) => {
let newkey = curP['country']
if(!group[newkey]){
group[newkey]=[]
}
group[newkey].push(curP)
return group
}, [])
// 輸出：
[ 中國: [{…}, {…}]
印度: [{…}]
美國: [{…}] ]
7. 數(shù)組扁平化
這里展示的數(shù)組只有一級深度，如果數(shù)組是多級可以使用遞歸來進行處理
[[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)字符串
這也是一種很奇妙的實現(xiàn)方法
[..."hello world"].reduce((a,v) => v+a)
或者
[..."hello world"].reverse().join('')
相關(guān)文章
這篇文章主要為大家介紹了Three.js材質(zhì)Material類型示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
在JavaScript中所有的異常都是Error對象，遇到異常就會拋出一個Error對象,這個對象中包含錯誤的描述信息，通過JavaScript提供的異常處理語句,我們可以用結(jié)構(gòu)化的方式來捕捉發(fā)生的錯誤,讓異常處理代碼與核心業(yè)務(wù)代碼實現(xiàn)分離,需要的朋友可以參考一下2021-12-12
前端從開發(fā)到部署前都離不開 Webpack 的參與，本文結(jié)合了我們自己在開發(fā)中碰到的種種問題解決方案，同時借鑒了很多開源項目的配置來介紹一種用 3 個 JS 文件來配置 Webpack 的方法。2017-09-09
這篇文章主要介紹了微信小程序 二維碼canvas繪制實例詳解的相關(guān)資料,這里附有實例代碼，微信小程序 使用canvas 進行二維碼的繪制，需要的朋友可以參考下2017-01-01
這篇文章主要為大家介紹了Array.reduce使用原理示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
這篇文章主要為大家介紹了Rollup的插件機制及構(gòu)建流程深入解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
微信小程序 定位到當(dāng)前城市實現(xiàn)實例代碼
這篇文章主要介紹了微信小程序 定位到當(dāng)前城市實現(xiàn)實例代碼的相關(guān)資料,需要的朋友可以參考下2017-02-02
Javascript常用數(shù)組是構(gòu)成其的一個重要的部分，它們可以用來存儲字符串、對象、函數(shù)、因此本篇文章小編九帶大家深入了解Javascript常用數(shù)組的操作方法,需要的朋友可以參考下面文章的具體內(nèi)容2021-09-09
這篇文章主要介紹了微信小程序navigator組件實例詳解的相關(guān)資料,需要的朋友可以參考下2016-09-09
JavaScript數(shù)據(jù)類型對函數(shù)式編程的影響示例解析
這篇文章主要為大家介紹了JavaScript數(shù)據(jù)類型對函數(shù)式編程的影響示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02