ES5 数组方法reduce
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的更多相关文章
- 几个关于js数组方法reduce的经典片段
以下是个人在工作中收藏总结的一些关于javascript数组方法reduce的相关代码片段,后续遇到其他使用这个函数的场景,将会陆续添加,这里作为备忘. javascript数组那么多方法,为什么我要 ...
- JavaScript数组方法--reduce、reduceRIght、reverse
今天写的reduce是比较复杂的一个数组方法,其实在这之前我也用过reduce,可是每次用起来总感觉不那么顺手,主要还是因为不熟,对reduce本身不熟.首先reduce这个单词翻译为中文,不那么直观 ...
- Javascript中数组方法reduce的妙用之处
Javascript数组方法中,相比map.filter.forEach等常用的迭代方法,reduce常常被我们所忽略,今天一起来探究一下reduce在我们实战开发当中,能有哪些妙用之处,下面从red ...
- JavaScript数组方法reduce解析
Array.prototype.reduce() 概述 reduce()方法是数组的一个实例方法(共有方法),可以被数组的实例对象调用.reduce() 方法接收一个函数作为累加器(accumulat ...
- ES5 数组方法map
概述 map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组. 语法 array.map(callback[, thisArg]) 参数 callback 原数组中的元素经 ...
- ES5 数组方法forEach
ES6已经到了非学不可的地步了,对于ES5都不太熟的我决定是时候学习ES5了. 1. js 数组循环遍历. 数组循环变量,最先想到的就是 for(var i=0;i<count;i++)这样的 ...
- ES5数组方法
先标明参考出处: http://blog.csdn.net/codebistu/article/details/8049705 本来写过一篇有关数组新方法的(详见: [转]JavaScript函数和数 ...
- ES5 数组方法every和some
Array.prototype.every() 概述 every() 方法测试数组的所有元素是否都通过了指定函数的测试. 语法 arr.every(callback[, thisArg]) 参数 ca ...
- js数组高阶方法reduce经典用法代码分享
以下是个人在工作中收藏总结的一些关于javascript数组方法reduce的相关代码片段,后续遇到其他使用这个函数的场景,将会陆续添加,这里作为备忘. javascript数组那么多方法,为什么我要 ...
随机推荐
- [python] 线程简介
参考:http://www.cnblogs.com/aylin/p/5601969.html 我是搬运工,特别感谢张岩林老师! python 线程与进程简介 进程与线程的历史 我们都知道计算机是由硬件 ...
- listView获取item的Edit内容,listView中的edit内容在滚动时自动赋值了前面的内容
Today I am going to explain how to create a ListView with EditText and why will we need a TextWatche ...
- 【Mysql】权限管理
mysql权限介绍 mysql中存在4个控制权限的表,分别为user表,db表,tables_priv表,columns_priv表. mysql权限表的验证过程为: 1.先从user表中的Host, ...
- Unity5 如何做资源管理和增量更新
工具 Unity 中的资源来源有三个途径:一个是Unity自动打包资源,一个是Resources,一个是AssetBundle. Unity自动打包资源是指在Unity场景中直接使用到的资源会随着场景 ...
- SQL优化笔记—CPU优化
补充:常规服务器动态管理对象包括,下面有些资料可能会应用到 dm_db_*:数据库和数据库对象dm_exec_*:执行用户代码和关联的连接dm_os_*:内存.锁定和时间安排dm_tran_*:事务和 ...
- 『TCP/IP详解——卷一:协议』读书笔记——05
2013-08-19 22:35:57 2.6 PPP:点对点协议 PPP点对点协议修改了SLIP协议中的所有缺陷: 1. 在串联链路上封装IP数据报的方法.PPP即支持数据为8位&无奇偶检验 ...
- NOIP 2015 信息传递
kawayi 题目描述 有n个同学(编号为1到n)正在玩一个信息传递的游戏.在游戏里每人都有一个固定的信息传递对象,其中,编号为i的同学的信息传递对象是编号为Ti同学. 游戏开始时,每人都只知道自己的 ...
- “System.Web.UI.WebControls.Literal”不允许使用子控件
今天在写下面的代码时遭遇错误——“System.Web.UI.WebControls.Literal”不允许使用子控件('System.Web.UI.WebControls.Literal' does ...
- property和attribute的区别
property是指类向外提供的数据区域.而attribute则是描述对象在编译时或运行时属性的,分为固有型和用户自定义型,其中用户自定义型可以利用Reflection在运行期获取.这两者是有本质区别 ...
- KALI LINUX WEB 渗透测试视频教程—第十九课-METASPLOIT基础
原文链接:Kali Linux Web渗透测试视频教程—第十九课-metasploit基础 文/玄魂 目录 Kali Linux Web 渗透测试视频教程—第十九课-metasploit基础..... ...