帮你精通JS:函数式编程的七件武器之Reduce与Map

开发 前端
JavaScript是当今流行语言中对函数式编程支持最好的编程语言。本篇带给大家函数式编程的七件武器之reduce与map。

[[385370]]

 JavaScript是当今流行语言中对函数式编程支持最好的编程语言。函数式编程的七个函数分别为:

  1. - reduce() and reduceRight() to apply an operation to a whole array, reducing it to a single result 
  2. - map() to transform one array into another by applying a function to each of its elements 
  3. - flat() to make a single array out of an array of arrays 
  4. - flatMap() to mix together mapping and flattening 
  5. - forEach() to simplify writing loops by abstracting the necessary looping code 

 以及 search 与 selection 的函数:

  1. - filter() to pick some elements from an array 
  2. - find() and findIndex() to search for elements that satisfy a condition 
  3. - A pair of predicates, every() and some(), to check an array for a Boolean test 

 一、array.reduce() 将数列降维至一个值

当我们处理array的时候,总是陷入到无穷尽的loop循环之中,掉入进琐碎的陷阱,戕害我们的思维和大脑。

reduce的基本工作原理如下:


求数列的和

首先从耳熟能详的求数列之和起步。

  1. const myArray = [22, 9, 60, 12, 4, 56]; 
  2. const sum = (x, y) => x + y; 
  3. const mySum = myArray.reduce(sum, 0); // 163 

 观察其运行轨迹:

  1. #+begin_src js :results output 
  2. const myArray = [22, 9, 60, 12, 4, 56]; 
  3. const sumAndLog = (x, y) => { 
  4.  console.log(`${x}+${y}=${x + y}`); 
  5.   return x + y; 
  6. }; 
  7. myArray.reduce(sumAndLog, 0); 
  8.  
  9. #+end_src 
  10.  
  11. #+RESULTS: 
  12. : 0+22=22 
  13. : 22+9=31 
  14. : 31+60=91 
  15. : 91+12=103 
  16. : 103+4=107 
  17. : 107+56=163 

 求均值

有了reduce,我们得以用“描述”的方式,以decalratively的方式求得average:

  1. const average = arr => arr.reduce(sum, 0) / arr.length; 
  2. console.log(average(myArray)); // 27.166667 

 求均值的第二种方法,将length写到里面:

  1. const average2 = (sum, val, ind, arr) => { 
  2.   sum += val; 
  3.   return ind === arr.length - 1 ? sum / arr.length 
  4.          : sum; //将这作为思考的原材料 
  5. }; 
  6.  
  7. console.log(myArray.reduce(average2, 0)); // 27.166667s 

 更近一步,将average作为固有属性:

  1. Array.prototype.average = function() { 
  2.   return this.reduce((x, y) => x + y, 0) / this.length; 
  3. }; 
  4.  
  5. let myAvg = [22, 9, 60, 12, 4, 56].average(); // 27.166667 

 单词计算多个值

虽然 reduce 只能返回单个结果,但是此返回结果却可以包含多个元素,比如是object。

  1. const average3 = arr => { 
  2.   const sumCount = arr.reduce( 
  3.     (accum, value) => ({sum: value + accum.sumcount: accum.count + 1}), 
  4.     {sum: 0, count: 0} 
  5.   ); 
  6.  
  7.   return sumCount.sum / sumCount.count
  8. }; 
  9.  
  10. console.log(average3([7, 11, 19, 23])); 

 以array的方式改写:

  1. const average4 = arr => { 
  2.   const sumCount = arr.reduce( 
  3.     (accum, value) => [accum[0] + value, xaccum[1] + 1], 
  4.     [0, 0] 
  5.   ); 
  6.   return sumCount[0] / sumCount[1]; 
  7. }; 
  8.  
  9. console.log(average4(myArray)); // 27.166667 

 从右往左的折叠

工作原理如下图:


比如 reverse 字符串的常规解决方案为:

  1. const reverseString = str => { 
  2.   let arr = str.split(""); 
  3.   arr.reverse(); 
  4.   return arr.join(""); 
  5. }; 
  6.  
  7. console.log(reverseString("MONTEVIDEO"));  // OEDIVETNOM 

 而reduceRight的解题方案呢,

  1. const reverseString2 = str => 
  2.   str.split("").reduceRight((x, y) => x + y, ""); 
  3.  
  4. console.log(reverseString2("OEDIVETNOM"));  // MONTEVID 

 二、array.map 从数学到编程

map首先是数学上的概念。


从object中提取数据

  1. const markers = [ 
  2.   {name"AR", lat: -34.6, lon: -58.4}, 
  3.   {name"BO", lat: -16.5, lon: -68.1}, 
  4.   {name"BR", lat: -15.8, lon: -47.9}, 
  5.   {name"CL", lat: -33.4, lon: -70.7}, 
  6.   {name"CO", lat:   4.6, lon: -74.0}, 
  7.   {name"EC", lat:  -0.3, lon: -78.6}, 
  8.   {name"PE", lat: -12.0, lon: -77.0}, 
  9.   {name"PY", lat: -25.2, lon: -57.5}, 
  10.   {name"UY", lat: -34.9, lon: -56.2}, 
  11.   {name"VE", lat:  10.5, lon: -66.9}, 
  12. ]; 
  13.  
  14. let averageLat = average(markers.map(x => x.lat)); // -15.76 
  15. let averageLon = average(markers.map(x => x.lon)); // -65.53 
  16. // extended array.prototype 
  17. let averageLat2 = markers.map(x => x.lat).average(); 
  18. let averageLon2 = markers.map(x => x.lon).average(); 

 悄无声息的处理数据

看一个我们想当然的应用:

  1. ["123.45""67.8""90"].map(parseFloat); 
  2. // [123.45, 67.8, 90] 
  3.  
  4. ["123.45""-67.8""90"].map(parseInt); 
  5. // [123, NaN, NaN] 

 这是因为 parseInt 有一个 optional 的参数 radix。

数列的表示方法

现在我们来创建一个 range.

  1. const range = (start, stop) => 
  2.   new Array(stop - start).fill(0).map((v, i) => start + i); 
  3. // 必须写一个v,也必须写 new 
  4. let from2To6 = range(2, 7); // [2, 3, 4, 5, 6] 

 尝试求乘方:

  1. const range = (start, stop) => 
  2.   new Array(stop - start).fill(0).map((v, i) => start + i); 
  3.  
  4. const factorialByRange = n => range(1, n + 1).reduce((x, y) => x * y, 1); 
  5.  
  6. factorialByRange(5); // 120 
  7. factorialByRange(3); 

 尝试字母表: 

  1. const ALPHABET = range("A".charCodeAt(), "Z".charCodeAt() + 1).map(x => 
  2.   String.fromCharCode(x) 
  3. ); 
  4.  
  5. // ["A""B""C", ... "X""Y""Z"

 用 reduce 构造 map

reduce是所有其他函数的起点,

  1. const myMap = (arr, fn) => arr.reduce((x, y) => x.concat(fn(y)), []); 

尝试两种不同的解决方案:

  1. const myArray = [22, 9, 60, 12, 4, 56]; 
  2. const dup = x => 2 * x; 
  3.  
  4. console.log(myArray.map(dup));    // [44, 18, 120, 24, 8, 112] 
  5. console.log(myMap(myArray, dup)); // [44, 18, 120, 24, 8, 112] 
  6. console.log(myArray);             // [22, 9, 60, 12, 4, 56] 

 【编辑推荐】

 

责任编辑:姜华 来源: 今日头条
相关推荐

2021-03-17 06:03:41

函数式编程JavaScriptarray.filte

2021-03-14 08:12:02

函数JavaScript语言

2021-03-12 08:21:54

JavaScript 前端原生js

2021-04-08 09:14:24

js前端函数

2024-08-19 00:01:00

2021-04-07 08:03:51

js举起Hoisting初始化

2024-01-10 08:47:48

Python函数Map()

2017-06-08 14:25:46

Kotlin函数

2022-07-07 09:03:36

Python返回函数匿名函数

2024-06-04 00:20:00

Python函数

2021-03-22 06:28:44

reducemap函数

2009-12-23 17:10:26

2021-03-24 10:31:10

JS函数式编程前端

2013-09-09 09:41:34

2009-07-24 17:31:30

C#2.0函数式编程

2022-10-27 11:36:59

map函数对象

2012-09-21 09:21:44

函数式编程函数式语言编程

2020-12-11 09:38:49

Shell编程开发

2014-03-18 10:16:58

SVM

2024-04-28 09:28:49

点赞
收藏

51CTO技术栈公众号