es6中reduce的基本使用方法
更新時間：2019年09月10日 11:05:34 作者：一只大橘
這篇文章主要給大家介紹了關(guān)于es6中reduce的基本使用方法，文中通過示例代碼介紹的非常詳細，對大家學習或者使用es6具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧
前言
為啥要把es6 中 reduce 單獨拿出來說呢，因為這個功能實在太騷，值得如此。
reduce() 方法接收一個函數(shù)作為累加器，數(shù)組中的每個值（從左到右）開始縮減，最終計算為一個值。reduce() 方法接受四個參數(shù)：初始值（或者上一次回調(diào)函數(shù)的返回值），當前元素值，當前索引，調(diào)用 reduce() 的數(shù)組。
reduce() 的幾個強大用法：
數(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 ]
計算數(shù)組中每個元素出現(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.方法二
當然，對于數(shù)組去重，也可以直接使用es6的…[拓展運算符] + Set 實現(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é)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對腳本之家的支持。
相關(guān)文章
今天小編就為大家分享一篇關(guān)于JavaScript之解構(gòu)賦值的理解，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
事件綁定之小測試 onclick && addEventListener
昨晚回去后，和雷子討論如何才能“檢測”到頁面上某個元素都綁定了哪些事件監(jiān)聽函數(shù)，第一感覺就是應(yīng)該從瀏覽器入手，比如FF，或者Chrome等2011-07-07
仿QQ郵箱的彈出層，彈出確認框，主要是用火狐的firebug把html和css扣了下來，沒有做封裝,就定義了一個拖動事件. 大家可以封裝自己的彈出窗，嘿嘿！2015-04-04
JavaScript中利用for循環(huán)遍歷數(shù)組
這篇文章主要為大家詳細介紹了JavaScript中利用for循環(huán)遍歷數(shù)組，最好不要使用for in遍歷，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
javascript游戲開發(fā)之《三國志曹操傳》零部件開發(fā)(二)人物行走的實現(xiàn)
上一講我們談到了如何讓靜態(tài)人物變?yōu)閯討B(tài)，今天我們來談?wù)勅绾问谷宋镆苿?，感興趣的朋友可以了解下哦，順便鞏固一下animate方法的應(yīng)用，希望本文對你有所幫助2013-01-01
這篇文章主要介紹了如何使用?JavaScript?讀取文件,您可以使用?JavaScript?File?API?加載選定文件的內(nèi)容，本節(jié)介紹?File?API?的基本用法，需要的朋友可以參考下2022-06-06
這篇文章主要介紹了prototype與__proto__區(qū)別詳細介紹的相關(guān)資料,需要的朋友可以參考下2017-01-01
JS常見DOM節(jié)點操作示例【創(chuàng)建 ，插入，刪除，復(fù)制，查找】
這篇文章主要介紹了JS常見DOM節(jié)點操作,結(jié)合實例形式分析了JavaScript針對DOM節(jié)點的創(chuàng)建 ，插入，刪除，復(fù)制，查找等操作相關(guān)函數(shù)與使用技巧,需要的朋友可以參考下2018-05-05
這篇文章主要介紹了js操作cookie保存瀏覽記錄的方法,涉及JavaScript使用cookie記錄并保存用戶瀏覽網(wǎng)頁信息的實現(xiàn)技巧,需要的朋友可以參考下2015-12-12
這篇文章主要介紹了VUE基于NUXT的SSR 服務(wù)端渲染，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11