JavaScript数组reduce()方法详解及使用技巧

开发 前端
reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。reduce() 可以作为一个高阶函数,用于函数的 compose。

[[426481]]

今天给大家带来的是之前reduce的「JavaScript数组reduce()方法详解及奇淫技巧」,觉得的确不错,意想不到。

一、前言

reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。

reduce() 可以作为一个高阶函数,用于函数的 compose。

reduce()方法可以搞定的东西,for循环,或者forEach方法有时候也可以搞定,那为啥要用reduce()?这个问题,之前我也想过,要说原因还真找不到,唯一能找到的是:通往成功的道路有很多,但是总有一条路是最捷径的,亦或许reduce()逼格更高。

二、语法

  1. arr.reduce(callback,initialValue) 

返回最后一个值,reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(或者上一次回调函数的返回值),当前元素值,当前索引,调用 reduce 的数组。

三、实例解析intialValue参数

1、第一个例子:

  1. var arr = [1, 2, 3, 4]; 
  2. var sum = arr.reduce(function(prev, cur, index, arr) { 
  3.     console.log(prev, cur, index); 
  4.     return prev + cur; 
  5. }) 
  6. console.log(arr, sum); 

打印结果:

  1. 1 2 1 
  2. 3 3 2 
  3. 6 4 3 
  4. [1, 2, 3, 4] 10 

2、第二个例子

  1. var  arr = [1, 2, 3, 4]; 
  2. var sum = arr.reduce(function(prev, cur, index, arr) { 
  3.     console.log(prev, cur, index); 
  4.     return prev + cur; 
  5. },0) //注意这里设置了初始值 
  6. console.log(arr, sum); 

打印结果:

  1. 0 1 0 
  2. 1 2 1 
  3. 3 3 2 
  4. 6 4 3 
  5. [1, 2, 3, 4] 10 

这个例子index是从0开始的,第一次的prev的值是我们设置的初始值0,数组长度是4,reduce函数循环4次。

结论:如果没有提供initialValue,reduce 会从索引1的地方开始执行 callback 方法,跳过第一个索引。如果提供initialValue,从索引0开始。

注意:如果这个数组为空,运用reduce是什么情况?

  1. var  arr = []; 
  2. var sum = arr.reduce(function(prev, cur, index, arr) { 
  3.     console.log(prev, cur, index); 
  4.     return prev + cur; 
  5. }) 
  6. //报错,"TypeError: Reduce of empty array with no initial value" 但是要是我们设置了初始值就不会报错,如下: 
  7. var  arr = []; 
  8. var sum = arr.reduce(function(prev, cur, index, arr) { 
  9.     console.log(prev, cur, index); 
  10.     return prev + cur; 
  11. },0) 
  12. console.log(arr, sum); // [] 0 

所以一般来说,提供初始值更加安全。

四、reduce简单用法

当然最简单的就是我们常用的数组求和,求乘积了。

  1. var  arr = [1, 2, 3, 4]; 
  2. var sum = arr.reduce((x,y)=>x+y) 
  3. var mul = arr.reduce((x,y)=>x*y) 
  4. console.log( sum ); //求和,10 
  5. console.log( mul ); //求乘积,24 

五、reduce高级用法

(1)计算数组中每个元素出现的次数

  1. let names = ['Alice''Bob''Tiff''Bruce''Alice']; 
  2. let nameNum = names.reduce((pre,cur)=>{ 
  3.   if(cur in pre){ 
  4.     pre[cur]++ 
  5.   }else
  6.     pre[cur] = 1  
  7.   } 
  8.   return pre 
  9. },{}) 
  10. console.log(nameNum); //{Alice: 2, Bob: 1, Tiff: 1, Bruce: 1} 

(2)数组去重

  1. let arr = [1,2,3,4,4,1] 
  2. let newArr = arr.reduce((pre,cur)=>{ 
  3.     if(!pre.includes(cur)){ 
  4.       return pre.concat(cur) 
  5.     }else
  6.       return pre 
  7.     } 
  8. },[]) 
  9. console.log(newArr);// [1, 2, 3, 4] 

(3)将二维数组转化为一维

  1. let arr = [[0, 1], [2, 3], [4, 5]] 
  2. let newArr = arr.reduce((pre,cur)=>{ 
  3.     return pre.concat(cur) 
  4. },[]) 
  5. console.log(newArr); // [0, 1, 2, 3, 4, 5] 

(4)将多维数组转化为一维

  1. let arr = [[0, 1], [2, 3], [4,[5,6,7]]] 
  2. const newArr = function(arr){ 
  3.    return arr.reduce((pre,cur)=>pre.concat(Array.isArray(cur)?newArr(cur):cur),[]) 
  4. console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5, 6, 7] 

(5)对象里的属性求和

  1. var result = [ 
  2.     { 
  3.         subject: 'math'
  4.         score: 10 
  5.     }, 
  6.     { 
  7.         subject: 'chinese'
  8.         score: 20 
  9.     }, 
  10.     { 
  11.         subject: 'english'
  12.         score: 30 
  13.     } 
  14. ]; 
  15. var sum = result.reduce(function(prev, cur) { 
  16.     return cur.score + prev; 
  17. }, 0); 
  18. console.log(sum) //60 

(6)将[1,3,1,4]转为数字1314

  1. function addDigitValue(prev,curr,curIndex,array){ 
  2.     var exponent = (array.length -1) -curIndex; 
  3.     var digitValue = curr*Math.pow(10,exponent); 
  4.     return prev + digitValue; 
  5. var arr6 = [1,3,1,4]; 
  6. var result7 = arr6.reduce(addDigitValue,0); 
  7. console.info('result7',result7); 

本文转载自微信公众号「松宝写代码」

 

责任编辑:姜华 来源: 松宝写代码
相关推荐

2023-02-01 08:31:48

2022-07-06 10:04:45

JavaScript数组前端

2016-12-27 10:19:42

JavaScriptindexOf

2023-06-28 08:34:02

Bind()函数JavaScript

2009-07-31 17:51:42

linux vi命令详linux vi命令编辑器

2010-01-06 10:58:06

建立JavaScrip

2023-11-23 11:37:13

JavaScript数组

2022-06-08 10:42:34

ReduceJavaScript技巧

2016-10-08 21:25:36

Javascript数组Web

2020-08-21 17:40:15

JavaScript开发 技巧

2015-04-17 16:44:22

swiftOC

2009-09-04 10:45:18

MyEclipse使用

2010-10-08 09:42:23

JavaScript方

2010-09-28 14:52:57

JavaScriptDOM

2023-07-03 15:55:05

语法jpa状态

2023-11-10 08:17:01

分布式搜索引擎

2020-06-08 08:46:59

JavaScript条件类名

2010-07-19 09:45:09

Perl数组

2016-10-13 19:33:10

javascript数组indexOf

2023-02-03 08:21:55

点赞
收藏

51CTO技术栈公众号