这道题要考察的,就是对函数柯里化的理解。让我们先来解析一下题目的要求:
-
如果传递两个参数,我们只需将它们相加并返回。
-
否则,我们假设它是以sum(2)(3)的形式被调用的,所以我们返回一个匿名函数,它将传递给sum()(在本例中为2)的参数和传递给匿名函数的参数(在本例中为3)。
所以,sum 函数可以这样写:
function sum (x) {
if (arguments.length == 2) {
return arguments[0] + arguments[1];
}
return function(y) {
return x + y;
}
}
arguments 的用法挺灵活的,在这里它则用于分割两种不同的情况。当参数只有一个的时候,进行柯里化的处理。
那么,到底什么是函数的柯里化呢?接下来,我们将从概念出发,探究函数柯里化的实现与用途。
柯里化,是函数式编程的一个重要概念。它既
能减少代码冗余,也能增加可读性
。另外,附带着还能用来装逼。
先给出柯里化的定义:在数学和计算机科学中,柯里化是一种将使用多个参数的一个函数转换成一系列使用一个参数的函数的技术。
柯里化的定义,理解起来有点费劲。为了更好地理解,先看下面这个例子:
function sum (a, b, c) {
console.log(a + b + c);
}
sum(1, 2, 3); // 6
毫无疑问,sum 是个简单的累加函数,接受3个参数,输出累加的结果。
假设有这样的需求,sum的前2个参数保持不变,最后一个参数可以随意。那么就会想到,在函数内,是否可以把前2个参数的相加过程,给抽离出来,因为参数都是相同的,没必要每次都做运算。
如果先不管函数内的具体实现,调用的写法可以是这样: sum(1, 2)(3);
或这样 sum(1, 2)(10);
。就是,先把前2个参数的运算结果拿到后,再与第3个参数相加。
这其实就是函数柯里化的简单应用。
sum(1, 2)(3);
这样的写法,并不常见。拆开来看,sum(1, 2)
返回的应该还是个函数,因为后面还有 (3)
需要执行。
那么反过来,从最后一个参数,从右往左看,它的左侧必然是一个函数。以此类推,如果前面有n个(),那就是有n个函数返回了结果,只是返回的结果,还是一个函数。是不是有点递归的意思?
网上有一些不同的柯里化的实现方式,以下是个人觉得最容易理解的写法:
function curry (fn, currArgs) {
return function() {
let args = [].slice.call(arguments);
// 首次调用时,若未提供最后一个参数currArgs,则不用进行args的拼接
if (currArgs !== undefined) {
args = args.concat(currArgs);
}
// 递归调用
if (args.length < fn.length) {
return curry(fn, args);
}
// 递归出口
return fn.apply(null, args);
}
}
解析一下 curry 函数的写法:
首先,它有 2 个参数,fn 指的就是本文一开始的源处理函数 sum
。currArgs 是调用 curry 时传入的参数列表,比如 (1, 2)(3)
这样的。
再看到 curry 函数内部,它会整个返回一个匿名函数。
再接下来的 let args = [].slice.call(arguments);
,意思是将 arguments 数组化。arguments 是一个类数组的结构,它并不是一个真的数组,所以没法使用数组的方法。我们用了 call 的方法,就能愉快地对 args 使用数组的原生方法了。在这篇 细说call、apply以及bind的区别和用法 中,有关于 call 更详细的用法介绍。
currArgs !== undefined
的判断,是为了解决递归调用时的参数拼接。
最后,判断 args 的个数,是否与 fn (也就是 sum )的参数个数相等,相等了就可以把参数都传给 fn,进行输出;否则,继续递归调用,直到两者相等。
测试一下:
function sum(a, b, c) {
console.log(a + b + c);
}
const fn = curry(sum);
fn(1, 2, 3); // 6
fn(1, 2)(3); // 6
fn(1)(2, 3); // 6
fn(1)(2)(3); // 6
都能输出 6 了,搞定!
理解了柯里化的实现之后,让我们来看一下它的实际应用。柯里化的目的是,减少代码冗余,以及增加代码的可读性。来看下面这个例子:
const persons = [
{ name: ‘kevin’, age: 4 },
{ name: ‘bob’, age: 5 }
];
// 这里的 curry 函数,之前已实现
const getProp = curry(function (obj, index) {
const args = [].slice.call(arguments);
return obj[args[args.length - 1]];
});
const ages = persons.map(getProp(‘age’)); // [4, 5]
const names = persons.map(getProp(‘name’)); // [‘kevin’, ‘bob’]
在实际的业务中,我们常会遇到类似的列表数据。用 getProp 就可以很方便地,取出列表中某个 key 对应的值。
需要注意的是,const names = persons.map(getProp('name'));
执行这条语句时 getProp 的参数只有一个 name
,而定义 getProp 方法时,传入 curry 的参数有2个,obj
和 index
(这里必须写 2 个及以上的参数)。
为什么要这么写?关键就在于 arguments
的隐式传参。
const getProp = curry(function (obj, index) {
console.log(arguments);
// 会输出4个类数组,取其中一个来看
// {
// 0: {name: “kevin”, age: 4},
// 1: 0,
// 2: [
// {name: “kevin”, age: 4},
// {name: “bob”, age: 5}
最后
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级Android工程师,想要提升技能,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助。
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
链图片转存中…(img-I2NZRD9u-1714807969765)]
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!