GX博客

了解函数式编程的基本概念有助于提高构建 React 应用的能力。

JavaScript 可以进行函数式编程的原因

JavaScript 中的函数是第一类成员，即函数就是数据，变量可以做的事情函数同样可以。函数可以作为函数的参数进行传递，也可以作为函数的执行结果被返回。ES6 标准还添加了如箭头函数、Promise对象和扩展运算符等特性，可以帮助我们更充分地使用函数式编程技术。

函数储存在变量中：

let log = msg => console.log(msg);
log('hello');

函数储存在属性中：

const obj = {
  log(msg) {
    console.log(msg)
  }
};
obj.log('hello');

函数存储在数组中：

const arr = [msg => console.log(msg)];
arr[0]('hello');

函数作为函数参数传递：

const log = fn => fn('hello');
log(msg => console.log(msg));

函数作为函数的执行结果返回：

const createFn = paramFn => message => paramFn(message + '!');
const log = createFn(msg => console.log(msg));
log('hello');

函数式编程的核心概念及 JavaScript 中的实现方式

因为函数式编程是声明式编程（与命令式编程相对立）的一个子编程范式，所以函数式编程同样具有声明式编程的特点。下面介绍函数式编程的一些核心概念。

原生数据的不可变性

只在原生数据的拷贝上进行编辑，然后用它们取代原生数据。ES6 的扩展运算符使数据拷贝变得容易。

let list = [1,2];
let newList = [0, ...list, 3];

纯函数

纯函数是返回结果只依赖于输入参数的函数。它需要访问的任意数据都是通过参数传递，参数作为不可变数据。它不修改自身以外的数据，并且总是返回一个值或其它函数。正是如此，纯函数是可测试的、不产生副作用的、不影响应用程序状态的。

const Title = props => <h1>{ props.title }</h1>

React 的 UI 是用纯函数表示的。它遵循三个原则：

• 函数应至少接收一个参数。
• 函数应返回一个值或者其它函数。
• 函数应把参数作为不可变数据。

数据转换

在参数不可变的前提下，将数据从一种类型转换到另一种类型。以下是 React 组件中最常用的转换方法：

• Array.filter
• Array.map
• Array.reduce
• Array.reduceRight
• Object.keys

高阶函数

高阶函数是可以操作其它函数的函数。它可以把函数当作参数传递，也可以返回一个函数。

递归

递归是函数调用自身的技术。它可以用作控制流程、处理异步过程、搜索数据结构等。

合成

将具体业务逻辑拆分成小型纯函数。这些小型纯函数用于处理特定的任务。最后把它们整合在一起。合成技术有很多的实现方式，包括链式调用、高阶函数等。合成的次序可以是顺序的，也可以是逆序。

假如一个输入参数需要经过多个小型纯函数处理，最后返回结果，我们可以这么实现：

const compose = (...fns) =>
  (arg) => fns.reduce( (accumulator, fn) => fn(accumulator) ,arg)
const result = compose(fn1, fn2, fn3)('hello')

以上合成高阶函数利用 Array.reduce 方法，把每个函数执行的结果作为累加器 accumulator 每次的迭代结果。