深入理解JavaScript——函数式编程

头像
山头人汉波
     上海
    阅读 6 分钟
    3

    前言

    在讲函数式组件之前，笔者有必要声明一下，笔者对函数式编程知之甚少，此篇文章全是因为函数式编程在当今前端开发较为流行，所以才要去学习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）、不可变数据、高阶函数

    我们依次讲讲这几个特点

    柯里化

    什么是柯里化

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

    ——wiki

    也就是说，柯里化是一种函数的转换，它是将一个函数从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 的 compose 函数

    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 中的源码是这样写的

    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.js 、immer 对数据进行不可变

    总结

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

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

    参考资料

    系列文章

    前端javascriptecmascript-6
    山头人汉波
    391 声望554 粉丝
    « 上一篇
    深入理解JavaScript——防抖与节流
    下一篇 »
    深入理解JavaScript——垃圾回收机制

    引用和评论

    推荐阅读
    头像
    前端学Ruby：全栈论坛（地宫）项目二

    山头人汉波阅读 962

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 8.7k评论 7

    头像
    网页设计的垂直居中

    寒青赞 39阅读 4.2k评论 3

    头像
    CSS团队协作规范

    寒青赞 35阅读 3.1k

    头像
    前端如何入门 Go 语言

    robin赞 25阅读 7.2k评论 8

    头像
    前站 - 前端导航，搜索社区，阅读文章，提升技术

    bestvist赞 25阅读 13.6k评论 3

    头像
    不使用 JS 纯 CSS 获取屏幕宽高

    南城FE赞 15阅读 1.6k评论 3

    0 条评论
    得票最新