数组的reduce用法

琛ｈ。发布于2019-08-23 13:41 / 1982人阅读

摘要：定义方法接收一个函数作为累加器，数组中的每个值从左到右开始缩减，最终计算为一个值。对空数组是不会执行回调函数的。

定义

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函数

私有云云服务器 reduce用法数组indexof的用法数组方法reduce js数组in的用法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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