浅谈JS中 reduce() 的用法

gplane 发布于2019-08-23 16:41 / 354人阅读

摘要：一语法其中，表示将要原数组表示上一次调用回调时的返回值，或者初始值表示当前正在处理的数组元素表示当前正在处理的数组元素的索引，若提供值，则索引为，否则索引为表示初始值。

一、语法

arr.reduce(function(prev,cur,index,arr){
...
}, init);

其中，
arr 表示将要原数组；
prev 表示上一次调用回调时的返回值，或者初始值 init;
cur 表示当前正在处理的数组元素；
index 表示当前正在处理的数组元素的索引，若提供 init 值，则索引为0，否则索引为1；
init 表示初始值。
看上去是不是感觉很复杂？没关系，只是看起来而已，其实常用的参数只有两个：prev 和 cur。接下来我们跟着实例来看看具体用法吧~

二、实例

先提供一个原始数组：
var arr = [3,9,4,3,6,0,9];

实现以下需求的方式有很多，其中就包含使用reduce()的求解方式，也算是实现起来比较简洁的一种吧。

求数组项之和

var sum = arr.reduce(function (prev, cur) {

return prev + cur;

},0);## 标题文字 ##

由于传入了初始值0，所以开始时prev的值为0，cur的值为数组第一项3，相加之后返回值为3作为下一轮回调的prev值，然后再继续与下一个数组项相加，以此类推，直至完成所有数组项的和并返回。

求数组项最大值

==========

var max = arr.reduce(function (prev, cur) {

return Math.max(prev,cur);

});

由于未传入初始值，所以开始时prev的值为数组第一项3，cur的值为数组第二项9，取两值最大值后继续进入下一轮回调。

数组去重

var newArr = arr.reduce(function (prev, cur) {

prev.indexOf(cur) === -1 && prev.push(cur);
return prev;

},[]);

实现的基本原理如下：
① 初始化一个空数组
② 将需要去重处理的数组中的第1项在初始化数组中查找，如果找不到（空数组中肯定找不到），就将该项添加到初始化数组中
③ 将需要去重处理的数组中的第2项在初始化数组中查找，如果找不到，就将该项继续添加到初始化数组中
④ ……
⑤ 将需要去重处理的数组中的第n项在初始化数组中查找，如果找不到，就将该项继续添加到初始化数组中
⑥ 将这个初始化数组返回

三、其他相关方法

reduceRight()

该方法用法与reduce()其实是相同的，只是遍历的顺序相反，它是从数组的最后一项开始，向前遍历到第一项。

forEach()、map()、every()、some()和filter()

重点总结：

reduce() 是数组的归并方法，与forEach()、map()、filter()等迭代方法一样都会对数组每一项进行遍历，但是reduce() 可同时将前面数组项遍历产生的结果与当前遍历项进行运算，这一点是其他迭代方法无法企及的

云服务器 GPU云服务器 js中split的用法 reduce用法 js中json数据封装用法 java中枚举的用法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103151.html

浅谈js中reduce方法

摘要：介绍方法接收一个函数作为累加器为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数初始值上一次回调的返回值，当前元素值，当前索引，原数组。介绍reduce reduce() 方法接收一个函数作为累加器,reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：初始值（上一次回调的返回值），当前元素值，当...

mingzhong 2019-08-26 10:40 评论0 收藏0
浅谈js中的遍历

摘要：这几个方法会完整地遍历数组，即使在满足条件后，循环依旧进行。如果要同时遍历索引和项上述都是遍历数组的方法，这个是遍历对象的方法，并且最好不要混用遍历是程序中必不可少的一环，在所有语言中都存在，因为它可以简化人们的规律性操作，本文将一一道来。 for++ 这是最基础的for循环语句，格式如下： var arr = [1, 2, 3, 4, 5] for (var i =...

X1nFLY 2019-08-23 12:14 评论0 收藏0
浅谈vuex

摘要：概念浅谈是一个专为应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。更改的中的状态的唯一方法，类似。允许我们将分割成模块。通过购物车的一个案列，把vuex学习了一篇。 vuex概念浅谈 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以...

chaos_G 2019-08-23 13:50 评论0 收藏0
由 sort 中 key 的用法浅谈 python

摘要：但是实际写程序中，我们经常会写出许多繁杂的丑陋的代码。特别推荐，许多代码让我获益匪浅，比如这里对的使用。用可以写出很简单直观的代码，如下当然，上面不考虑效率，这里有一个利用分治法思想的高效的方法。更多文章更多阅读中参数的用法高级编程技巧用 Python 时间也算不短了，但总感觉自己在用写 C++ 代码的思维写 Python，没有真正用到其作为脚本语言的优势。之前刷 LeetCode ...

keke 2019-07-25 10:19 评论0 收藏0
2019年8月所遇知识点整理

摘要：注本文章是在工作过程中所接触的知识点的整理，涉及的东西比价杂乱，如有错误之处，欢迎纠错与指导一，树状结构数据获取二，富文本编辑器插件三，插件库集合四，和的区别五，子元素高度撑满父级父级未设置高度，同时子元素内文字垂直居中六，画半圆七， *注：本文章是在工作过程中所接触的知识点的整理，涉及的东西比价杂乱，如有错误之处，欢迎纠错与指导一， json树状结构数据获取二， vue2.0富文...

morgan 2019-08-30 15:44 评论0 收藏0