es6中reduce的基本使用方法
前言
為啥要把es6 中 reduce 單獨(dú)拿出來(lái)說(shuō)呢，因?yàn)檫@個(gè)功能實(shí)在太騷，值得如此。
reduce() 方法接收一個(gè)函數(shù)作為累加器，數(shù)組中的每個(gè)值（從左到右）開(kāi)始縮減，最終計(jì)算為一個(gè)值。reduce() 方法接受四個(gè)參數(shù)：初始值（或者上一次回調(diào)函數(shù)的返回值），當(dāng)前元素值，當(dāng)前索引，調(diào)用 reduce() 的數(shù)組。
reduce() 的幾個(gè)強(qiáng)大用法：
數(shù)組求和
var total = [ 0, 1, 2, 3 ].reduce(( acc, cur ) => {
return acc + cur
}, 0);
console.log(total) // 6
二維數(shù)組轉(zhuǎn)為一維數(shù)組
var array = [[1, 2], [3, 4], [5, 6]].reduce(( acc, cur ) => {
return acc.concat(cur)
}, []);
console.log(array) // [ 0, 1, 3, 4, 5, 6 ]
計(jì)算數(shù)組中每個(gè)元素出現(xiàn)的次數(shù)
方法一
let names = ['tom', 'jim', 'jack', 'tom', 'jack'];
const countNames = names.reduce((allNames, name) => {
if (name in allNames) {
allNames[name] ++;
}
else {
allNames[name] = 1;
}
return allNames;
}, {});
console.log(countNames) // { tom: 2, jim: 1, jack: 2 }
方法二
const arraySum = (arr, val) => arr.reduce((acc, cur) => {
return cur == val ? acc + 1 : acc + 0
}, 0);
let arr = [ 0, 1, 3, 0, 2, 0, 2, 3 ]
console.log(arraySum(arr, 0)) // 數(shù)組arr中 0 元素出現(xiàn)的次數(shù)為3
數(shù)組去重
1.方法一
let arr = [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4];
let result = arr.sort().reduce((init, current) => {
if (init.length === 0 || init[init.length - 1] !== current) {
init.push(current);
}
return init;
}, []);
console.log(result); //[1,2,3,4,5]
2.方法二
當(dāng)然，對(duì)于數(shù)組去重，也可以直接使用es6的…[拓展運(yùn)算符] + Set 實(shí)現(xiàn)：
// console.log(...new Set([1,2,3,4,5,2,4,1]))
const dedupe = (array) => {
return Array.from(new Set(array));
}
console.log(dedupe([1, 1, 2, 3])) //[1,2,3]
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
javascript實(shí)現(xiàn)一款好看的秒表計(jì)時(shí)器
這篇文章主要為大家詳細(xì)介紹了一款好看的秒表計(jì)時(shí)器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
JS 進(jìn)度條效果實(shí)現(xiàn)代碼整理
進(jìn)度條效果實(shí)現(xiàn)代碼,有助于緩解頁(yè)面顯示慢的頁(yè)面，給用戶(hù)一個(gè)等待時(shí)間的效果2011-05-05
這篇文章主要介紹了JS往數(shù)組中添加項(xiàng)性能分析的相關(guān)資料,需要的朋友可以參考下2015-02-02
javascript實(shí)現(xiàn)頁(yè)面內(nèi)關(guān)鍵詞高亮顯示代碼
關(guān)鍵詞高亮想必大家對(duì)它都不陌生吧，應(yīng)用也比較廣泛的，下面為大家介紹下通過(guò)javascript是如何實(shí)現(xiàn)頁(yè)面內(nèi)關(guān)鍵詞高亮顯示2014-04-04
下面小編就為大家?guī)?lái)一篇js定義類(lèi)的幾種方法(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
基于JavaScript實(shí)現(xiàn)圖片連播和聯(lián)級(jí)菜單實(shí)例代碼
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)圖片連播和聯(lián)級(jí)菜單實(shí)例代碼,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-07-07
JS實(shí)現(xiàn)圖片數(shù)字時(shí)鐘
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)圖片數(shù)字時(shí)鐘，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
本文詳細(xì)講解了JS截取字符串的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-02-02
javascript中callee與caller的區(qū)別分析
有些小伙伴可能會(huì)問(wèn)caller,callee 是什么？在javascript 中有什么樣的作用？那么本篇會(huì)對(duì)于此做一些基本介紹。希望能夠?qū)Υ蠹依斫鈐avascript中的callee與caller有所幫助。2015-04-04
簡(jiǎn)單了解JavaScript中常見(jiàn)的反模式
這篇文章主要介紹了簡(jiǎn)單了解JavaScript中常見(jiàn)的反模式，反模式 是指對(duì)反復(fù)出現(xiàn)的設(shè)計(jì)問(wèn)題的常見(jiàn)的無(wú)力而低效的設(shè)計(jì)模式，俗話(huà)說(shuō)就是重蹈覆轍。 這篇文章描述了 JavaScript 中常見(jiàn)的一些反模式，以及避免它們的辦法。,需要的朋友可以參考下2019-06-06