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]

=>

  • 这个就是箭头函数了,左边是函数参数,右边是函数体
  • 箭头函数有自己的特性,比如其中的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原理实战》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

无界面交互

无界面交互

[美]Golden Krishna / 杨名 / 人民邮电出版社 / 2017-1 / 49.00元

“真希望在硅谷工作的人们已经读过这本书了。”——Doug LeMoine,Cooper总经理 “这本书的写作看似随意,字里行间却透着一种辛辣、幽默的反叛精神,这种精神可以帮助我们走出当今交互设计的界面泥潭。当你心情低落时,不妨翻开这本书,读上几页,你会开始微笑,大笑,并从中学到很多东西。书中的文字有一股振奋人心的力量。”——Don Norman,加州大学圣迭戈分校设计实验室主任,《设计心理学......一起来看看 《无界面交互》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具