數(shù)組的reduce用法

?。?。發(fā)布于2019-08-23 13:41 / 2098人閱讀

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

定義

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

語法

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

參數(shù)

var arr = [2,4,6,7,3];
// 前面兩個是必須, 0表示傳遞給函數(shù)的初始值
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、計算數(shù)組總數(shù)

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

2、合并二維數(shù)組

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、統(tǒng)計一個數(shù)組中有多少個不重復的單詞

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]

擴展

前幾天刷脈脈,看到一個面試題,要求把數(shù)組里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)會傳入兩個變量，回調函數(shù)(callback)和初始值(initiaValue)
如果沒有傳入初始值，則 reduce 方法會對從第二個元素開始的每個元素調用callback函數(shù)
如果提供了初始值（initiaValue）,則 reduce 方法會對數(shù)組中的每個元素調用一次callback函數(shù)

云服務器 GPU云服務器 reduce用法數(shù)組indexof的用法數(shù)組方法reduce js數(shù)組in的用法

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

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

淺談JS中 reduce() 的用法

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

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

摘要：最近經常在項目中經常看到別人用處理數(shù)據(jù)，很是牛掰，很夢幻，不如自己琢磨琢磨。初始值或者計算結束后的返回值。當前元素所屬的數(shù)組對象。傳遞給函數(shù)的初始值，相當于的初始值。 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的用法

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

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

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

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

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

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