网站首页 > 知识剖析 正文
如我们所知,JavaScript是当今流行语言中对函数式编程支持最好的编程语言。而函数式编程"从一到无穷”的起点是 reduce,本文我们将尝试从 reduce 起步构建所有的其他函数。
一、万物之始 array.reduce 的应用
Reduce的核心在于降维,将数组reduce为一个值,比如求和:
const arr = [52, 71, 27, 38];
const sum = (x, y) => x + y;
const cusSum = arr.reduce(sum, 0);
将reduce作为思考工具,脑子中要始终留有 initial-value 初始值。
二、构建 array.map 从数学到编程
map是数学思维而直接入编程,从reduce中模拟构建为:
const cusMap = (arr, fn)
=> arr.reduce((x, y)
=> x.concat(fn(y)), []);
三、构建 array.flat array.flatMap 拍平数组
从array.flat我们窥探到 declaratively 编程的优势,只须将精力专注到要完成的任务上,而不必理会实现细节。用 reduce 实现为:
当只 flat 到一层深度时候:
# flat only to one level
const flat1 = arr => [].concat(...arr);
const flat2 = arr = arr.reduce(acc, v => acc.concat(v), [])
当需要 flat 到任意深度时, 用 reduce 完全重构 flat:
if (!Array.prototype.flat) {
Array.prototype.flat = function(n = 1) {
this.flatAllX = () =>
this.reduce(
(f, v) => f.concat(Array.isArray(v) ? v.flat(Infinity) : v),
[]
);
this.flatOneX = () => this.reduce((f, v) => f.concat(v), []);
return n === Infinity
? this.flatAllX()
: n === 1
? this.flatOneX()
: this.flatOneX().flat(n - 1);
};
}
四、array.filter 迈向高阶的逻辑判断 logic predicate
为什么要用 reduce 重新构建,因为能够帮助在头脑中始终擦亮 function 与 最终输出 acculator 的概念。
const cusFilter = (arr, fn)
=> arr.reduce((acc, val)
=> (fn(val) ? acc.concat(y)
: acc), []);
五、array.find 与 array.findIndex 只找出首个元素
array.filter将会筛选出来全部的符合要求的元素,当我们只要单个元素的时候则应用 array.find.
const cusFind = arr.reduce((acc, val)
=> (acc === undefined && fn(val) ? val
: acc), undefined);
重新构建 array.findIndex:
const cusFindIndex = arr.reduce((x, y, i)
=> (x == -1 && fn(y) ? i
: x), -1);
进而,我们用 find 与 findIndex 简单的构建 includes 与 indexOf。
arr.includes(value); // arr.find(v => v === value)
arr.indexOf(value); // arr.findIndex(v => v === value)
六、快捷的 array.some 与 array.every
array 与 some 两函数虽然简单,思考和使用的时候尤其顺手。
// arr.every(fn);
arr.reduce((a, v) => a && fn(v), true); // a for accumulator,
// arr.some(fn);
arr.reduce((a, v) => a|| fn(v), false); // v for value
至此,我们从reduce出发,将其他几个高阶函数全部模拟出来,reduce模拟帮助我们强化对每个函数中输入的arguments与输出的 result 的辨识。
猜你喜欢
- 2024-11-14 vue.js正确使用百度地图的方案 vue百度地图自定义控件
- 2024-11-14 七爪源码:如何在 JavaScript 中将 JSON 转换为地图
- 2024-11-14 在地图上创建热力图的方法 怎么用热力图选址
- 2024-11-14 快速了解 ES6 的Map与WeakMap es6 map使用场景
- 2024-11-14 Vue3 + TS + Leafletjs 打造企业级原神大地图
- 2024-11-14 好东西一起用,Cesium.js真是让3D地图尖叫的神奇框架!
- 2024-11-14 为 Next.js 项目创建站点地图文件
- 2024-11-14 JavaScript 轻松获取 Map 中的某个 key
- 2024-11-14 何时使用 Map 来代替普通的 JS 对象
- 2024-11-14 看了几十篇论文实现了个专业算法,用threejs做了个人员定位系统
- 04-29php开发者composer使用看这一篇就够了
- 04-29引用和变量声明在不同语言中的实作
- 04-29PHP 没你想的那么差
- 04-29Ubuntu linux 上的 Nginx 和 Php 安装
- 04-29CentOS下通过yum搭建lnmp(单版本PHP)
- 04-29为什么 PHP8 是个高性能版本
- 04-29PHP8函数包含文件-PHP8知识详解
- 04-29使用无参数函数进行命令执行
- 最近发表
- 标签列表
-
- xml (46)
- css animation (57)
- array_slice (60)
- htmlspecialchars (54)
- position: absolute (54)
- datediff函数 (47)
- array_pop (49)
- jsmap (52)
- toggleclass (43)
- console.time (63)
- .sql (41)
- ahref (40)
- js json.parse (59)
- html复选框 (60)
- css 透明 (44)
- css 颜色 (47)
- php replace (41)
- css nth-child (48)
- min-height (40)
- xml schema (44)
- css 最后一个元素 (46)
- location.origin (44)
- table border (49)
- html tr (40)
- video controls (49)