reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始合并,最终为一个值。

参数

callback
执行数组中每个值的函数,包含四个参数
previousValue
上一次调用回调返回的值,或者是提供的初始值(initialValue)
currentValue
数组中当前被处理的元素
index
当前元素在数组中的索引
array
调用 reduce 的数组
initialValue
作为第一次调用 callback 的第一个参数。

描述

reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(或者上一次回调函数的返回值),当前元素值,当前索引,调用 reduce 的数组。

回调函数第一次执行时,previousValue 和 currentValue 可以是一个值,如果 initialValue 在调用 reduce 时被提供,那么第一个 previousValue 等于 initialValue ,并且currentValue 等于数组中的第一个值;如果initialValue 未被提供,那么previousValue 等于数组中的第一个值,currentValue等于数组中的第二个值。

如果数组为空并且没有提供initialValue, 会抛出TypeError 。如果数组仅有一个元素(无论位置如何)并且没有提供initialValue, 或者有提供initialValue但是数组为空,那么此唯一值将被返回并且callback不会被执行。

例如执行下面的代码

[0,1,2,3,4].reduce(function(previousValue, currentValue, index, array){
return previousValue + currentValue;
});

回调被执行四次,每次的参数和返回值如下表:

  previousValue currentValue index array return value
first call 0 1 1 [0,1,2,3,4] 1
second call 1 2 2 [0,1,2,3,4] 3
third call 3 3 3 [0,1,2,3,4] 6
fourth call 6 4 4 [0,1,2,3,4] 10

reduce 的返回值是回调函数最后一次被调用的返回值(10)。

如果把初始值作为第二个参数传入 reduce,最终返回值变为20,结果如下:

[0,1,2,3,4].reduce(function(previousValue, currentValue, index, array){
return previousValue + currentValue;
}, 10);
  previousValue currentValue index array return value
第一次调用 10 0 0 [0,1,2,3,4] 10
第二次调用 10 1 1 [0,1,2,3,4] 11
第三次调用 11 2 2 [0,1,2,3,4] 13
第四次调用 13 3 3 [0,1,2,3,4] 16
第五次调用 16 4 4 [0,1,2,3,4] 20

例子

例子:将数组所有项相加

var total = [0, 1, 2, 3].reduce(function(a, b) {
return a + b;
});
// total == 6

例子: 数组扁平化

var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
return a.concat(b);
});
// flattened is [0, 1, 2, 3, 4, 5]

兼容旧环境(Polyfill)

Array.prototype.reduce 被添加到 ECMA-262 标准第 5 版;因此可能在某些实现环境中不被支持。可以将下面的代码插入到脚本开头来允许在那些未能原生支持 reduce 的实现环境中使用它。

if ('function' !== typeof Array.prototype.reduce) {
Array.prototype.reduce = function(callback, opt_initialValue){
'use strict';
if (null === this || 'undefined' === typeof this) {
// At the moment all modern browsers, that support strict mode, have
// native implementation of Array.prototype.reduce. For instance, IE8
// does not support strict mode, so this check is actually useless.
throw new TypeError(
'Array.prototype.reduce called on null or undefined');
}
if ('function' !== typeof callback) {
throw new TypeError(callback + ' is not a function');
}
var index, value,
length = this.length >>> 0,
isValueSet = false;
if (1 < arguments.length) {
value = opt_initialValue;
isValueSet = true;
}
for (index = 0; length > index; ++index) {
if (this.hasOwnProperty(index)) {
if (isValueSet) {
value = callback(value, this[index], index, this);
}
else {
value = this[index];
isValueSet = true;
}
}
}
if (!isValueSet) {
throw new TypeError('Reduce of empty array with no initial value');
}
return value;
};
}

参考:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

ES5 数组方法reduce的更多相关文章

  1. 几个关于js数组方法reduce的经典片段

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

  2. JavaScript数组方法--reduce、reduceRIght、reverse

    今天写的reduce是比较复杂的一个数组方法,其实在这之前我也用过reduce,可是每次用起来总感觉不那么顺手,主要还是因为不熟,对reduce本身不熟.首先reduce这个单词翻译为中文,不那么直观 ...

  3. Javascript中数组方法reduce的妙用之处

    Javascript数组方法中,相比map.filter.forEach等常用的迭代方法,reduce常常被我们所忽略,今天一起来探究一下reduce在我们实战开发当中,能有哪些妙用之处,下面从red ...

  4. JavaScript数组方法reduce解析

    Array.prototype.reduce() 概述 reduce()方法是数组的一个实例方法(共有方法),可以被数组的实例对象调用.reduce() 方法接收一个函数作为累加器(accumulat ...

  5. ES5 数组方法map

    概述 map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组. 语法 array.map(callback[, thisArg]) 参数 callback 原数组中的元素经 ...

  6. ES5 数组方法forEach

    ES6已经到了非学不可的地步了,对于ES5都不太熟的我决定是时候学习ES5了. 1.  js 数组循环遍历. 数组循环变量,最先想到的就是 for(var i=0;i<count;i++)这样的 ...

  7. ES5数组方法

    先标明参考出处: http://blog.csdn.net/codebistu/article/details/8049705 本来写过一篇有关数组新方法的(详见: [转]JavaScript函数和数 ...

  8. ES5 数组方法every和some

    Array.prototype.every() 概述 every() 方法测试数组的所有元素是否都通过了指定函数的测试. 语法 arr.every(callback[, thisArg]) 参数 ca ...

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

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

随机推荐

  1. Python学习笔记异常

    在程序代码中,可能会有各种错误的情况出现,且产生错误的结果是后面的代码都无法执行,即使是一点无关紧要的错误,如图: 在这样的情况下,我们需要异常处理,对程序代码中的错误抛出异常信息,且不影响后面的代码 ...

  2. 20145225《Java程序设计》实验一 Java开发环境的熟悉(Linux + Eclipse)

    20145225<Java程序设计> 实验一 Java开发环境的熟悉(Linux + Eclipse) 实验内容 1.使用JDK编译.运行简单的Java程序: 2.使用Eclipse 编辑 ...

  3. socket进阶

    socketserver(在Python2.*中的是SocketServer模块)是标准库中一个高级别的模块.用于简化网络客户与服务器的实现(在前面使用socket的过程中,我们先设置了socket的 ...

  4. PHP字符处理基础知识

    <?php class StrDemo { function StrTest() { $s = "abcd"; print '$s length:'.strlen($s).& ...

  5. OWIN的理解和实践(二) – Host和Server的开发

    对于开发人员来说,代码就是最好的文档,如上一篇博文所说,下面我们就会基于Kanata项目的一些具体调用代码,来进一步深入理解OWIN的实现和作用. 今天我们先针对Host和Server来实现一个简单的 ...

  6. WPF快速入门系列(3)——深入解析WPF事件机制

    一.引言 WPF除了创建了一个新的依赖属性系统之外,还用更高级的路由事件功能替换了普通的.NET事件. 路由事件是具有更强传播能力的事件——它可以在元素树上向上冒泡和向下隧道传播,并且沿着传播路径被事 ...

  7. 讨厌的 StorageFolder.GetFileAsync 异常。

    我们在做WinRT开发的时候,会偶到这样一个场景. 获取一个文件,当他不存在的时候,我们做一些事情. 如果当不存在,我们就创建这么一个文件,那就很好办了. var file = Application ...

  8. CoreCLR on Mac:体验managed exception handling

    C#测试代码: using System; class Program { static void A() { try { Console.WriteLine("Throwing an ex ...

  9. 微软BI 之SSIS 系列 - 使用 Script Component Destination 和 ADO.NET 解析不规则文件并插入数据

    开篇介绍 这一篇文章是 微软BI 之SSIS 系列 - 带有 Header 和 Trailer 的不规则的平面文件输出处理技巧 的续篇,在上篇文章中介绍到了对于这种不规则文件输出的处理方式.比如下图中 ...

  10. C#修改文件权限

    用户名的格式为:Local MachineName\AccountName 机器名可通过System.Environment.MachineName获取. 获取一个文件的权限(帐号)列表 FileSe ...