需求一

假设有一个数组,需要对其中的元素进行求和。

const numbers = [1, -1, 2, 3];

传统写法,使用for循环求和

const numbers = [1, -1, 2, 3];

let sum = 0;

for(let n of numbers)
sum += n; console.log(sum); // 5

使用reduce求和

reduce()函数的第一个参数是一个callback function,这个function中有2个参数,accumulator相当于sum,currentValue 是当前循环中数组的元素值。

第二个参数是 accumulator 的初始值。

返回值是一个数值。

const sum = numbers.reduce((accumulator, currentValue) => {
console.log('a', accumulator);
console.log('c', currentValue);
return accumulator + currentValue; }, 0); console.log(sum); // 5

这其中发生了什么呢?

每次循环的结果是:

round 1   a = 0, c = 1 => a = 0+1 = 1
round 2 a = 1, c = -1 => a = 0
round 3 a = 0, c = 2 => a = 2
round 4 a = 2, c = 3 => a = 5

更简化的写法

也可以不给 accumulator 的初始值,那么它的初始值就是数组的第一个元素, 这样可以少一次循环。

        const sum = numbers.reduce((accumulator, currentValue) => {
console.log('a', accumulator);
console.log('c', currentValue);
return accumulator + currentValue;
});

把箭头函数简化为一行

        const sum = numbers.reduce(
(accumulator, currentValue) => accumulator + currentValue
);
console.log(sum);

需求二

假设有一个数组,其中的既有正数,又有负数,分别对正负数求和,同时返回求和结果。

        const nums = [10, -12, 30, -1, -8, 0, 14, -33, 20];

同时返回结果,那么返回值应该是一个对象,其中包含正数之和、负数之和。

{
plus: 0,
minus: 0
}

完整解决方案:

        const nums = [10, -12, 30, -1, -8, 0, 14, -33, 20];

        function sumPlusMinus(arr) {
return arr.reduce((acc, currentValue) => (
{
plus: currentValue > 0 ? acc.plus + currentValue : acc.plus,
minus: currentValue < 0 ? acc.minus + currentValue : acc.minus
} ), { plus: 0, minus: 0 });
} console.log(sumPlusMinus(nums));

JavaScript Array Reduce用于数组求和的更多相关文章

  1. reduce实现数组求和

    对于实现数组求和,我们常用的思路是通过for.while,对数组进行迭代,依次将他们的值加起来,下面列举常用的两种方法 第一种: var arr = [1,2,3,4,5,6]; Array.prot ...

  2. Javascript刷题 》数组求和

    计算给定数组 arr 中所有元素的总和 输入描述: 数组中的元素均为 Number 类型 输入例子: sum([ 1, 2, 3, 4 ]) 输出例子: 10 解题方法 1.定义一个变量,将前面的和后 ...

  3. JavaScript - Array对象,数组

    1. 创建数组 方式1. new关键字 var arr = new Array(1, 2, 3); 方式2. 使用字面量创建数组对象 var arr = [1, 2, 3]; 2. 检测一个对象是否是 ...

  4. JavaScript学习笔记:数组reduce()和reduceRight()方法

    很多时候需要累加数组项的得到一个值(比如说求和).如果你碰到一个类似的问题,你想到的方法是什么呢?会不会和我一样,想到的就是使用for或while循环,对数组进行迭代,依次将他们的值加起来.比如: v ...

  5. Javascript数组求和的方法总结 以及由斐波那契数列得到的启发

    一次面试中,面试官要求用三种不同的Javascript方法进行一个数字数组的求和,当时思来想去只想到了使用循环这一种笨方法,因此面试比较失败,在这里总结了六种Javascript进行数组求和的方法,以 ...

  6. JavaScript Array 数组方法汇总

    JavaScript Array 数组方法汇总 1. arr.push() 从后面添加元素,返回值为添加完后的数组的长度 var arr = [1,2,3,4,5] console.log(arr.p ...

  7. JavaScript Array(数组)对象

    一,定义数组 数组对象用来在单独的变量名中存储一系列的值. 创建 Array 对象的语法: new Array(); new Array(size); new Array(element0, elem ...

  8. js 数组详解(javascript array)

    Array Array 对象用于在单个的变量中存储多个值. 构造函数: 1)   new Array(); 2)   new Array(size); 3)   new Array(element0, ...

  9. javascript中的稀疏数组(sparse array)和密集数组

    学习underscore.js数组相关API的时候.遇到了sparse array这个东西,曾经没有接触过. 这里学习下什么是稀疏数组和密集数组. 什么是密集数组呢?在java和C语言中,数组是一片连 ...

随机推荐

  1. 给DataFrame的列命名或重命名

    1.读取文件的时候重命名 names = new_col,可以在读取文件的时候,给出新列名. new_col = ['new1', 'new2',... , 'newn'] pd.read_csv(' ...

  2. AOP xml 配置

    applicationContext.xml <!--切面Bean--> <bean id ="aspectbean" class='"con.soft ...

  3. HTML+CSS知识总结2

    一.position:absolute和float属性的异同 相同点:两者都可以让元素脱离文档流,并可设置宽高 不同点:float仍会占据位置,而position:absolute会覆盖文档流中其他元 ...

  4. jQuery_CSS类操作

    下面讲述jQuery操作css类,进行类的添加,移除,以及前两项功能的结合操作. <!DOCTYPE html> <html> <head> <meta ch ...

  5. sqli-labs(39)

    0X01 这关和38关一样 ?id= and =1 正确 ?id=1 and 1=2 错误 不需要闭合 构造语法 0X02 ?id=;insert into users values(,"z ...

  6. 关于Jdk7与Jdk8对Collections进行分组的区别

    先准备一点数据: public class User {    private Integer id;    private String type;    private String name;  ...

  7. spring框架中AOP思想与各种配置详解

    Spring中提供两种AOP支持:   1.基于代理的经典AOP   2.Aspectj注解配置AOP    首先我们先了解什么是AOP,AOP(Aspect Oriented Programming ...

  8. 客户端浏览器向服务器发起http请求的全过程

    http协议的参考:http://blog.csdn.net/hefeng6500/article/details/75081047 (1)浏览器先搜索自身的DNS缓存 (2)操作系统搜索自身的DNS ...

  9. ORACLE 11GR2常用参数(含隐含参数)设置

    ORACLE 11GR2常用参数(含隐含参数)设置如下: alter system set "_PX_use_large_pool" = true scope=spfile;alt ...

  10. web安全之如何防止CSRF跨站请求伪造(转载)

    https://www.cnblogs.com/blibli/p/7658168.html CSRF(Cross-site request forgery)跨站请求伪造,也被称为“One Click ...