理解 JavaScript 函數式編程

　JavaScript 函數#是一個存在了很久的話題，但似乎從2016 年開始，它變得越來越火熱。這可能是因為 ES6 語法對於函數式程式設計更為友好，也可能是因為諸如 RxJS (ReactiveX) 等函數式框架的流行。

　　看過許多關於函數式程式設計的講解，但是其中大部分是停留在理論層面，還有一些是僅針對Haskell 等純函數式程式語言的。而本文旨在聊一聊我眼中的函數式程式設計在 JavaScript 中的具體實踐，之所以是 「我眼中的」 即我所說的僅代表個人觀點，可能和部分 嚴格概念 是有衝突的。

　　本文將略去一大堆形式化的概念介紹，重點展示在JavaScript 中到底什麼是函數式的程式碼、函數式程式碼與一般寫法有什麼差別、函數式的程式碼能給我們帶來什麼好處以及常見的一些函數式模型都有哪些。

　我理解的函數式程式設計

　　我認為函數式程式設計可以理解為，以函數作為主要載體的程式設計方式，用函數去拆解、抽像一般的表達式

　　與命令式相比，這樣做的好處在哪？主要有以下幾點：

• 語意更清晰

• #可重複使用性更高

• 可維護性更好

• 作用域局限，副作用少

#　　基本的函數式程式設計

　　下面範例是一個具體的函數式體現

// 数组中每个单词，首字母大写


// 一般写法
const arr = ['apple', 'pen', 'apple-pen'];
for(const i in arr){
  const c = arr[i][0];
  arr[i] = c.toUpperCase() + arr[i].slice(1);
}

console.log(arr);


// 函数式写法一
function upperFirst(word) {
  return word[0].toUpperCase() + word.slice(1);
}

function wordToUpperCase(arr) {
  return arr.map(upperFirst);
}

console.log(wordToUpperCase(['apple', 'pen', 'apple-pen']));


// 函数式写法二
console.log(arr.map(['apple', 'pen', 'apple-pen'], word => word[0].toUpperCase() + word.slice(1)));

　　當情況變得更加複雜時，表達式的寫法會遇到幾個問題：

1. 表意不明顯，逐漸變得難以維護

2. 復用性差，會產生更多的程式碼量

3. 會產生很多中間變數

　　函數式程式設計很好的解決了上述問題。首先參考 函數式寫法一，它利用了函數封裝性將函數做拆解（粒度不唯一），並封裝為不同的函數，而再利用組合的呼叫達到目的。這樣做使得表意清晰，易於維護、重複使用以及擴充。其次利用 高階函數，Array.map 取代 for…of 做陣列遍歷，減少了中間變數和運算。

　　而函數式寫法一 和函數式寫法二 之間的主要差別在於，可以考慮函數是否後續有復用的可能，如果沒有，則後者更優。

　　鍊式最佳化

　　從上面 函數式寫法二 我們可以看出，函數式程式碼在寫的過程中，很容易造成橫向延展，即產生多層嵌套，以下我們舉個比較極端點的例子。

// 计算数字之和


// 一般写法
console.log(1 + 2 + 3 - 4)


// 函数式写法
function sum(a, b) {
  return a + b;
}

function sub(a, b) {
  return a - b;
}

console.log(sub(sum(sum(1, 2), 3), 4);

　　本例僅為展示橫向延展 的比較極端的情況，隨著函數的嵌套層數不斷增多，導致代碼的可讀性大幅下降，還很容易產生錯誤。

　　在這種情況下，我們可以考慮多種最佳化方式，例如下面的 鍊式最佳化 。

// 优化写法 (嗯，你没看错，这就是 lodash 的链式写法)
const utils = {
  chain(a) {
    this._temp = a;
    return this;
  },
  sum(b) {
    this._temp += b;
    return this;
  },
  sub(b) {
    this._temp -= b;
    return this;
  },
  value() {
    const _temp = this._temp;
    this._temp = undefined;
    return _temp;
  }
};

console.log(utils.chain(1).sum(2).sum(3).sub(4).value());

　　這樣改寫後，結構會整體變得比較清晰，而且鏈的每一環在做什麼也可以很容易的展現出來。函數的巢狀和鍊式的比較還有一個很好的例子，那就是 回呼函數# 和 Promise 模式。

// 顺序请求两个接口

// 回调函数
import $ from 'jquery';
$.post('a/url/to/target', (rs) => {
  if(rs){
    $.post('a/url/to/another/target', (rs2) => {
      if(rs2){
        $.post('a/url/to/third/target');
      }
    });
  }
});


// Promise
import request from 'catta';  // catta 是一个轻量级请求工具，支持 fetch,jsonp,ajax，无依赖
request('a/url/to/target')
  .then(rs => rs ? $.post('a/url/to/another/target') : Promise.reject())
  .then(rs2 => rs2 ? $.post('a/url/to/third/target') : Promise.reject());

　　隨著回呼函數嵌套層級和單層複雜度增加，它將會變得臃腫且難以維護，而Promise 的鍊式結構，在高複雜度時，仍能縱向擴展，而且層次隔離很清晰。

　常見的函數式程式設計模型

　　閉包（Closure）

可以保留局部變數不被釋放的程式碼區塊，被稱為一個閉包

　　閉包的概念比較抽象，相信大家都或多或少知道、用到這個特性

　　那麼閉包到底能為我們帶來什麼好處？

　　先來看看如何建立一個閉包：

// 创建一个闭包
function makeCounter() {
  let k = 0;

  return function() {
    return ++k;
  };
}

const counter = makeCounter();

console.log(counter());  // 1
console.log(counter());  // 2

　　makeCounter 这个函数的代码块，在返回的函数中，对局部变量 k ，进行了引用，导致局部变量无法在函数执行结束后，被系统回收掉，从而产生了闭包。而这个闭包的作用就是，“保留住“ 了局部变量，使内层函数调用时，可以重复使用该变量；而不同于全局变量，该变量只能在函数内部被引用。

　　换句话说，闭包其实就是创造出了一些函数私有的 ”持久化变量“。

　　所以从这个例子，我们可以总结出，闭包的创造条件是：

1. 存在内、外两层函数

2. 内层函数对外层函数的局部变量进行了引用

　　闭包的用途

　　闭包的主要用途就是可以定义一些作用域局限的持久化变量，这些变量可以用来做缓存或者计算的中间量等等。

// 简单的缓存工具
// 匿名函数创造了一个闭包
const cache = (function() {
  const store = {};
  
  return {
    get(key) {
      return store[key];
    },
    set(key, val) {
      store[key] = val;
    }
  }
}());

cache.set('a', 1);
cache.get('a');  // 1

　　上面例子是一个简单的缓存工具的实现，匿名函数创造了一个闭包，使得 store 对象 ，一直可以被引用，不会被回收。

　　闭包的弊端

　　持久化变量不会被正常释放，持续占用内存空间，很容易造成内存浪费，所以一般需要一些额外手动的清理机制。

　　高阶函数

接受或者返回一个函数的函数称为高阶函数

　　听上去很高冷的一个词汇，但是其实我们经常用到，只是原来不知道他们的名字而已。JavaScript 语言是原生支持高阶函数的，因为 JavaScript 的函数是一等公民，它既可以作为参数又可以作为另一个函数的返回值使用。

　　我们经常可以在 JavaScript 中见到许多原生的高阶函数，例如 Array.map , Array.reduce , Array.filter

　　下面以 map 为例，我们看看他是如何使用的

　　map （映射）

映射是对集合而言的，即把集合的每一项都做相同的变换，产生一个新的集合

　　map 作为一个高阶函数，他接受一个函数参数作为映射的逻辑

// 数组中每一项加一，组成一个新数组


// 一般写法
const arr = [1,2,3];
const rs = [];
for(const n of arr){
  rs.push(++n);
}
console.log(rs)


// map改写
const arr = [1,2,3];
const rs = arr.map(n => ++n);

　　上面一般写法，利用 for...of 循环的方式遍历数组会产生额外的操作，而且有改变原数组的风险

　　而 map 函数封装了必要的操作，使我们仅需要关心映射逻辑的函数实现即可，减少了代码量，也降低了副作用产生的风险。

　　柯里化（Currying）

给定一个函数的部分参数，生成一个接受其他参数的新函数

　　可能不常听到这个名词，但是用过 undescore 或 lodash 的人都见过他。

　　有一个神奇的 _.partial 函数，它就是柯里化的实现

// 获取目标文件对基础路径的相对路径

// 一般写法
const BASE = '/path/to/base';
const relativePath = path.relative(BASE, '/some/path');


// _.parical 改写
const BASE = '/path/to/base';
const relativeFromBase = _.partial(path.relative, BASE);

const relativePath = relativeFromBase('/some/path');

　　通过 _.partial ，我们得到了新的函数 relativeFromBase ，这个函数在调用时就相当于调用 path.relative ，并默认将第一个参数传入 BASE ，后续传入的参数顺序后置。

　　本例中，我们真正想完成的操作是每次获得相对于 BASE 的路径，而非相对于任何路径。柯里化可以使我们只关心函数的部分参数，使函数的用途更加清晰，调用更加简单。

　　组合（Composing）

将多个函数的能力合并，创造一个新的函数

　　同样你第一次见到他可能还是在 lodash 中，compose 方法（现在叫 flow）

// 数组中每个单词大写，做 Base64

// 一般写法 (其中一种)
const arr = ['pen', 'apple', 'applypen'];
const rs = [];
for(const w of arr){
  rs.push(btoa(w.toUpperCase()));
}
console.log(rs);


// _.flow 改写
const arr = ['pen', 'apple', 'applypen'];
const upperAndBase64 = _.partialRight(_.map, _.flow(_.upperCase, btoa));
console.log(upperAndBase64(arr));

　　_.flow 将转大写和转 Base64 的函数的能力合并，生成一个新的函数。方便作为参数函数或后续复用。

　自己的观点

　　我理解的 JavaScript 函数式编程，可能和许多传统概念不同。我并不只认为 高阶函数 算函数式编程，其他的诸如普通函数结合调用、链式结构等，我都认为属于函数式编程的范畴，只要他们是以函数作为主要载体的。

　　而我认为函数式编程并不是必须的，它也不应该是一个强制的规定或要求。与面向对象或其他思想一样，它也是其中一种方式。我们更多情况下，应该是几者的结合，而不是局限于概念。

以上是理解 JavaScript 函數式編程的詳細內容。更多資訊請關注PHP中文網其他相關文章！