一起聊聊JavaScript函數式編程

本篇文章為大家帶來了關於javascript的相關知識，其中主要介紹了函數式程式設計的相關問題，函數式程式設計可以理解為，以函數作為主要載體的程式設計方式，用函數去拆解、抽像一般的表達式，希望對大家有幫助。

相關推薦：javascript學習教學

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

本文將略去一大堆形式化的概念介紹，聚焦在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)));

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

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

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

鍊式最佳化

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

Javascript程式碼

// 计算数字之和  
  // 一般写法  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 的链式写法) Javascript代码 


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 模式。

Javascript程式碼

// 顺序请求两个接口  
  
  // 回调函数  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）

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

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

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

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

Javascript程式碼

// 创建一个闭包  function makeCounter() {  
  let k = 0;  
  
  return function() {  
    return ++k;  
  };  }  
  const counter = makeCounter();  
  console.log(counter());  // 1  console.log(counter());  // 2

makeCounter 這個函數的程式碼區塊，在傳回的函數中，對局部變數k ，進行了引用，導致局部變數無法在函數執行結束後，被系統回收掉，產生了閉包。而這個閉包的作用就是，「保留住「 了局部變量，使內層函數呼叫時，可以重複使用該變數；而不同於全域變量，該變數只能在函數內部被引用。

換句話說，閉包其實就是創造出了一些函數私有的 」持久化變數「。

所以從這個例子，我們可以總結出，閉包的創造條件是：

存在內、外兩層函數
內層函數對外層函數的局部變數進行了引用
閉包的用途
閉包的主要用途就是可以定義一些作用域限制的持久化變量，這些變數可以用來做快取或計算的中間量等等。

Javascript程式碼

// 简单的缓存工具  // 匿名函数创造了一个闭包  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 作为一个高阶函数，他接受一个函数参数作为映射的逻辑

Javascript代码

// 数组中每一项加一，组成一个新数组  
  // 一般写法  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 函数，它就是柯里化的实现

Javascript代码

// 获取目标文件对基础路径的相对路径  
  
  // 一般写法  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）

Javascript代码

// 数组中每个单词大写，做 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教程

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