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

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()是如何工作的

prevIoUsValue + currentValue);

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

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

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

prevIoUsValue + currentValue,10);

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

注意:

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

例题

将数组所有项相加

rush:js;"> let sum = [0,4].reduce((x,0); // 10

扁平化一个二维数组

x.concat(y),[]); // [1,5,6]

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


什么是深拷贝与浅拷贝?深拷贝与浅拷贝是js中处理对象或数据复制操作的两种方式。‌在聊深浅拷贝之前咱得了解一下js中的两种数据类型:
前言 今天复习了一些前端算法题,写到一两道比较有意思的题:重建二叉树、反向输出链表每个节点 题目 重建二叉树: 输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树。假设输入的前序遍历和中序遍历的结果中都不含重复的数字。例如输入前序遍历序列 {1,2,4,7,3,5,6,8} 和中序遍历序列 {
最近在看回JavaScript的面试题,this 指向问题是入坑前端必须了解的知识点,现在迎来了ES6+的时代,因为箭头函数的出现,所以感觉有必要对 this 问题梳理一下,所以刚好总结一下JavaScript中this指向的问题。
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小
JS怎么获取当前时间戳
JS如何判断对象是否为数组
JS怎么获取图片当前宽高
JS对象如何转为json格式字符串
JS怎么获取图片原始宽高
怎么在click事件中调用多个js函数
js如何往数组中添加新元素
js如何拆分字符串
JS怎么对数组内元素进行求和
JS如何判断屏幕大小
js怎么解析json数据
js如何实时获取浏览器窗口大小
原生JS实现别踩白块小游戏(五)