解析JavaScript数组方法reduce

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初始值更安全一点, 因为没有的话会出现如下输出结果。

//没有提供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()是如何工作的

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

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

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

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

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

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

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

例题

将数组所有项相加

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

扁平化一个二维数组

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

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

赞 (0)

相关推荐

  • Javascript中的数组常用方法解析

    Javascript中的数组常用方法解析

    前言 Array是Javascript构成的一个重要的部分,它可以用来存储字符串.对象.函数.Number,它是非常强大的.因此深入了解Array是前端必修的功课.周五啦,博主的心又开始澎湃了,明儿个周末有木有,又可以愉快的玩耍了. 创建数组 创建数组的基本方式有两种,一种字面量,另一种使用构造函数创建: var arr = [1,2,3]; //字面量的形式创建数组 值与值之间用英文逗号隔开 var arr = [1,2,3]; //字面量的形式创建数组 值与值之间用英文逗号隔开 var ar

  • js数组去重的三种常用方法总结

    第一种是比较常规的方法 思路: 1.构建一个新的数组存放结果 2.for循环中每次从原数组中取出一个元素,用这个元素循环与结果数组对比 3.若结果数组中没有该元素,则存到结果数组中 复制代码 代码如下: Array.prototype.unique1 = function(){ var res = [this[0]]; for(var i = 1; i < this.length; i++){  var repeat = false;  for(var j = 0; j < res.lengt

  • javascript中数组（Array)对象和字符串（String)对象的常用方法总结

    本文实例总结了javascript中数组(Array)对象和字符串(String)对象的常用方法.分享给大家供大家参考,具体如下: 综述:笔者经常将数组的方法和字符串的方法混淆,这里写篇日志,做个区分 1.字符串对象 String是JavaScript中的五种基本类型之一. (1)字符串对象的创建 例1: var str="Hello world"; 或者 var str=new String("Hello world") (2)charAt()方法 charAt(

  • javascript Array 数组常用方法

    (1)基本的数组方法 1.join() Array.join()方法将数组中所有元素都转化为字符串并连接在一起,返回最后生成的字符串.可以自己指定分隔的符号,如果不指定,默认使用逗号 var arr = [1,2,3]; console.log(arr.join());//"1,2,3" console.log(arr.join("-"));//"1-2-3" var a = new Array(10); //长度为10的空数组 组成下边字符串

  • javascript数组常用方法汇总

    本文为大家总结了javascript数组常用方法,具体内容如下 1.join()方法: Array.join()方法将数组中所以元素都转化为字符串链接在一起,返回最后生成的字符串.也可以指定可选的字符串在生成的字符串中来分隔数组的各个元素.如果不指定分隔符,默认使用逗号.案例如下: var a=[1,2,3]; a.join();//=> "1,2,3" 因为没有指定分隔符,默认为逗号. a.join("+");//=> "1+2+3"

  • javascript数组去重方法分析

    本文实例讲述了javascript数组去重方法.分享给大家供大家参考,具体如下: 方法一. 思路:创建一个新的空数组,循环遍历旧数组,用indexOf()方法,可以取得元素在数组中的位置,如果值为-1表示不存在.那么新数组用indexOf去获取老数组的每一个元素,如果值为-1表示不存在,就把他push到新数组里,最后输出新数组即去重后的数组 var arr=[24,56,74,89,24,56,78,09,24]; var new_arr=[]; for(var i=0;i<arr.length

  • js中数组Array的一些常用方法总结

    var list = new Array()是我们在js中常常写到的代码,今天就总结哈Array的对象具有哪些方法. list[0] = 0; list[1] = 1; list[2] = 2; 或者这样声明:var list = [0,1,2] 1 shift()t:删除数组的第一个元素,返回删除的值.这里是0 2 unshift(3,4):把参数加载数组的前面,返回数组的长度.现在list:中是3,4,0,1,2 3pop():删除数组的最后一个元素,返回删除的值.这里是2. 4push(3

  • js克隆对象、数组的常用方法介绍

    Ext的两种克隆的方法: 可以克隆对象.数据等:var newJson = Ext.clone(json); 只能克隆数组:var newJson = Ext.Array.clone(json); JQuery的方法: 深复制[可以迭代]:var newJson = jQuery.extend(true,{}, json); 浅复制[不能迭代]:var newJson = jQuery.extend({}, json); var newJson = $.map(json,function (n)

  • JavaScript数组常用方法

    判断某个对象是否是数组: instanceof.Array.isArray() 对于一个网页或者一个全局作用域可以使用instanceof操作符. if(value instanceof Array){  //判断value是否是数组     } instanceof操作符它假设只有一个全局执行环境,如果网页包含多个框架则使用ECMAScript5新增的Array.isArray()方法. if(Array.isArray(value)){//判断value是否是数组 } Array.isArr

  • js数组去重的hash方法

    js数组去重的hash方法

    对于 JavaScript 数组去除重复项,现在有多种方法,其中一种是hash,如下: if (!Array.prototype.unique) { Array.prototype.unique = function () { var hash = {}, result = [], item; for (var i = 0; i < this.length; i++) { item = this[i]; if ( !hash[item] ) { hash[item] = true; result

  • js中数组的常用方法小结

    本文实例总结了js中数组的常用方法.分享给大家供大家参考,具体如下: push 方法 该方法会把一个元素或一组元素(数组)添加到当前数组的末尾. eg: var arr1 = [1, 2, 3]; arr1.push([4, 5]); arr1的结果是[1, 2, 3, 4, 5] concat 方法 该方法会把两个数组或元素组合在一起,但是不会改变调用者的结构 eg: var arr1 = [1, 2, 3]; var arr2 = [4, 5]; var arr3 = arr1.concat

  • js数组操作常用方法

    在jquery中处理JSON数组的情况中遍历用到的比较多,但是用添加移除这些好像不是太多. 今天试过json[i].remove(),json.remove(i)之后都不行,看网页的DOM对象中好像JSON数据是以数组的形式出现的,查阅了下相关JS中数组的操作一试果然很爽. 记录下来. 1.数组的创建 复制代码 代码如下: var arrayObj = new Array(); //创建一个数组var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不

随机推荐