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

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

创新互联服务项目包括丰南网站建设、丰南网站制作、丰南网页制作以及丰南网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，丰南网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到丰南省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

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

 以及 search 与 selection 的函数：

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

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

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

reduce的基本工作原理如下：

求数列的和

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

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

 观察其运行轨迹：

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

 求均值

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

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

 求均值的第二种方法，将length写到里面：

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

 更近一步，将average作为固有属性：

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

 单词计算多个值

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

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

 以array的方式改写：

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

 从右往左的折叠

工作原理如下图：

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

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

 而reduceRight的解题方案呢，

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

 二、array.map 从数学到编程

map首先是数学上的概念。

从object中提取数据

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

 悄无声息的处理数据

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

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

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

数列的表示方法

现在我们来创建一个 range.

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

 尝试求乘方：

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

 尝试字母表：

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

 用 reduce 构造 map

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

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

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

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

 【编辑推荐】

  1. Windows10这功能已如同残废！教你如何彻底关闭它
  2. C++和C++程序员谁先完蛋？
  3. 2021年值得关注的人工智能趋势
  4. RAID磁盘阵列到底适不适合你？一文读懂
  5. Windows 10是绝唱！微软新系统开始换版本号了

文章标题：帮你精通JS：函数式编程的七件武器之Reduce与Map
标题链接：http://www.shufengxianlan.com/qtweb/news31/125581.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

手机网站建设知识

同城分类信息

证企宝企业　　 　绵阳服务器托管　　 　成都雨棚定制　　 　红锐电子　　 　成都广告制作　　 　移动网站建设　　 　四川乐山服务器托管　　 　外贸营销网站建设　　 　盐亭网站建设　　 　SSL认证　　 　手机APP开发　　 　成都网站托管　　 　乐山服务器托管　　 　兴久牧业　　 　新华建筑装饰　　 　成都谷歌推广　　 　网站seo优化　　 　成都商城网站建设　　 　成都app开发　　 　成都网站营销