本文主要是介绍javascript函数式编程之curry化,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
函数式编程是一种编程范式(编程思想,不要以为有啥模板),主要思想是将运算过程尽量写成一系列嵌套的函数。举个例子
//声明式
let d = a + b + c * d;//函数式
let d = add(a,add(b,mul(c,d)))
例子没有啥难度吧,那么函数式编程的函数和数学的函数有什么关系呢,其实函数式编程的函数就是数学里的函数
对应的每一个相同的x总会得到相同的y,即纯函数的定义。
函数式还有一些特性
函数是"第一等公民": 函数可以是变量,在JavaScript中就不用解释了
没有"副作用": 即不改变函数外部状态,跟纯函数差不多,想想怎样的函数才会对相同的x有不同的y呢,当然是引用了外部变量呗,比如
let t = 1;
function f (){//不是纯函数,而且还有副作用let x = t;t--;return x;
}
不修改状态:给没有副作用差不多意思,不改变外部状态
引用透明性: 纯函数的定义,对于任意的相同输入,都有相同的输出
概念扯完了,来本文重点内容,函数式编程的curry
curry(柯里化):是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数而且返回结果的新函数的技术。
如果不理解就来看个例子
function add4(a,b,c,d){return a + b + c + d;
}
add4(1,2,3,4)//未柯里化//那么柯里化的应该能这么用
add4_curry(1)(2)(3)(4)//柯里化
现在我们来实现一个curry化函数
我们想要的curry化函数是这样的
let add4 = curry(function(a,b,c,d) {//使用curry化函数return a + b + c + d;
});add4(1)(2,3)(4);
先看es5版的
/**** @param fn* @returns {function(): function()}*/
function curry(fn) {var args = [], // 装总的参数的数组n = fn.length; //传入的函数的参数个数return function core() { //返回一个接任意个参数的函数var arg = [].slice.call(arguments); //获取当前函数的参数args = args.concat(arg);n -= arg.length;return n === 0 ? fn.apply(null, args) : core;}
}//使用如下
var add4 = curry(function (a, b, c, d) {return a + b + c + d;
});
console.log(add4(1, 2)(2)(3));
认真看,应该能看懂
然后再来个es6版的
const curry = (fn, n = fn.length, args = []) => n === 0 ? fn(...args) : (...args1) => curry(fn, n - args1.length, [...args, ...args1]);//举例
const add5 = curry((a, b, c, d, e) => a + b + c + d + e);console.log(add5(1, 2)(3, 4)(5));
感谢es6提供的箭头函数和...运算符以及函数默认参数,才能把curry函数一行就写完,其实原理和es5版差不多。
现在来说说函数式编程的curry化到底有什么用,第一个用途,参数记忆,即对于多参数的函数我可以记忆前面的参数
比如
//add4的例子
let add1 = add4(1,2,3)
add1(4)//输出10
add1(5)//输出11
add1(6)//输出12
可以看到,我把add4的参数1,2,3给记忆下来了,然后如果其他地方得用到参数1,2,3的话就没必要写了,这部分的其他应用就留给读者去实践了。
第二Function.prototype.bind的实现,学过react的人绝对熟悉这个东西,而Funtion.prototype.bind的实现也利用了curry化的原理,不妨来实现个bind函数
Function.prototype.bind = function () {var args = [].slice.call(arguments);//第一部分参数var that = args.shift();//第一个参数为待绑定的thisvar fn = this;//当前调用bind的函数return function () {//curry化var args1 = [].slice.call(arguments);//第二部分参数return fn.apply(that, args.concat(args1));}
};//使用一下
function test(a,b) {console.log(this,a,b);
}
var t = test.bind({a:1,b:2},1);
t(2);
不过往原型上加东西通常是不好的,所有还是写个bind 函数吧
function bind(fn) {var args = [].slice.call(arguments);args.shift();//除去fnvar that = args.shift();//this参数return function () {var args1 = [].slice.call(arguments);//第二部分参数return fn.apply(that, args.concat(args1));}
}var getById = bind(document.getElementById, document);
getById("name");
函数式编程在react,redux等一些前端框架中使用非常广泛,建议读者可以好好学习一下这方面知识。
关于函数式编程还有偏函数,函数组合,管道,函子等很多内容,后面我的博客会慢慢补上。
这篇关于javascript函数式编程之curry化的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!