• 前言

阅读文章之前先来考虑一个问题,如何去实现迭代一个数组,并且把它累加到一个值中?首先能够想到的是设置一个初始值,然后通过循环遍历这个数组,将数组中的值一项一项累加起来,然后返回这个设置的值就是最终的结果。这样实现起来也不算太复测,不需要写太多的代码,这篇就介绍一个数组的进阶一点的用法——reduce()的用法。

  • 正文
  1. reduce()的基本概念

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

分析:reduce()针对非空数组执行操作,接收一个回调函数,这个函数作为一个累加器,定义累加的规则,然后循环遍历进行累加,返回最终结果,需要注意该方法没有创建新数组,同时也不会改变原数组,返回的结果是一个数值(该数值根据返回结果而定)。

根据上面的理解,先用自己的方法模仿下实现一个数组的累加。

        var arr=[1,2,3,4]
var rules=function(a,b){
return a+b
}
function myreduce(array,callback){
//校验
if (!Array.isArray(array)) {
throw('调用对象必须是一个数组');
}
if (typeof callback != 'function') {
throw('累计器必须是一个函数类型');
}
let initialValue=0//定义初始值为0
if (array.length === 0) {
return initialValue;
}
for (let index = 0; index < array.length; index++) {
initialValue=callback(initialValue,array[index])
}
return initialValue
}
var totalValue =myreduce(arr,rules)
console.log(totalValue)//输出10

    2.reduce()的使用语法

     /**
* @param function 必要参数,用于执行每个数组元素的函数
* @param initialValue 可选参数,传递给函数的初始值
*/
array.reduce(
/**
* @param total 必要参数,初始值或计算结束后的结果。
* @param currentValue 必要参数,当前元素
* @param currentIndex 可选参数,当前参数的下标
* @param arr 可选参数,数组对象
*/
function(total, currentValue, currentIndex, arr),
initialValue
);

    分析:reduce()被一个非空数组调用(如果被非空数组调用返回undefined),接收两个参数,一个callback和一个设置的累加初始值,需要注意的是如果给reduce()传入了初始值,则在该值的基础是做累加操作,如果初始值不存在,则total为数组的第一项,currentValue为下一项,在第一项的基础上累加,相当于设置初始值为0,然后逐步累加。

3.常见使用方法

用reduce方法实现求数组的和

        var arr=[1,2,3,4]
var total=arr.reduce((a,b)=>a+b)
console.log(total)//输出10

计算数组中元素出现的次数

        let arr = ['A', 'B', 'C', 'B', 'A'];
let times = arr.reduce((pre,cur)=>{
if(cur in pre){
pre[cur]++
}else{
pre[cur] = 1
}
return pre
},{})
console.log(times);//输出{A:2,B:2,C:1}

将二维数组转成一维

    let arr = [[0, 1], [2, 3], [4, 5]]
let newArr = arr.reduce((pre,cur)=>{
return pre.concat(cur)
},[])
console.log(newArr); // [0, 1, 2, 3, 4, 5]
//同样可以实现多维到一维

    求对象中属性的总和,如:求班级同学总分

         let info=[
{
name:"小明",
score:100
},{
naem:"小红",
score:110
},
{
name:"小强",
score:120
}
]
let totalScore=info.reduce((pre,cur)=>{
return pre+cur.score
},0)
console.log(totalScore);//输出330

    数组去重

    let arr = [1,2,3,4,4,1]
    let newArr = arr.reduce((pre,cur)=>{
    if(!pre.includes(cur)){
     return pre.concat(cur)
     }else{
     return pre
     }
    },[])
    console.log(newArr);// [1, 2, 3, 4]

    以上就是本文的全部内容,希望给读者带来些许的帮助和进步,方便的话点个关注,小白的成长之路会持续更新一些工作中常见的问题和技术点。

js--数组的reduce()方法的使用介绍的更多相关文章

  1. js数组高阶方法reduce经典用法代码分享

    以下是个人在工作中收藏总结的一些关于javascript数组方法reduce的相关代码片段,后续遇到其他使用这个函数的场景,将会陆续添加,这里作为备忘. javascript数组那么多方法,为什么我要 ...

  2. JavaScript数组的reduce方法详解

    数组经常用到的方法有push.join.indexOf.slice等等,但是有一个经常被我们忽略的方法:reduce,这个方法简直强大的不要不要的. 我们先来看看这个方法的官方概述:reduce()  ...

  3. js数组去重的方法(转)

    JS数组去重的几种常见方法 一.简单的去重方法 // 最简单数组去重法 /* * 新建一新数组,遍历传入数组,值不在新数组就push进该新数组中 * IE8以下不支持数组的indexOf方法 * */ ...

  4. js数组定义和方法 (包含ES5新增数组方法)

    数组Array 1. 数组定义 一系列数据的集合成为数组.数组的元素可以为任何类型的数据(包括数组,函数等),每个元素之间用逗号隔开,数组格式:[1,2,3]. 2. 数组创建方式 (1) 字面量方法 ...

  5. JS —— 数组与字符串方法

    数组 1. 基本方法  1)Array.prototype.unshift(item1,item2,item3...) 描述: 在数组的前面添加元素,一次可以传入多个参数. 注意:元素会根据当前传入的 ...

  6. JS 数组常用的方法

    数组常用的方法: x.toString()方法:任何对象都有toString方法.        将任何对象转为字符串. 一般不主动调用,系统在需要时自动调用 x.valueOf()方法:同toStr ...

  7. js数组的forEach方法能不能修改数组的值

    如果要使用数组的forEach()方法对其改值时,需要直接通过arr[i]这种方式来更改. 请看下面代码: // 数组改值 let arr = [1,3,5,7,9]; arr.forEach(fun ...

  8. Js 数组的各种方法及操作

    一.数组去重 var arr = [0,1,20,3,0,45,6,0]; Array.prototype.unrepeat = function(){ var array = []; for(var ...

  9. js中的数组对象排序(方法sort()详细介绍)

    定义和用法 sort() 方法用于对数组的元素进行排序. 语法    arrayObject.sort(sortby) 参数sortby:可选.规定排序顺序.必须是函数. 返回值 对数组的引用.请注意 ...

随机推荐

  1. JZOJ 2020.10.6 【NOIP2017提高A组模拟9.7】简单无向图

    简单无向图 题目 Description Input Output Sample Input 输入1: 4 2 1 1 2 输入2: 10 2 2 2 2 1 1 2 1 1 2 Sample Out ...

  2. java并发编程实战《四》互斥锁(下)

    互斥锁(下):如何用一把锁保护多个资源?    一把锁可以保护多个资源,但是不能用多把锁来保护一个资源. 那如何保护多个资源? 当我们要保护多个资源时,首先要区分这些资源是否存在关联关系. 如下代码 ...

  3. moviepy音视频剪辑:视频半自动追踪人脸打马赛克

    一.引言 在<moviepy1.03音视频剪辑:使用manual_tracking和headblur实现追踪人脸打马赛克>介绍了使用手动跟踪跟踪人脸移动轨迹和使用headblur对人脸进行 ...

  4. PyQt+moviepy音视频剪辑实战文章目录

    ☞ ░ 前往老猿Python博文目录 ░ 本专栏为moviepy音视频剪辑合成相关内容介绍的免费专栏,对应的收费专栏为<moviepy音视频开发专栏>. 一.moviepy基础能力系统介绍 ...

  5. 转:HTTP协议简介与在python中的使用详解

    1. 使用谷歌/火狐浏览器分析 在Web应用中,服务器把网页传给浏览器,实际上就是把网页的HTML代码发送给浏览器,让浏览器显示出来.而浏览器和服务器之间的传输协议是HTTP,所以: HTML是一种用 ...

  6. volatility内存取证学习

    工具下载: Linux环境 apt-get install volatility 各种依赖的安装,(视情况安装) #Distorm3:牛逼的反编译库 pip install distorm3 ​ #Y ...

  7. python中的万能密码

    在php中,我们经常见到这样的语句 if(isset($_GET['id'])) { $id=$_GET['id']; //logging the connection parameters to a ...

  8. vulnstack靶机实战01

    前言 vulnstack是红日安全的一个实战环境,地址:http://vulnstack.qiyuanxuetang.net/vuln/detail/2/最近在学习内网渗透方面的相关知识,通过对靶机的 ...

  9. Python实现自动整理文件

    前言 工作上的文档和资料好几个月没整理了,因为平常太忙都是随手往桌面丢.整个桌面杂乱无章全是文档和资料.几乎快占满整个屏幕了,所有我必须要整理一下了.但是手动整理太费时间了,于是我想到了python. ...

  10. ⑤SpringCloud 实战:引入Zuul组件,开启网关路由

    这是SpringCloud实战系列中第4篇文章,了解前面第两篇文章更有助于更好理解本文内容: ①SpringCloud 实战:引入Eureka组件,完善服务治理 ②SpringCloud 实战:引入F ...