reduce方法是JavaScript中一個比較強大的方法，可能在平時開發中，有人根本沒用過，通過下面的8個例子，學會reduce的用法以及它的常用場景，
reduce方法是一個陣列的迭代方法，和map、filter不同，reduce方法可快取一個變數，迭代時我們可以操作這個變數，然后回傳它，
這是我大白話的解釋，可能還是不容易理解，下面看例子吧
1. 陣列累加
陣列累加是專案經常遇到的，比如計算商品總價等，使用reduce就可以一行代碼搞定，而且不用定義外部變數，reduce是完全無副作用的函式，
// 累加
[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. 找出陣列最大值
在陣列每次的迭代中，我們使用Math.max獲取最大值并回傳，最后我們將得到陣列所有專案的最大值，
[1, 2, 3, 4, 5, 6, 7, 8].reduce((a, i) => Math.max(a, i));
復制代碼當然如果陣列每項都是數字我們可以使用...展開運算子和Math.max配合，
Math.max(...[1, 2, 3, 4, 5, 6, 7, 8]);
復制代碼3. 處理不規則陣列
通過map和reduce配合使用，回傳每個子陣列拼接好的結果，
let data = [
["紅色","128g", "蘋果手機"],
["南北","兩室一廳","128㎡","洋房住宅"],
["小米","白色","智能運動手表","心率血壓血氧","來電資訊提醒"],
["官方發售","2020年秋季","籃球","球鞋","品牌直郵"]
]
let dataConcat = data.map(item=>item.reduce((a,i)=>`${a} ${i}`))
// 輸出結果：
["紅色 128g 蘋果手機"
"南北 兩室一廳 128㎡ 洋房住宅"
"小米 白色 智能運動手表 心率血壓血氧 來電資訊提醒"
"官方發售 2020年秋季 籃球 球鞋 品牌直郵"]
復制代碼4. 洗掉資料重復項
檢查當前迭代項是否存在，如果不存在添加到陣列中，
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上看到的用法，如果結果等于0說明，括號數量是合法的，
[..."(())()(()())"].reduce((a,i)=> i === '(' ? a+1 : a-1 , 0);
// 輸出：0
// 使用回圈方式
let status=0
for (let i of [..."(())()(()())"]) {
if(i === "(")
status = status + 1
else if(i === ")")
status = status - 1
if (status < 0) {
break;
}
}
復制代碼6. 按屬性分組
按照指定key將資料進行分組，這里我用國家欄位分組，在每次迭代程序中檢查當前國家是否存在，如果不存在創建一個陣列，將資料插入到陣列中，并回傳陣列，
let obj = [
{name: '張三', job: '資料分析師', country: '中國'},
{name: '艾斯', job: '科學家', country: '中國'},
{name: '雷爾', job: '科學家', country: '美國'},
{name: '鮑勃', job: '軟體工程師', country: '印度'},
]
obj.reduce((group, curP) => {
let newkey = curP['country']
if(!group[newkey]){
group[newkey]=[]
}
group[newkey].push(curP)
return group
}, [])
// 輸出：
[ 中國: [{…}, {…}]
印度: [{…}]
美國: [{…}] ]
復制代碼7. 陣列扁平化
這里展示的陣列只有一級深度，如果陣列是多級可以使用遞回來進行處理
[[3, 4, 5], [2, 5, 3], [4, 5, 6]].reduce((singleArr, nextArray) => singleArr.concat(nextArray), [])
// 輸出：[3, 4, 5, 2, 5, 3, 4, 5, 6]
復制代碼當然也可以使用ES6的.flat方法替代
[ [3, 4, 5],
[2, 5, 3],
[4, 5, 6]
].flat();
復制代碼8. 反轉字串
這也是一種很奇妙的實作方法
[..."hello world"].reduce((a,v) => v+a)
復制代碼或者
[..."hello world"].reverse().join('')
復制代碼轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/303062.html
標籤：其他
下一篇：JS陣列去重的幾種方法