JavaScript中pipe原理实战
栏目: JavaScript · 发布时间: 5年前
内容简介:一行代码中信息量是非常丰富的,可以从以下几个方面来分析
const pipe = (...fns) => x => fns.reduce((y, f) => f(y), x); 复制代码
原理
一行代码中信息量是非常丰富的,可以从以下几个方面来分析
(...fns)
-
...
是ES6标准中的数组扩展运算符 -
扩展运算符可以展开数组:
Math.max(...[1,2,3])
等价于Math.max(1,2,3)
-
同时与解构赋值结合起来,用于生成数组,上述中就是使用该方法,具体例子:
[...fns] = [1,2,3]
则fns=[1,2,3]
-
解构赋值:ES6允许按照一定模式从数组和对象中提取值,然后对变量进行赋值,这被称为解构;示例:
let [a,b,c] = [1,2,3]
-
解构赋值:ES6允许按照一定模式从数组和对象中提取值,然后对变量进行赋值,这被称为解构;示例:
=>
- 这个就是箭头函数了,左边是函数参数,右边是函数体
-
箭头函数有自己的特性,比如其中的this指向
- this的指向的是定义时所在的对象,而不是使用时所在的对象
- 不可以当做构造函数
-
不可以使用arguments对象,可以用rest参数代替
- rest参数是一种叫法,指的是(...variableName)这种写法的函数传参方式
- 不可以使用yield命令
reduce
- 该函数作用于数组对象
- 接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值
-
函数原型:Array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
- 我们可以定义函数function(total, currentValue, currentIndex, arr),作为个性化的逻辑处理部分,并手动指定初始值initialValue
- 初始值的作用在于 首次执行自定义函数时,total参数的值为我们设置的初始值initialValue
- currentValue为当前数组的值,也就是currentValue === arr[currentIndex]
函数科里化
-
柯里化函数是一种由需要接受多个参数的函数转化为一次只接受一个参数的函数:如果一个函数需要3个参数,那柯里化后的函数会接受一个参数并返回一个函数来接受下一个函数,这个函数返回的函数去传入第三个参数,最后一个函数会应用了所有参数的函数结果。
-
将上述转换一下形式:
const pipe = function(x, ...fns) { fns.reduce((y, f) => f(y), x); } 复制代码
进一步拆解
-
为了看到pipe函数的实际作用,进一步将上述函数进行拆解,用最简单的语法表示,以更清楚窥探其内部原理
function pipe(x, ...fns){ let total = x; for(let f in fns){ total = f(total) } return total; } 复制代码
示例
-
当我们调用
pipe(x, f1, f2)
时,返回f2(f1(x)) -
代码示例
const pipe = (...fns) => x => fns.reduce((y, f) => f(y), x); const f1 = x => { return x+1; } const f2 = x => { return 2 * x; } // (1+1)*2 = 4 let result = pipe(f1, f2)(1); console.log(result); 复制代码
以上所述就是小编给大家介绍的《JavaScript中pipe原理实战》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- Golang Context 原理与实战
- 阿里大牛实战归纳——Kafka架构原理
- 进阶的Redis之Sentinel原理及实战
- 二进制各种漏洞原理实战分析总结
- 如何正确管理HBase的连接,从原理到实战
- 进阶的Redis之哈希分片原理与集群实战
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。