reduce作為ES5新增的常規數組方法之一，對比forEach?、filter和map，在實際使用上好像有些被忽略，發現身邊的人極少用它，導致這個如此強大的方法被逐漸埋沒。

如果經常使用reduce，怎么可能放過如此好用的它呢！我還是得把他從塵土中取出來擦干凈，奉上它的高級用法給大家。一個如此好用的方法不應該被大眾埋沒。

下面對reduce的語法進行簡單說明，詳情可查看MDN的reduce()的相關說明。

01:代替map和filter

const?arr?=?[0,?1,?2,?3];

//?代替map：[0,?2,?4,?6]

const?arrA?=?arr.map(item?=>?item?*?2);

const?arrB?=?arr.reduce((items,?item)?=>?{

return?[...items,?item?*?2]

},?[]);

//?代替filter：[2,?3]

const?A?=?arr.filter(item?=>?{

return?item?>?1

});

const?B?=?arr.reduce((items,?item)?=>?{

return?item?>?1???[...items,?item]?:?t

},?[]);

//?代替map和filter：[4,?6]

const?C?=?arr.map(item?=>?{

return?item?*?2

}).filter(item?=>?{

return?item?>?2

});

const?D?=?arr.reduce((items,?item)?=>?{

return?item?*?2?>?2???[...items,?item?*?2]?:?items

},?[]);

02:數組分割

>語法是不是有點騷

function?Chunk(arr?=?[],?size?=?1)?{

return?arr.length???arr.reduce((items,?item)?=>?{

return?items[items.length?-?1].length?===?size

??items.push([item])?:?items[items.length?-?1].push(item)

,?items

},?[[]])

:?[];

}

const?arr?=?[1,?2,?3,?4,?5];

Chunk(arr,?2);

//?[[1,?2],?[3,?4],?[5]]

03:數組過濾

function?Difference(arr?=?[],?oarr?=?[])?{

return?arr.reduce((items,?item)?=>?{

return?(!oarr.includes(item)?&&?items.push(item),?items)

},?[]);

}

const?arr1?=?[1,?2,?3,?4,?5];

const?arr2?=?[2,?3,?6]

Difference(arr1,?arr2);

//?[1,?4,?5]

04:數組填充

function?Fill(arr=[],val="",start=0,end=arr.length)?{

if?(start?=?end?||?end?>?arr.length){

return?arr

};

return?[

...arr.slice(0,?start),

...arr.slice(start,?end).reduce((items,?item)?=>?{

return?(items.push(val?||?item),?items)

},?[]),

...arr.slice(end,?arr.length)

];

}

const?arr?=?[0,?1,?2,?3,?4,?5,?6];

Fill(arr,?"aaa",?2,?5);

//?[0,?1,?"aaa",?"aaa",?"aaa",?5,?6]

05:數組扁平

function?Flat(arr?=?[])?{

return?arr.reduce((items,?item)?=>?{

return?items.concat(

Array.isArray(item)???Flat(item)?:?item

)

},?[])

}

const?arr?=?[0,?1,?2,?3,?4,?5,?6];

5);

//?[0,?1,?"aaa",?"aaa",?"aaa",?5,?6]

06:數組去重

function?Uniq(arr?=?[])?{

return?arr.reduce((items,?item)?=>?{

return?items.includes(item)???items?:?[...items,?item]

,[]

});

}

const?arr?=?[2,?1,?0,?3,?2,?1,?2];

Uniq(arr);?//?[2,?1,?0,?3]

08:數組最大最小值

function?Max(arr?=?[])?{

return?arr.reduce((items,?item)?=>?{

return?items?>?item???items?:?item

});

}

function?Min(arr?=?[])?{

return?arr.reduce((items,?item)?=>?{

return?items?

});

}

const?arr?=?[12,?45,?21,?65,?38,?76,?108,?43];

Max(arr);?//?108

Min(arr);?//?12

09:數組成員獨立拆解

function?Unzip(arr?=?[])?{

return?arr.reduce(

(items,?item)?=>?(item.forEach((w,?i)?=>?items[i].push(w)),?items),

Array.from({?length:?Math.max(...arr.map(item?=>?item.length))?}).map(v?=>?[])

);

}

const?arr?=?[["a",?1,?true],?["b",?2,?false]];

Unzip(arr);

//?[["a",?"b"],?[1,?2],?[true,?false]]

10:對數組成員個數進行統計

此方法是字符統計和單詞統計的原理，入參時把字符串處理成數組即可

function?Count(arr?=?[])?{

return?arr.reduce((items,?item)?=>?{

return?items[item]?=?(items[item]?||?0)?+?1,?items

},?{});

}

const?arr?=?[0,?1,?1,?2,?2,?2];

Count(arr);

//?{?0:?1,?1:?2,?2:?3?}

11:對數組成員特性進行分組

function?Group(arr?=?[],?key)?{

return?key???arr.reduce((t,?v)?=>?(

!t[v[key]]?&&?(t[v[key]]?=?[]),?t[v[key]].push(v),?t

),?{})?:?{};

}

const?arr?=?[

{?area:?"GZ",?name:?"YZW",?age:?27?},

{?area:?"GZ",?name:?"TYJ",?age:?25?},

{?area:?"SZ",?name:?"AAA",?age:?23?},

{?area:?"FS",?name:?"BBB",?age:?21?},

{?area:?"SZ",?name:?"CCC",?age:?19?}

];

//?以地區area作為分組依據

Group(arr,?"area");

//{?GZ:?Array(2),?SZ:?Array(2),?FS:?Array(1)?}

12:對數組成員包含的關鍵字進行統計

function?Keyword(arr?=?[],?keys?=?[])?{

return?keys.reduce((t,?v)?=>?(

arr.some(w?=>?w.includes(v))?&&?t.push(v),?t),

[]);

}

const?text?=?[

"今天天氣真好，我想出去釣魚",

"我一邊看電視，一邊寫作業",

"小明喜歡同桌的小紅，又喜歡后桌的小君，真TM花心",

"最近上班喜歡摸魚的人實在太多了，代碼不好好寫，在想入非非"

];

const?keyword?=?["偷懶",?"喜歡",?"睡覺",?"摸魚",?"真好",?"一邊",?"明天"];

Keyword(text,?keyword);

//?["喜歡",?"摸魚",?"真好",?"一邊"]

13:字符串翻轉

function?ReverseStr(str?=?"")?{

return?str.split("").reduceRight((items,?item)?=>?items?+?item);

}

const?str?=?"reduce最牛逼";

ReverseStr(str);

//?"逼牛最ecuder"

14:累加累乘

function?Accumulation(...vals)?{

return?vals.reduce((t,?v)?=>?t?+?v,?0);

}

function?Multiplication(...vals)?{

return?vals.reduce((t,?v)?=>?t?*?v,?1);

}

Accumulation(1,?2,?3,?4,?5);?//?15

Multiplication(1,?2,?3,?4,?5);?//?120

15:返回對象指定的鍵值

function?GetKeys(obj?=?{},?keys?=?[])?{

return?Object.keys(obj).reduce((items,?item)?=>?(

keys.includes(item)?&&?(items[item]?=?obj[item]),?items

),?{});

}

const?target?=?{?a:?1,?b:?2,?c:?3,?d:?4?};

const?keyword?=?["a",?"d"];

GetKeys(target,?keyword);

//?{?a:?1,?d:?4?}

來源：oschina

鏈接：https://my.oschina.net/u/4287715/blog/4415184

總結

以上是生活随笔為你收集整理的java reduce.mdn_reduce高级用法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。