使用方便有用的方法,以减少代码行数,提高我们的工作效率,增加我们的摸鱼时间。
curry 方法
功能:柯里化一个函数。
const curry = (fn, arity = fn.length, ...args) =>
arity <= args.length ? fn(...args) : curry.bind(null, fn, arity, ...args);
说明一下:
- 使用递归
- 如果提供的参数(
args
)的数量足够,则调用传递的函数fn
。 - 否则,使用
function.prototype.bind()
返回一个 curry 过的函数fn
,该函数期望得到其余的参数。 - 如果我们想要 curry 一个接受可变参数数量的函数(一个可变参数函数,例如
Math.min()
),我们可以选择将参数数量传递给第二个形参。
有点抽象,直接 看下示例:
curry(Math.pow)(2)(10); // 1024
curry(Math.min, 3)(10)(50)(2); // 2
看完示例可能更懵了,这是什么鬼?
首先,我们先看 curry(Math.pow)(2)(10)
,
执行 curry(Math.pow)
,代入进去得:
const curry = (Math, arity = (Math.pow).length, null)
(Math.pow).length
表示函数参数的个数,
因为 Math.pow
需要传入两个参数,所以 (Math.pow).length
的值为2
。代入进去得:
const curry = (Math, arity = 2, null) => 2 <= args.length ? fn(...args) : curry.bind(null, fn, arity, ...args);
因为我们没有传参数,所以 args.length
为 0
, 2 <= 0
不成立,返回 curry.bind(null, fn, arity, ...args)
,所以
curry(Math.pow)(2)(10)
第一次 curry 后的结果,可以看成
curry(Math.pow, 2)(10)
此时 args.length
为 1
, 2 <= 1
不成立,所以还是返回 curry.bind(null, fn, arity, ...args)
,即
curry(Math.pow, 2)(10)
结果是
curry(Math.pow, 2, 10)
此时 args.length
为 2
, 2 <= 2
成立,所以返回 fn(...args)
,即
Math.pow(2, 10)
即 1024
彩蛋
大家可能对 bind 比较陌生,这里简单介绍一下:
bind()
方法会创建一个新函数,当这个新函数被调用时,它的 this
值是传递给 bind()
的第一个参数, 它的参数是 bind()
的其他参数和其原本的参数。
语法是这样样子的:
fun.bind(thisArg[, arg1[, arg2[, ...]]])
thisArg
当绑定函数被调用时,该参数会作为原函数运行时的this
指向。当使用new
操作符调用绑定函数时,该参数无效。- arg1, arg2, … (可选)当绑定函数被调用时,这些参数加上绑定函数本身的参数会按照顺序作为原函数运行时的参数。
参数
bind
的第一个参数会作为原函数运行时的 this 指向,不多说;而第二个开始的参数是可选的,当绑定函数被调用时,这些参数加上绑定函数本身的参数会按照顺序作为原函数运行时的参数。怎么理解?
function fn(a, b, c) {
return a + b + c;
}
var _fn = fn.bind(null, 10);
var ans = _fn(20, 30); // 60
fn 函数需要三个参数,_fn 函数将 10 作为默认的第一个参数,所以只需要传入两个参数即可,如果你不小心传入了三个参数,放心,也只会取前两个。
function fn(a, b, c) {
return a + b + c;
}
var _fn = fn.bind(null, 10);
var ans = _fn(20, 30, 40); // 60