JS reduce()方法详解,使用reduce数组去重

时间:2024-10-18 17:07:38

 壹 ❀ 引

稍微有了解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);
});

JS reduce()方法详解,使用reduce数组去重

我们直接打印出四个参数,咦?为什么 accumulator第一次循环是e,后续循环怎么都是undefined了?

前面说了,由于reduce方法没有提供初始值,所以第一次循环数组的第一项作为了reduce方法的初始值,后续循环中由于没 return操作,导致accumulator拿不到上次返回值,所以就是undefined了。

我们在console后面加上return操作,再看:

return accumulator+currentValue;

JS reduce()方法详解,使用reduce数组去重

这不就有值了吗,所以使用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');

JS reduce()方法详解,使用reduce数组去重

可以看到有了默认值,数组第一次循环是从索引 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()方法详解及高级技巧

MDN