JS内置对象Array之reduce()用法
一、语法
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()的求解方式,也算是实现起来比较简洁的一种吧。
1. 求数组项之和
var sum = arr.reduce(function (prev, cur) {
return prev + cur;
},0);
由于传入了初始值0,所以开始时prev的值为0,cur的值为数组第一项3,相加之后返回值为3作为下一轮回调的prev值,然后再继续与下一个数组项相加,以此类推,直至完成所有数组项的和并返回。
2. 求数组项最大值
var max = arr.reduce(function (prev, cur) {
return Math.max(prev,cur);
});
由于未传入初始值,所以开始时prev的值为数组第一项3,cur的值为数组第二项9,取两值最大值后继续进入下一轮回调。
或者使用如下方法求数组中的最大值:
var a=[1,2,3,5];
alert(Math.max.apply(null, a));//最大值
alert(Math.min.apply(null, a));//最小值 alert(Math.max.apply(Math, a));//最大值
alert(Math.min.apply(Math, a));//最小值
多维数组可以这么修改:
var a=[1,2,3,[5,6],[1,4,8]];
var ta=a.join(",").split(",");//转化为一维数组
alert(Math.max.apply(null,ta));//最大值
alert(Math.min.apply(null,ta));//最小值
3. 数组去重
var newArr = arr.reduce(function (prev, cur) {
prev.indexOf(cur) === -1 && prev.push(cur);
return prev;
},[]);
实现的基本原理如下:
① 初始化一个空数组
② 将需要去重处理的数组中的第1项在初始化数组中查找,如果找不到(空数组中肯定找不到),就将该项添加到初始化数组中
③ 将需要去重处理的数组中的第2项在初始化数组中查找,如果找不到,就将该项继续添加到初始化数组中
④ ……
⑤ 将需要去重处理的数组中的第n项在初始化数组中查找,如果找不到,就将该项继续添加到初始化数组中
⑥ 将这个初始化数组返回
4.数组扁平化
//数组扁平化
const newArray = [1, 2, [3, 4, [5, 6],7]]
//ES6语法
const flatten = arr =>
arr.reduce( (flat, next) =>
flat.concat(Array.isArray(next) ? flatten(next) : next)
, []) console.log(flatten(newArray)) const arr = [1, 2, [3, 4, [5, 6],7]]
// ES5语法
const flatten1 = function (arr) {
return arr.reduce(function(flat, next) {
return flat.concat(Array.isArray(next) ? flatten1(next) : next)
}, [])
} console.log(flatten1(arr))
5. ES6中箭头函数简洁写法:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions
var arr = [5, 6, 13, 0, 1, 18, 23]; var sum = arr.reduce((a, b) => a + b);
// var even = arr.filter(v => v % 2 == 0);
// [6, 0, 18] var double = arr.map(v => v * 2);
// [10, 12, 26, 0, 2, 36, 46]
三、其他相关方法
1. reduceRight()
该方法用法与reduce()其实是相同的,只是遍历的顺序相反,它是从数组的最后一项开始,向前遍历到第一项。
重点总结:
reduce() 是数组的归并方法,与forEach()、map()、filter()等迭代方法一样都会对数组每一项进行遍历,但是reduce() 可同时将前面数组项遍历产生的结果与当前遍历项进行运算,这一点是其他迭代方法无法企及的
参考博客:https://www.jianshu.com/p/541b84c9df90
JS内置对象Array之reduce()用法的更多相关文章
- JS内置对象-Array之forEach()、map()、every()、some()、filter()的用法
简述forEach().map().every().some()和filter()的用法 在文章开头,先问大家一个问题: 在Javascript中,如何处理数组中的每一项数据? 有人可能会说,这还不简 ...
- JS内置对象-Array之常用API
- JS内置对象-Array之indexOf和lastIndexOf
indexOf() var num = [1, 7, 2, 3, 4, 7, 9] var pos = num.indexOf(7) var pos1 = num.indexOf(7, 2) cons ...
- JS内置对象-Array之splice-删插替
splice-删除 var arr = [1, 2, 3, 4, 5, 6]; //删除 var delArr = arr.splice(1, 2) console.log(arr); // => ...
- JS内置对象-String对象、Date日期对象、Array数组对象、Math对象
一.JavaScript中的所有事物都是对象:字符串.数组.数值.函数... 1.每个对象带有属性和方法 JavaScript允许自定义对象 2.自定义对象 a.定义并创建对象实例 b.使用函数来定义 ...
- 5月15日上课笔记-js中 location对象的属性、document对象、js内置对象、Date事件对象、
location的属性: host: 返回当前主机名和端口号 定时函数: setTimeout( ) setInterval() 二.document对象 getElementById(); 根据ID ...
- web前端学习(四)JavaScript学习笔记部分(6)-- js内置对象
1.JS内置对象-什么是对象 1.1.什么是对象: JavaScript中的所有事物都是对象:字符串.数值.数组.函数 每个对象带有属性和方法 JavaScript允许自定义对象 1.2.自定义对象: ...
- js内置对象的常用属性和方法(Array | String | Date | Math)
js内置对象:Array String Math Date <!DOCTYPE html> <html lang="en"> <head> ...
- 4月5日--课堂笔记--JS内置对象
JavaScript 4.5 一. JS内置对象 1.数组Array a)创建语法1:var arr=new Array(参数); i. 没有参数:创建一个初始容量为0的数组 ii. ...
随机推荐
- supervisor服务
描述: 遇到各种各样的各种坑, 可以通过python2 的pip安装, 可以通过apt安装, 不支持python3: 如若用apt安装可能会自动启动并且加入开机自启(不保证成功),pip安装一定不会需 ...
- linux网络测试命令
一.ping 它通过向目标主机发送一个个数据包以及接受数据包的回应来判断主机和目标主机之间网络连接情况.ping的两个功能:判断网络是否可达.网络性能统计. ping使用的是网络层的ICMP协议. p ...
- Git的使用和基本概念理解
参考:https://www.liaoxuefeng.com/wiki/896043488029600 一).git的使用: 1.创建版本库(Resopsitory),相当于一个目录,目录中所有的文件 ...
- python+appium搭建的测试环境
: 1,安装jdk JDK下载好jdk直接点下一步就可以了,然后开始配置变量classpath, path, Java_home:再运行cmd,并输入Java和javac看输出判断环境变量是否配好了. ...
- linux 6.5操作系统建立
VM上redhat enterprise linux6 ---> 使用仅主机模式网络连接 开始安装: ——>是否检查镜像:skip ——>选择语言: 中文/英文 ——>存储设备 ...
- Python的os,shutil和sys模块
*********OS*********** os.sep 可以取代操作系统特定的路径分隔符.windows下为 '\\' os.name 字符串指示你正在使用的平台.比如对于Windows,它是'n ...
- Android Saripaar 注解详解
写这篇文章的原因 在移动端一般很少使用复杂的表单,一般针对于属性的更改都会打开一个新的页面进行更改.虽然不多,但是也会有.如果一个页面要输入的内容包括姓名.地址.邮箱.手机号等,对各个属性的验证会非常 ...
- JDK API1.6常用方法
一.String类 常见用法 : (String类代表字符串,JAVA程序中的所有字符串字面值(如“abc”)都作为此类的实例实现,字符串是常量,他们的值在创建之后不能更改,字符串缓冲区支持可变的字符 ...
- 6. 彤哥说netty系列之Java NIO核心组件之Buffer
--日拱一卒,不期而至! 你好,我是彤哥,本篇是netty系列的第六篇. 简介 上一章我们一起学习了Java NIO的核心组件Channel,它可以看作是实体与实体之间的连接,而且需要与Buffer交 ...
- https的安装(基于阿里云)
背景介绍:首先我的服务器在是阿里云的云服务器,web服务器使用的是nginx 进入到阿里云的ssl证书的管理界面,按需选择套餐后进行申请,申请完成后进行补全操作,最后是变成如下界面点击--下载进行证书 ...