數組的reduce用法

琛ｈ。發布于2019-08-23 13:41 / 2070人閱讀

摘要：定義方法接收一個函數作為累加器，數組中的每個值從左到右開始縮減，最終計算為一個值。對空數組是不會執行回調函數的。

定義

reduce() 方法接收一個函數作為累加器，數組中的每個值（從左到右）開始縮減，最終計算為一個值。對空數組是不會執行回調函數的。

語法

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

參數

var arr = [2,4,6,7,3];
// 前面兩個是必須, 0表示傳遞給函數的初始值
arr.reduce((total, currentValue, currentIndex, arr) => {
         // 這里total指初始值, 或者計算結束后的返回值,
          console.log(total);              // 0
          console.log(currentValue);       // 2
          console.log(currentIndex);       // 0
          console.log(arr);                // [2,4,6,7,3]
}, 0)

幾種常見用法

1、計算數組總數

var res = arr.reduce((total,num) => {
        return total + num;
    })
    console.log(res)   // 22

2、合并二維數組

var red = [[0,1],[2,3],[4,5]].reduce((a,b) => {
            return a.concat(b)
    },[])
    console.log(red)   // [0, 1, 2, 3, 4, 5]

3、統計一個數組中有多少個不重復的單詞

function getWordCnt1() {
     return reg.reduce((prev, next) => {
           prev[next] = (prev[next] + 1) || 1;
           return prev;
    }, {})
}
console.log(getWordCnt1())    // {apple: 2, orange: 3, pear: 1}

4、去重

var reh = [2,4,5,3,2,4,1]
function distinct(reh) {
     return reh.reduce((prev, cur) => {
           return prev.indexOf(cur) != -1? prev : [...prev, cur]
     },[])
}
console.log(distinct(reh))   // [2,4,5,3,1]

擴展

前幾天刷脈脈,看到一個面試題,要求把數組里name相等的去重,并且menu求重復的總和

var arr = [
       {name: "a", menu: 2},
       {name: "a", menu: 21},
       {name: "g", menu: 2},
       {name: "g", menu: 3},
       {name: "g", menu: 3},
       {name: "c", menu: 4},
       {name: "c", menu: 44},
]

如果用reduce做也是非常簡單，直接上代碼

let reg= Object.entries(arr.reduce((result,obj) => {
            result[obj.name] = (result[obj.name] + obj.menu) || obj.menu
            return result;
        }, {})).map(obj => {
            return {
                name: obj[0],
                menu: obj[1]
    }    
})
console.log(reg)   // [{name: "a", menu: 23}, {name: "g", menu: 8}, {name: "c", menu: 48}]

總結

reduce(callback,initiaValue)會傳入兩個變量，回調函數(callback)和初始值(initiaValue)
如果沒有傳入初始值，則 reduce 方法會對從第二個元素開始的每個元素調用callback函數
如果提供了初始值（initiaValue）,則 reduce 方法會對數組中的每個元素調用一次callback函數

GPU云服務器云服務器 reduce用法數組indexof的用法數組方法reduce js數組in的用法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99375.html

淺談JS中 reduce() 的用法

摘要：一語法其中，表示將要原數組表示上一次調用回調時的返回值，或者初始值表示當前正在處理的數組元素表示當前正在處理的數組元素的索引，若提供值，則索引為，否則索引為表示初始值。一、語法 arr.reduce(function(prev,cur,index,arr){...}, init); 其中，arr 表示將要原數組；prev 表示上一次調用回調時的返回值，或者初始值 init;cur 表...

gplane 2019-08-23 16:41 評論0 收藏0
js中reduce的神奇用法

摘要：最近經常在項目中經常看到別人用處理數據，很是牛掰，很夢幻，不如自己琢磨琢磨。初始值或者計算結束后的返回值。當前元素所屬的數組對象。傳遞給函數的初始值，相當于的初始值。 showImg(https://user-gold-cdn.xitu.io/2018/9/4/165a52f4bf93fbf4?w=6000&h=3000&f=jpeg&s=3043490); 最近經常在項目中經常看到別...

岳光 2019-08-23 11:43 評論0 收藏0
js中reduce的用法

摘要：第一天寫文章，心里難免有些小激動，希望能堅持下去，有輸出才有更好的輸入。用戶選擇完之后，我會得到一個時間戳的數組這里呢我們先需要看一下的語法。第一天寫文章，心里難免有些小激動，希望能堅持下去，有輸出才有更好的輸入。 reduce這個方法最初我是在面試題里看見的有一個長度為100的數組，請以優雅的方式求出該數組的前10個元素之和？答案如下 var a = [1, 2, 3, 4, 5...

i_garfileo 2019-08-22 11:19 評論0 收藏0
js數組方法forEach、map、filter、reduce、every、some總結

摘要：不會改變原數組，它返回過濾后的新數組。打印到控制臺成功的收集到里面錯誤的收集到里面。語法參數回調當前的當前的索引值這個數組對象回調的指向用法場景這個一般就用在，判斷數組的每個元素是否符合條件。首先是函數概述：map():返回一個新的Array，每個元素為調用func的結果 filter():返回一個符合func條件的元素數組 some():返回一個boolean，判斷是否有元素是否符...

CocoaChina 2019-08-26 12:11 評論0 收藏0
Javascript 數組方法全解析（包含es6,es7）

摘要：數組方法全解析包含數組自帶屬性返回創建數組對象的原型函數返回數組對象的長度這個是老熟人了，可以增加數組的原型方法和屬性，這個放在后面的繼承中講數組的方法首先讓我們看看數組的對象屬性。 Javascript 數組方法全解析（包含es6） 1. 數組自帶屬性 constructor //返回創建數組對象的原型函數 length //返回數組對象的長度 prototype //這個是老...

zxhaaa 2019-08-22 14:00 評論0 收藏0