解析JavaScript数组方法reduce

0人阅读 评论(0) 收藏 举报
分类:

http://www.jb51.net/article/99785.htm转载链接  作者:unclekeith

Array.prototype.reduce()

概述

reduce()方法是数组的一个实例方法(共有方法),可以被数组的实例对象调用。reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值。

语法

arr.reduce(callback[, initialValue]) {}

参数

回调函数中可以传递四个参数。

previousValue:上一次调用回调函数返回的值,或者是提供的初始值(initialValue)

currentValue:数组中当前被处理的元素

currentIndex:当前被处理元素在数组中的索引, 即currentValue的索引.如果有initialValue初始值, 从0开始.如果没有从1开始

array:调用 reduce 的数组

initialValue:可选参数, 作为第一次调用 callback 的第一个参数

返回值

reduce()返回值是最后一次调用回调函数返回的结果

描述

reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:

  1. previousValu 上一次值
  2. currentValue 当前值
  3. currentIndex 当前值的索引
  4. array 数组

回调函数第一次执行时,previousValue 和 currentValue可能是两个不同值其中的一个,如果reduce有initialValue参数,那么 previousValue 等于 initialValue ,并且currentValue 等于数组中的第一个值;如果reduce没有 initialValue 参数,那么previousValue 等于数组中的第一个值,currentValue等于数组中的第二个值。

注意: 如果没有initialValue参数, reduce从index为1开始执行回调函数, 跳过第一个index。 如果有initialValue参数, reduce 将从index为 0 开始执行回调

如果数组是空的并且没有initialValue参数, 将会抛出TypeError错误. 如果数组只有一个元素并且没有初始值initialValue, 或者有initialValue但数组是空的, 这个唯一的值直接被返回而不会调用回调函数。

通常来说提供一个initialValue初始值更安全一点, 因为没有的话会出现如下输出结果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//没有提供initialValue
function foo(){
 return [1,2,3,4,5].reduce((x, y) => x + y); //15
};
console.log(foo.call(this));
function foo(){
 return [].reduce((x, y) => x + y); //TypeError
};
console.log(foo.call(this));
//提供initialValue
function foo(){
 return [].reduce((x, y) => x + y, 0); //0
};
console.log(foo.call(this));

reduce()是如何工作的

1
[0, 1, 2, 3, 4].reduce((previousValue, currentValue, index, array) => previousValue + currentValue);

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

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

如果把初始值作为第二个参数传入 reduce,结果如下,结果如下:

1
[0, 1, 2, 3, 4].reduce((previousValue, currentValue, index, array) => previousValue + currentValue, 10);

最后一次函数调用的返回值 (20) 作为reduce函数的结果被返回

注意:添加了initialValue参数会多调用一次回调函数

例题

将数组所有项相加

1
2
let sum = [0, 1, 2, 3, 4].reduce((x, y) => x + y, 0);
// 10

扁平化一个二维数组

1
2
let arr = [[1, 2], [3, 4], [5, 6]].reduce((x, y) => x.concat(y), []);
// [1, 2, 3, 4, 5, 6]

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!

原文链接:http://www.cnblogs.com/Uncle-Keith/p/6164055.html

查看评论

JavaScript

-
  • 1970年01月01日 08:00

JavaScript数组方法reduce解析

科技优家 2016-12-12 13:40 Array.prototype.reduce 概述 reduce方法是数组的一个实例方法(共有方法),可以被数组的实例对象调用。reduce 方法...
  • u011277123
  • u011277123
  • 2016-12-13 08:39:38
  • 118

Array数组(JS)之map与reduce方法

map// Define the callback function. function AreaOfCircle(radius) { var area = Math.PI * (radius...
  • gx15366039985
  • gx15366039985
  • 2016-12-21 21:07:23
  • 3069

数组reduce()和reduceRight()方法

数组reduce()和reduceRight()方法
  • man_tutu
  • man_tutu
  • 2017-08-22 14:03:35
  • 394

数组方法reduce

reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始合并,最终为一个值。 参数 callback执行数组中每个值的函数,包含四个参数 p...
  • qinchaidaren
  • qinchaidaren
  • 2017-06-10 22:10:37
  • 410

JavaScript reduce用法

reduce 再看reduce的用法。Array的reduce()把一个函数作用在这个Array的[x1, x2, x3...]上,这个函数必须接收两个参数,reduce()把结果继续和序列的下一个元...
  • majishushu
  • majishushu
  • 2017-04-10 21:15:38
  • 1259

javaScript 高阶函数 map/reduce/filter

javaScript 高阶函数 — 一个函数接收另一个函数作为参数的函数。
  • cathar
  • cathar
  • 2016-12-24 17:35:08
  • 975

JavaScript学习笔记十一:高阶函数-map/reduce

JavaScript教程传送门JavaScript的函数其实都指向某个变量。既然变量可以指向函数,函数的参数能接收变量,那么一个函数就可以接收另一个函数作为参数,这种函数就称之为高阶函数。map由于m...
  • downing114
  • downing114
  • 2016-06-25 16:44:41
  • 2119

javascript基础题目

1. 要动态改变层中内容可以使用的方法有(AB ) a)innerHTML b)innerText c)通过设置层的隐藏和显示来实现 d)通过设置层的样式属性的display属性 2. ...
  • weiyastory
  • weiyastory
  • 2016-08-26 19:51:34
  • 2604

高效javascript编程必知的5个数组方法

本文和大家分享的主要是javascript中关于数组最重要的5个方法,一起来看看吧,希望对大家学习javascript有所帮助。   Array.forEach()   .forEach(...
  • qq_32506555
  • qq_32506555
  • 2017-08-01 16:06:41
  • 83
    个人资料
    持之以恒
    等级:
    访问量: 1075
    积分: 122
    排名: 141万+
    文章存档