JS reduce()方法详解,使用reduce数组去重
壹 ❀ 引
稍微有了解JavaScript数组API的同学,对于reduce方法至少有过一面之缘,也许是for与forEach太强大,或者filter,find很实用,在实际开发中我至始至终没使用过reduce方法一次。很巧的是今天再刷面试题的过程中,遇到了一题关于数组操作的的题,相关解析中有人使用到了reduce方法,好吧我承认我看着有点茫然,因为我从未正眼过它,那么今天就给彼此一首歌的时间,让我们好好了解你,关于reduce本文开始。
贰 ❀ 关于reduce
一个完整的reduce方法应该是这样:
array.reduce(function(accumulator, currentValue, currentIndex, array), initialValue)
它由一个回调函数与一个初始值组成,其中回调函数接受四个参数,我们先解释回调函数形参与initialValue的含义:
1.initialValue [ɪˈnɪʃl] [ˈvæljuː] 初始值
initialValue 表示reduce方法第一次执行时的初始值,是一个可选值。
2.accumulator [əˈkjuːmjəleɪtər] 累加器;积聚者
accumulator 正如翻译的那样,它是 reduce 方法多次执行的累积结果,accumulator 的初始值分两种情况:
若有提供 initialValue 初始值,第一次循环时 accumulator 的值便为 initialValue,后续循环时 accumulator 为上次循环的返回值。
若未提供initialValue,第一次循环时 accumulator 的值为数组第一项arr[0],后续循环时为上次循环的返回值。
3.currentValue [ˈkɜːrənt] [ˈvæljuː] 当前值
这个应该不难理解,数组循环当前处理的值。currentValue 的初始值也受到initialValue的影响:
若有提供 initialValue 初始值,第一次循环currentValue 的值为数组第一项arr[0],后续变化随索引递增变化。
若未提供initialValue,第一次循环由于arr[0]成了accumulator 的值,所以currentValue 只能从arr[1]开始,后续变化随索引递增。
4.currentIndex
数组循环当前处理值的索引,currentValue 与 currentIndex是同步变化的。
5.array
当前正在被循环的数组。
说的有点糊涂?没关系,我们通过例子循序渐进的来理解,加深这几个参数的印象。先看第一个例子:
let arr = ['e', 'l', 'l', 'o'];
arr.reduce((accumulator, currentValue, currentIndex, array) => {
console.log(accumulator, currentValue, currentIndex, array);
});
我们直接打印出四个参数,咦?为什么 accumulator第一次循环是e,后续循环怎么都是undefined了?
前面说了,由于reduce方法没有提供初始值,所以第一次循环数组的第一项作为了reduce方法的初始值,后续循环中由于没 return操作,导致accumulator拿不到上次返回值,所以就是undefined了。
我们在console后面加上return操作,再看:
return accumulator+currentValue;
这不就有值了吗,所以使用reduce方法得记住,由于reduce是一个对数组累积操作的方法,在使用中一定得记得加return返回你希望累积操作的数据。
那也不对啊,我数组明明有四项,照输出来看reduce方法怎么只执行了三次?
这是因为我们没提供初始值 initialValue ,导致reduce方法将数组的第一项作为了初始值,所以循环第一次是从数组第二项开始的,我们尝试给reduce添加一个默认值:
let arr = ['e', 'l', 'l', 'o'];
arr.reduce((accumulator, currentValue, currentIndex, array) => {
console.log(accumulator, currentValue, currentIndex, array);
return accumulator+currentValue;
},'h');
可以看到有了默认值,数组第一次循环是从索引 0 开始,完完整整的执行了四次。
也不对啊,accumulator不是循环的累加值吗,执行完毕了怎么显示的是 hell,o怎么没加进去?这不是因为我console写在了return前面了么(我故意的),执行完最后一次跳出循环,reduce方法会返回最终的执行结果,我们用一个变量来保存试试,像这样:
let arr = ['e', 'l', 'l', 'o'];
let result = arr.reduce((accumulator, currentValue, currentIndex, array) => {
return accumulator+currentValue;
},'h');
console.log(result);//hello
看,这不就是一个完整的单词 hello了;
其实对于reduce让人疑惑的无非就是initialValue与accumulator,currentValue的关系,这里我们做个小总结:
如果reduce有提供初始值,则循环从索引0开始,此时accumulator就是initialValue,currentValue值就是arr[0];如果reduce未提供初始值,则arr[0]作为初始值赋予给accumulator,循环从索引1开始,currentValue值就是arr[1]了;
叁 ❀ reduce作用
那么到这里我们详细介绍了reduce方法的参数与执行规则,了解了这些,我们可以用reduce方法做些什么呢?
1.数组求和
reduce方法本意就是用来记录循环的累积结果,用于数组求和是最合适不过了。比如我们要求数组 [1,2,3,4] 的元素之和,用forEach你得这样写:
let total = 0;
[1, 2, 3, 4].forEach(item => total += item);
console.log(total); //
但通过reduce方法就简单的多,我们可以这么写:
let total = [1, 2, 3, 4].reduce((accumulator, current) => accumulator += current); //
假设我们希望求数字90与数组 [ 1,2,3,4] 元素的和呢,那就这么写:
let total = [1, 2, 3, 4].reduce((accumulator, current) => accumulator += current, 90); //
2.数组去重
比如我们要将数组 [1,2,2,4,null,null] 去除掉重复项,用filter可以这样做:
let arr = [1, 2, 2, 4, null, null].filter((item, index, arr) => arr.indexOf(item) === index); // [1,2,4,null]
当然单说实现使用 new Set 更简单:
let arr = [...new Set([1, 2, 2, 4, null, null])]; // [1,2,4,null]
现在我们知道了reduce方法,其实也可以通过reduce去重,像这样:
let arr = [1, 2, 2, 4, null, null].reduce((accumulator, current) => {
return accumulator.includes(current) ? accumulator : accumulator.concat(current);
}, []);
3.数组降维
比如我们要将二维数组 [[1,2],[3,4],[5,6]] 降维成一维数组,最简单的做法是通过flat方法,像这样:
let arr = [[1,2],[3,4],[5,6]].flat();//[1, 2, 3, 4, 5, 6]
通过reduce也挺简单,我们可以结合concat方法,像这样:
let arr = [[1,2],[3,4],[5,6]].reduce((accumulator, current)=>accumulator.concat(current),[]);//[1, 2, 3, 4, 5, 6]
那如果是个多维数组呢,reduce可以这样做:
let arr = [0,[1],[2, 3],[4, [5, 6, 7]]]; let dimensionReduction = function (arr) {
return arr.reduce((accumulator, current) => {
return accumulator.concat(
Array.isArray(current) ?
dimensionReduction(current) :
current
);
}, []);
}
dimensionReduction(arr); //[0, 1, 2, 3, 4, 5, 6, 7]
相对而言,多维数组降维flat会更简单,当然flat存在兼容问题:
let arr = [0,[1],[2, 3],[4, [5, 6, 7]]].flat(Infinity);// [0, 1, 2, 3, 4, 5, 6, 7]
肆 ❀ 使用注意
在使用reduce方法有一点需要注意,若有初始值但数组为空,或无初始值但数组只有一项时,reduce方法都不会执行。
[].reduce(() => console.log(1), 1); //不会执行
[1].reduce(() => console.log(1)); //不执行
若数组为空且没有初始值,reduce方法报错。
[].reduce(() => console.log(1)); //报错
所以如果没有初始值,你至少得保证数组有2项才能执行;如果给了初始值,你至少得保证数组有一项才能执行。
[1, 2].reduce(() => console.log(1)); //
[1].reduce(() => console.log(1), 1); //
伍 ❀ 总
通过文本,我们知道了reduce是一个进行累积操作的方法,当我们提供初始值时,循环从0开始,如果不提供,则循环从索引1开始。
我们知道了reduce还有那么点傲娇,如果数组为空且不提供初始值时reduce会报错,如果想reduce执行,你的数组最低标准应该有一项,同时提供默认值(或数组有两项无初始值)。
那么到这里,关于reduce方法参数与基本用法就全部介绍完毕了。
参考
JS reduce()方法详解,使用reduce数组去重的更多相关文章
- Js apply 方法 详解
Js apply方法详解 我在一开始看到JavaScript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这 ...
- Js apply方法详解,及其apply()方法的妙用
Js apply方法详解 我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这 ...
- JS进阶篇--JS数组reduce()方法详解及高级技巧
基本概念 reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值. reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被 ...
- JS数组reduce()方法详解及高级技巧
1.语法 arr.reduce(callback,[initialValue]) reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(或者上 ...
- JavaScript数组的reduce方法详解
数组经常用到的方法有push.join.indexOf.slice等等,但是有一个经常被我们忽略的方法:reduce,这个方法简直强大的不要不要的. 我们先来看看这个方法的官方概述:reduce() ...
- JavaScript系列--JavaScript数组高阶函数reduce()方法详解及奇淫技巧
一.前言 reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值. reduce() 可以作为一个高阶函数,用于函数的 compose. reduce()方 ...
- ES6中的数组reduce()方法详解
reduce() 方法对数组中的每个元素执行一个由我们提供的reducer函数(升序执行),将其结果汇总为单个返回值. 1. 语法reduce说明 arr.reduce(callback(accumu ...
- [五]java函数式编程归约reduce概念原理 stream reduce方法详解 reduce三个参数的reduce方法如何使用
reduce-归约 看下词典翻译: 好的命名是自解释的 reduce的方法取得就是其中归纳的含义 java8 流相关的操作中,我们把它理解 "累加器",之所以加引号是因为他并不仅仅 ...
- Java8中聚合操作collect、reduce方法详解
Stream的基本概念 Stream和集合的区别: Stream不会自己存储元素.元素储存在底层集合或者根据需要产生.Stream操作符不会改变源对象.相反,它会返回一个持有结果的新的Stream.3 ...
随机推荐
- 测试访问apiserver状态
目录 前言 创建admin证书和私钥 分发kubeconfig文件 检查集群信息 授权kube-apiserver访问kubelet API的权限 前言 到这里,ETCD集群.kube-nginx + ...
- c语言l博客作业02
问题 答案 这个作业属于哪个课程 C语言程序设计l 这个作业要求在哪里 https://edu.cnblogs.com/campus/zswxy/SE2019-2/homework/8687 我在这个 ...
- SpringBoot日志处理之Logback
日志处理是一个正式项目必备的功能,日志要能够根据时间.类型等要素,根据指定格式来保存指定的日志,方便我们观察程序运行情况.定位程序bug. SpringBoot中推荐使用Logback日志框架. 本节 ...
- CentOS 7 安装并配置 MySQL 5.7
Linux使用MySQL Yum存储库上安装MySQL 5.7,适用于Oracle Linux,Red Hat Enterprise Linux和CentOS系统. 1.添加MySQL Yum存储库 ...
- mac eclipse maven tomcat 运行错误 tomcat HTTP Status 404
在mac系统下安装好eclipse, maven以及tomcat, 之后运行一个web的helloworld项目,出现错误 tomcat HTTP Status 404. 查看eclipse cons ...
- shell 文本单词计数
words.txt中的内容如下: the day is sunny the the the sunny is is 统计每个单词出现的次数,并降序输出. Unix Pipes脚本如下: cat wor ...
- CodeForces1000A- Codehorses T-shirts
A. Codehorses T-shirts time limit per test 2 seconds memory limit per test 256 megabytes input stand ...
- (全国多校重现赛一) J-Two strings
Giving two strings and you should judge if they are matched. The first string contains lowercase le ...
- 纯手工搭建K8s(单节点)
准备说明: 因为为纯手动搭建,所以针对安装时需要的一些安装包需提前下载好 cfssl_linux-amd64. cfssljson_linux-amd64. cfssl-certinfo_linux- ...
- .net access config 相对路径
<configuration> <connectionStrings> <add name="ConStr" connectionString=&qu ...