从数组Reduce中构建Map等12个函数

开发 前端
如我们所知,JavaScript是当今流行语言中对函数式编程支持最好的编程语言。而函数式编程"从一到无穷”的起点是 reduce,本文我们将尝试从 reduce 起步构建所有的其他函数。

[[388814]]

如我们所知,JavaScript是当今流行语言中对函数式编程支持最好的编程语言。而函数式编程"从一到无穷”的起点是 reduce,本文我们将尝试从 reduce 起步构建所有的其他函数。


一、万物之始 array.reduce 的应用

Reduce的核心在于降维,将数组reduce为一个值,比如求和:

  1. const arr = [52, 71, 27, 38]; 
  2. const sum = (x, y) => x + y; 
  3. const cusSum = arr.reduce(sum, 0); 

 将reduce作为思考工具,脑子中要始终留有 initial-value 初始值。

二、构建 array.map 从数学到编程

map是数学思维而直接入编程,从reduce中模拟构建为:

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

 三、构建 array.flat array.flatMap 拍平数组

从array.flat我们窥探到 declaratively 编程的优势,只须将精力专注到要完成的任务上,而不必理会实现细节。用 reduce 实现为:

当只 flat 到一层深度时候:

  1. # flat only to one level  
  2. const flat1 = arr => [].concat(...arr); 
  3. const flat2 = arr = arr.reduce(acc, v => acc.concat(v), []) 

 当需要 flat 到任意深度时, 用 reduce 完全重构 flat:

  1. if (!Array.prototype.flat) { 
  2.   Array.prototype.flat = function(n = 1) { 
  3.     this.flatAllX = () => 
  4.       this.reduce( 
  5.         (f, v) => f.concat(Array.isArray(v) ? v.flat(Infinity) : v), 
  6.         [] 
  7.       ); 
  8.  
  9.     this.flatOneX = () => this.reduce((f, v) => f.concat(v), []); 
  10.      
  11.     return n === Infinity 
  12.       ? this.flatAllX() 
  13.       : n === 1 
  14.       ? this.flatOneX() 
  15.       : this.flatOneX().flat(n - 1); 
  16.   }; 

 四、array.filter 迈向高阶的逻辑判断 logic predicate

为什么要用 reduce 重新构建,因为能够帮助在头脑中始终擦亮 function 与 最终输出 acculator 的概念。

  1. const cusFilter = (arr, fn) 
  2.                 =>  arr.reduce((acc, val) 
  3.                 => (fn(val) ? acc.concat(y) 
  4.                         : acc), []); 

 五、array.find 与 array.findIndex 只找出首个元素

array.filter将会筛选出来全部的符合要求的元素,当我们只要单个元素的时候则应用 array.find.

  1. const cusFind = arr.reduce((acc, val) 
  2.    => (acc === undefined && fn(val) ? val 
  3.        : acc), undefined); 

 重新构建 array.findIndex:

  1. const cusFindIndex = arr.reduce((x, y, i) 
  2.                      => (x == -1 && fn(y) ? i  
  3.                          : x), -1); 

 进而,我们用 find 与 findIndex 简单的构建 includes 与 indexOf。

  1. arr.includes(value); // arr.find(v => v === value) 
  2. arr.indexOf(value);  // arr.findIndex(v => v === value) 

 六、快捷的 array.some 与 array.every

array 与 some 两函数虽然简单,思考和使用的时候尤其顺手。

  1. // arr.every(fn); 
  2. arr.reduce((a, v) => a && fn(v), true); // a for accumulator,  
  3. // arr.some(fn); 
  4. arr.reduce((a, v) => a|| fn(v), false); // v for value  

 至此,我们从reduce出发,将其他几个高阶函数全部模拟出来,reduce模拟帮助我们强化对每个函数中输入的arguments与输出的 result 的辨识。

 

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

2024-01-10 08:47:48

Python函数Map()

2024-11-08 12:42:34

Rustmapfilter

2024-06-04 00:20:00

Python函数

2010-06-03 16:46:23

Hadoop Map-

2023-01-03 13:30:14

C++代码map

2022-07-06 10:04:45

JavaScript数组前端

2021-03-05 07:45:59

JSreducemap

2014-03-18 10:16:58

SVM

2022-05-07 19:51:22

微软WindowsWindows 12

2020-07-29 07:52:41

JavaScript

2020-07-19 15:32:13

JavaScript开发技术

2020-12-22 14:11:45

JS forEach()map()

2017-03-28 21:25:19

无循环代码JavaScript

2021-08-24 09:39:23

ReduceJS数组

2023-05-06 07:27:47

2024-08-19 00:01:00

2020-02-13 18:05:18

数组reduce前端

2023-11-14 08:10:06

高级函数Python

2022-06-01 09:06:58

ES6数组函数

2021-09-29 06:03:37

JavaScriptreduce() 前端
点赞
收藏

51CTO技术栈公众号