函数式编程

前言

在讲函数式组件之前,笔者有必要声明一下,笔者对函数式编程知之甚少,此篇文章全是因为函数式编程在当今前端开发较为流行,所以才要去学习Orz。像 ES6 中的箭头函数,Redux 中的 compose,React 16.6之后的 React.memo(),16.8 之后的 Hooks,使用函数式组件成为主流(自然,Vue3 中也有 composition API等)

因为我们使用的各种框架,越来越偏向于函数式开发,所以为了看懂、使用这些代码,我们有必要学习函数式编程

什么是函数式编程

写代码时,不同的写法造成不同的门派,主流的编程范式有两种,即命令式编程(Imperative programming)和声明式编程(Declarative programming)

当然还有像事件驱动编程等,此处不讲

在命令式编程语言中一般支持四种基本语句:

  • 运算语句
  • 循环语句(for、while)
  • 条件分支语句(if else、switch)
  • 无条件分支语句(return、break、continue)

它关注的过程,所以也被称为过程化编程,与之对应的是声明式编程

  • 命令式编程告诉计算机如何计算、关心解决问题的步骤
  • 声明式编程告诉计算机需要计算什么,关心解决问题的目标

两种编程方式在 JavaScript 均有开花,在以往的开发中(即React、Vue等未出现前),我们习惯使用命令式编程,其中的代表就是面向对象编程,即通过对象、类、继承、封装等特性实现面向对象编程,流行的库是 jquery

即使当初不那么流行,但 JavaScript 是一直支持声明式编程的,即通过函数式编程来实现,其原因是函数是一等公民,它能作为参数和返回值。流行的库是 underscorejs、lodash

函数式编程有哪些特点

柯里化(Currying)、缓存函数、纯函数、函数组合(compose)、不可变数据、高阶函数

我们依次讲讲这几个特点

柯里化

什么是柯里化

柯里化是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数而且返回结果的新函数的技术

——wikiopen in new window

也就是说,柯里化是一种函数的转换,它是将一个函数从f(a, b, c) 的写法转换为f(a)(b)(c)

通俗来讲:用闭包把参数保存起来,当参数的数量足够执行函数了,就开始执行函数。它不会调用函数,只是对函数进行转换

// 柯里化之前
function add(x, y) {
    return x + y;
}

add(1, 2); // 3

// 柯里化之后
function add(y) {
    return function (x) {
        return x + y;
    };
}
// ES6 箭头函数表示
const add = x => y => x + y;

add(2)(1);

如上案例,我们就是将add(1, 2) 转换为了 add(2)(1),当然,此案例是模拟柯里化,一般来说,我们会写个「转换函数」将函数适配成柯里化型函数

const curryAdd = curry(add)
console.log(curryAdd(1)(2)) // 3

那么如何实现 curry 呢?需要满足两点

  • 判断当前函数传入的参数是否大于或等于fn 需要参数的数量,如果是,直接执行 fn
  • 如果传入参数数量不够,返回一个闭包,暂存传入的参数,并重新返回 curry 函数
const curry = (fn, ...args) => {
    if (args.length >= fn.length) {
        return fn(...args)
    } else {
        return (...args2) => curry(fn, ...args, ...args2)
    }
}

我们来一个简单的实例验证一下:

function fun(a, b, c) {
    return a + b + c;
}
const curryFun = curry(fun);
curryingFun(1)(2)(3); // 6
curryingFun(1, 2)(4); // 7
curryingFun(1, 2, 5); // 8

翻看函数式编程概念的两个库:undersore.js 及 lodash 中各自实现的 curry

箭头函数的使用

在上面的例子中,我们频繁使用箭头函数,箭头函数的魅力之一是它符合函数式编程的思维,例如:

function add(y) {
    return function (x) {
        return x + y;
    };
}
const add = x => y => x + y;
// redux 中的 compose 函数
const compose = (...func) => {
    if (func.length === 0) {
        return args => args
    }
    if (func.length === 1) {
        return func[0]
    }
    return func.reduce((a,b) => (...args) => a(b(...args)))
}
function enhancer(originF) {
    return function (...args) {
        console.log('before');
        const result = originF(...args);
        console.log('after');
        return result;
    };
}
// 等于
const enhancer =
    (originF) =>
    (...args) => {
        console.log('before');
        const result = originF(...args);
        console.log('after');
        return result;
    };
// 三数之乘
const multi = a => b => c => a * b * c

笔者认为,柯里化就是利用了闭包的特性,将参数存着,到了要使用的时候再释放,而这正式柯里化的应用之一

柯里化的应用

在开发中,我们会遇到这种情况,开发了一个工具函数,在调用时,会使用一个频繁的参数,而如果将这个参数提取出来,就能优化代码,如

function add(a, b) {
    return a + b
}

add(10, 1) // 11
add(10, 11) // 21
add(10, 111) // 121

如果我们柯里化,将第一个参数 10 内置进函数中,代码就能清晰明了

// 最简单的优化
functon add10(b) {
    return add(10, b)
} 

add10(1) // 11
add10(11) // 21
add10(111) // 121

函数 add10 就是经过了柯里化的函数,就像我们上文所讲,一般用个包装函数将其适配成柯里化型函数,这里我们调用上文的 curry 函数

// 完整版
function add(a, b) {
    return a + b;
}
// 柯里化包装函数
const curry = (fn, ...args) => {
    if (args.length >= fn.length) {
        return fn(...args)
    } else {
        return (...args2) => curry(fn, ...args, ...args2)
    }
}

const add10 = curry(add, 10)

add10(1) // 11
add10(11) // 21
add10(111) // 121

缓存函数

缓存函数就是将函数返回值缓存起来的方法。与柯里化相比,它似乎更简单。例如

function add(a, b) {
    return a + b;
}
let memoAdd = memoize(add)
memoAdd(1, 2) // 3
memoAdd(1, 3) // 相同的参数,第二次调用时,从缓存中取出数据

如何实现呢?

其实很简单,就是用闭包存在内存中。如果一致,就返回,不一致就存在对象中,再返回

const memoize = (func) => {
    let cache = {}
    return function(key) {
        if (!cache[key]) {
            cache[key] = func.apply(this, arguments)
        }
        return cache[key]
    }
}

纯函数

笔者认为纯函数就类似数学中的函数,例如 y = f(x),更具体点就是:y=2x,相同的输入,就有相同的输出,在执行过程中不会产生副作用

所有它有两个特点:

  1. 不改变原数据(没有副作用)
  2. 返回一个新数据
const arr = [1, 2, 3]
// 纯函数
arr.slice(1)
console.log(arr) // [1, 2, 3]
// 产生副作用,非纯函数
arr.splice(1)
console.log(arr) // [1]

JavaScript 中的哪些 API 是纯函数

数组: slice、concat、map、reduce、filter

slice、concat 我们在 拷贝的秘密 曾经讲过,是浅拷贝的方法

map、filter 是ES6 新增的 API

字符串:String 类型及其他的基本类型的 API 都是不可变的,它们的每个 API 都是纯函数,不会改变原数据

var str = "hello"
console.log(str.slice(0, 3)) // hel , slice 在 String 类型中同样适用,
console.log(str) // hello
console.log(str.substr(0, 3)) // hel
console.log(str) // hello
console.log(str.substring(0,3)); // hel
console.log(str) // hello
// 其他的 API 也是如此

函数组合(compose)

就是将多个函数依次执行,将这些函数组合起来,自动依次执行,这一过程就是函数组合

这么做的目的是为了让代码更加简单且具有可读性

function double(num) {
    return num * 2
}

function square(num) {
    return num ** 2
}
// 普通做法
const res = square(double(10))
console.log(res) // 400

// 函数组合
function composeFn(fn1, fn2) {
    return function (count) {
        return fn2(fn1(count))
    }
}

const newFn = composeFn(double, square)
const res2 = newFn(20) // 1600

看看 underscore 的 composeopen in new window 函数

function compose() {
    var args = arguments;
    var start = args.length - 1;
    return function() {
        var i = start;
        var result = args[start].apply(this, arguments);
        while(i--) result = args[i].call(this, result);
        return result;
    }
}

看到 compose 是否很熟悉,redux 中的源码open in new window是这样写的

function compose(...funcs) {
    if (funcs.length === 0) {
        return arg => arg
    }
    if(funcs.length === 1) {
        return funcs[0]
    }
    return funcs.reduce((a,b) => (...args) => a(b(...args)))
}

如果在实际开发中,就可以用这一概念解决洋葱代码

fn3(fn2(fn1(fn0(x)))) // 洋葱代码
var result = compose(f3, f2, f1, f0) // 函数组合代码
result(x)

高阶函数

简单来说,高阶函数就是一个返回另一个函数的函数

function sayHello() {
    return function() {
        console.log("hello")
    }
}

其本质是因为函数是一等公民,满足作为参数或者返回值

其 React 中也有高阶组件的概念,其原理都一样,即将组件当作参数传入,返回另一个组件

不可变数据

不可变数据结构式函数式编程中的基本准则

JavaScript 的对象是可变的,原因是为了节约内存,但也同样带来了副作用,当应用程序复杂后,维护代码难度会加深

我们在 拷贝的秘密 中曾经讲过,基本类型的数据是不可变的,因为它们存在栈内存,而引用类型(即对象)的数据是可变的,它存在堆内存,当赋值时,拷贝的时它的引用地址

所以我们在赋值时会根据情况使用浅拷贝、深拷贝来实现

在 React 开发时,我们会用 immutable.jsopen in new windowimmeropen in new window 对数据进行不可变

总结

我们不管其他的,单单就函数式编程在前端方面有哪些用途?如在 Koa 中的洋葱模型、redux 中的 compose 函数就是函数组合,React 开发时的 HOC 高阶组件就采用了高阶函数,以及它(React)为了让数据保持唯一性,而可以引用 不可变数据库( immutable.js、immer )是函数式编程的特性——不可变数据

当然,这些只是笔者对函数式编程浅薄的认知,其内容当然不知以上说的几点,还有惰性函数、函子等知识点,以及其他语言中的函数式编程,待笔者等级提升后再来战

参考资料

Last Updated:
Contributors: johan