欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

es6中reduce的基本使用方法

 更新時間:2019年09月10日 11:05:34   作者:一只大橘  
這篇文章主要給大家介紹了關(guān)于es6中reduce的基本使用方法,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用es6具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧

前言

為啥要把es6 中 reduce 單獨拿出來說呢,因為這個功能實在太騷,值得如此。

reduce() 方法接收一個函數(shù)作為累加器,數(shù)組中的每個值(從左到右)開始縮減,最終計算為一個值。reduce() 方法接受四個參數(shù):初始值(或者上一次回調(diào)函數(shù)的返回值),當(dāng)前元素值,當(dāng)前索引,調(diào)用 reduce() 的數(shù)組。

reduce() 的幾個強(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 ]

計算數(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.方法二

當(dāng)然,對于數(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)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,謝謝大家對腳本之家的支持。

相關(guān)文章

  • javascript實現(xiàn)一款好看的秒表計時器

    javascript實現(xiàn)一款好看的秒表計時器

    這篇文章主要為大家詳細(xì)介紹了一款好看的秒表計時器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-09-09
  • JS 進(jìn)度條效果實現(xiàn)代碼整理

    JS 進(jìn)度條效果實現(xiàn)代碼整理

    進(jìn)度條效果實現(xiàn)代碼,有助于緩解頁面顯示慢的頁面,給用戶一個等待時間的效果
    2011-05-05
  • JS往數(shù)組中添加項性能分析

    JS往數(shù)組中添加項性能分析

    這篇文章主要介紹了JS往數(shù)組中添加項性能分析的相關(guān)資料,需要的朋友可以參考下
    2015-02-02
  • javascript實現(xiàn)頁面內(nèi)關(guān)鍵詞高亮顯示代碼

    javascript實現(xiàn)頁面內(nèi)關(guān)鍵詞高亮顯示代碼

    關(guān)鍵詞高亮想必大家對它都不陌生吧,應(yīng)用也比較廣泛的,下面為大家介紹下通過javascript是如何實現(xiàn)頁面內(nèi)關(guān)鍵詞高亮顯示
    2014-04-04
  • js定義類的幾種方法(推薦)

    js定義類的幾種方法(推薦)

    下面小編就為大家?guī)硪黄猨s定義類的幾種方法(推薦)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-06-06
  • 基于JavaScript實現(xiàn)圖片連播和聯(lián)級菜單實例代碼

    基于JavaScript實現(xiàn)圖片連播和聯(lián)級菜單實例代碼

    這篇文章主要介紹了基于JavaScript實現(xiàn)圖片連播和聯(lián)級菜單實例代碼,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
    2017-07-07
  • JS實現(xiàn)圖片數(shù)字時鐘

    JS實現(xiàn)圖片數(shù)字時鐘

    這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)圖片數(shù)字時鐘,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-10-10
  • JS截取字符串的方法詳解

    JS截取字符串的方法詳解

    本文詳細(xì)講解了JS截取字符串的方法,文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-02-02
  • javascript中callee與caller的區(qū)別分析

    javascript中callee與caller的區(qū)別分析

    有些小伙伴可能會問caller,callee 是什么?在javascript 中有什么樣的作用?那么本篇會對于此做一些基本介紹。希望能夠?qū)Υ蠹依斫鈐avascript中的callee與caller有所幫助。
    2015-04-04
  • 簡單了解JavaScript中常見的反模式

    簡單了解JavaScript中常見的反模式

    這篇文章主要介紹了簡單了解JavaScript中常見的反模式,反模式 是指對反復(fù)出現(xiàn)的設(shè)計問題的常見的無力而低效的設(shè)計模式,俗話說就是重蹈覆轍。 這篇文章描述了 JavaScript 中常見的一些反模式,以及避免它們的辦法。,需要的朋友可以參考下
    2019-06-06

最新評論