Js-函數式編程

前言

JavaScript是一門多範式語言，即可使用OOP（面向對象），也可以使用FP（函數式），由於筆者最近在學習React相關的技術棧，想進一步深入瞭解其思想，所以學習了一些FP相關的知識點，本文純屬個人的讀書筆記，如果有錯誤，望輕噴且提點。

什麼是函數式編程

函數式編程（英語：functional programming）或稱函數程序設計、泛函編程，是一種編程範式，它將計算機運算視爲函數運算，並且避免使用程序狀態以及易變對象。即對過程進行抽象，將數據以輸入輸出流的方式封裝進過程內部，從而也降低系統的耦合度。

爲什麼Js支持FP

Js支持FP的一個重要原因在於，在JS中，函數是一等公民。即你可以像對其他數據類型一樣對其進行操作，把他們存在數組裏，當作參數傳遞，賦值給變量...等等。如下：

const func = () => {}

// 存儲
const a = [func]

// 參數 返回值
const x = (func) => {
    ......
    ......
    return func
}

x(func)

這個特性在編寫語言程序時帶來了極大的便利，下面的知識及例子都建立在此基礎上。

純函數

概念

純函數是這樣一種函數，即相同的輸入，永遠會得到相同的輸出，而且沒有任何可觀察的副作用。
副作用包括但不限於：

• 打印/log
• 發送一個http請求
• 可變數據
• DOM查詢

簡單一句話， 即只要是與函數外部環境發生交互的都是副作用。

像Js中， slice就是純函數， 而splice則不是

var xs = [1,2,3,4,5];

// 純的
xs.slice(0,3);
//=> [1,2,3]

xs.slice(0,3);
//=> [1,2,3]

xs.slice(0,3);
//=> [1,2,3]


// 不純的
xs.splice(0,3);
//=> [1,2,3]

xs.splice(0,3);
//=> [4,5]

xs.splice(0,3);
//=> []

例子

在React生態中，使用純函數的例子很常見，如React Redner函數，Redux的reducer，Redux-saga的聲明式effects等等。

React Render
在React中，Render返回了一個JSX表達式，只要輸入相同，即可以保證我們拿到同樣的輸出（最終結果渲染到DOM上），而內部的封裝細節我們不需要關心，只要知道它是沒有副作用的，這在我們開發過程中帶來了極大的便利。當我們的程序出問題時（渲染出來與預期不符合），我們只要關心我們的入參是否有問題即可。

class Component extends React.Component {
    render() {
        return (
            <div />
        )
    }
}

Redux的reducer
Redux的reducer函數要求我們每一次都要返回一個新的state, 並且在其中不能有任何副作用，只要傳入參數相同，返回計算得到的下一個 state 就一定相同。沒有特殊情況、沒有副作用，沒有 API 請求、沒有變量修改，單純執行計算。這樣做可以使得我們很容易的保存了每一次state改變的情況，對於時間旅行這種需求更是天然的親近。特別是在調試的過程中，我們可以藉助插件，任意達到每一個state狀態，能夠輕鬆的捕捉到錯誤是在哪一個節點出現。

function todoApp(state = initialState, action) {
  switch (action.type) {
    case SET_VISIBILITY_FILTER:
      return Object.assign({}, state, {
        visibilityFilter: action.filter
      })
    case ADD_TODO:
      return Object.assign({}, state, {
        todos: [
          ...state.todos,
          {
            text: action.text,
            completed: false
          }
        ]
      })
    default:
      return state
  }
}

Redux-sage的聲明式effects
許多時候， 我們會寫這樣的函數

const sendRequest = () => {
    return axions.post(...)
}

這是一個不純的函數，因爲它包含了副作用，發起了http請求，我們可以這樣封裝一下：

const sendRequestReducer = () => {
    return () => {
        return axios.post(...)
    }
}

ok, 現在是一個純函數了，正如Redux-saga中的effects一樣：

import { call } from 'redux-saga/effects'

function* fetchProducts() {
  const products = yield call(Api.fetch, '/products')
  // ...
}

實際上call不立即執行異步調用，相反，call 創建了一條描述結果的信息。那麼這樣做除了增加代碼的複雜度，還可以給我們帶來什麼？參考saga的官方文檔就知道了， 答案是測試：

這些 聲明式調用（declarative calls） 的優勢是，我們可以通過簡單地遍歷 Generator 並在 yield 後的成功的值上面做一個 deepEqual 測試， 就能測試 Saga 中所有的邏輯。這是一個真正的好處，因爲複雜的異步操作都不再是黑盒，你可以詳細地測試操作邏輯，不管它有多麼複雜。

import { call } from 'redux-saga/effects'
import Api from '...'

const iterator = fetchProducts()

// expects a call instruction
assert.deepEqual(
  iterator.next().value,
  call(Api.fetch, '/products'),
  "fetchProducts should yield an Effect call(Api.fetch, './products')"
)

總結

純函數有着以下的優點

可緩存性
首先，純函數總能夠根據輸入來做緩存。實現緩存的一種典型方式是 memoize 技術：

var memoize = function(f) {
  var cache = {};

  return function() {
    var arg_str = JSON.stringify(arguments);
    cache[arg_str] = cache[arg_str] || f.apply(f, arguments);
    return cache[arg_str];
  };
};

var squareNumber  = memoize(function(x){ return x*x; });

squareNumber(4);
//=> 16

squareNumber(4); // 從緩存中讀取輸入值爲 4 的結果
//=> 16

squareNumber(5);
//=> 25

squareNumber(5); // 從緩存中讀取輸入值爲 5 的結果
//=> 25

可移植性
純函數因爲不依賴外部環境，所以非常便於移植，你可以在任何地方使用它而不需要附帶着引入其他不需要的屬性。

可測試性
如上面提到的Redux reducer和Redux-saga一樣， 它對於測試天然親近。

並行代碼
我們可以並行運行任意純函數。因爲純函數根本不需要訪問共享的內存，而且根據其定義，純函數也不會因副作用而進入競爭態（race condition）。

柯里化

概念

在計算機科學中，柯里化（英語：Currying），又譯爲卡瑞化或加里化，是把接受多個參數的函數變換成接受一個單一參數（最初函數的第一個參數）的函數，並且返回接受餘下的參數而且返回結果的新函數的技術。

var add = function(x) {
  return function(y) {
    return x + y;
  };
};

var increment = add(1);
var addTen = add(10);

increment(2);
// 3

addTen(2);
// 12

例子

在Lodash類庫中，就有這麼一個curry函數來幫助我們處理科裏化，關於如何實現一個curry函數，推薦大家參考這篇文章

var abc = function(a, b, c) {
  return [a, b, c];
};
 
var curried = _.curry(abc);
 
curried(1)(2)(3);
// => [1, 2, 3]
 
curried(1, 2)(3);
// => [1, 2, 3]
 
curried(1, 2, 3);
// => [1, 2, 3]
 
// Curried with placeholders.
curried(1)(_, 3)(2);
// => [1, 2, 3]

偏函數應用

偏函數本身與科裏化並不相關， 但在日常的編寫程序中，或許我們使用更多的是偏函數，所以在這裏簡單的介紹一下偏函數

偏函數應用是找一個函數，固定其中的幾個參數值，從而得到一個新的函數。

有時候，我們會寫一個專門發送http請求的函數

const sendRequest = (host, fixPath, path) => {
    axios.post(`${host}\${fixPath}\{path}`)
}

但是大多數時候， host和fixPath是固定的， 我們不想每次都寫一次host和fixPath，但我們又不能寫死，因爲我們需要sendRequest這個函數是可以移植的，不受環境的約束，那麼我們可以這樣

const sendRequestPart = (path) => {
    const host = '...'
    const fixPath = '...'
    return sendRequest(host, fixPath, path)
}

總結

科裏化和偏函數的主要用途是在組合中，這一小節主要介紹了他們的使用方法和行爲。

組合 compose

組合的功能非常強大， 也是函數式編程的一個核心概念， 所謂的對過程進行封裝很大程度上就是依賴於組合。那麼什麼是組合？

var compose = function(f,g) {
  return function(x) {
    return f(g(x));
  };
};

var toUpperCase = function(x) { return x.toUpperCase(); };
var exclaim = function(x) { return x + '!'; };
var shout = compose(exclaim, toUpperCase);

shout("send in the clowns");
//=> "SEND IN THE CLOWNS!"

上面的compose就是一個最簡單的組合函數， 當然組合函數並不限制於傳入多少個函數參數，它最後只返回一個函數，我個人更喜歡將它認爲像管道一樣，將數據經過不同函數的逐漸加工，最後得到我們想要的結果

const testFunc = compose(func1, func2, func3, func4)  
testFunc(...args) 

在js中， 實現compose函數比較容易

const compose = (...fns) => {
    return (...args) => {
        let res = args
        for (let i = fns.length - 1; i > -1; i--) {
            res = fns[i](res)
        }
        return res
    }
}

例子

React官方推崇組合優於繼承這個概念，這裏選擇兩個比較典型的例子來看

React中的高階組件
在React中，有許多使用高階組件的地方，如React-router的withRouter函數，React-redux的connect函數返回的函數，

// Navbar 和 Comment都是組件
const NavbarWithRouter = withRouter(Navbar);
const ConnectedComment = connect(commentSelector, commentActions)(Comment);

而由於高階函數的簽名是Component => Component。所以我們可以很容易的將他們組合到一起，這也是官方推薦的做法

// 不要這樣做……
const EnhancedComponent = withRouter(connect(commentSelector)(WrappedComponent))

// ……你可以使用一個函數組合工具
// compose(f, g, h) 和 (...args) => f(g(h(...args)))是一樣的
const enhance = compose(
  // 這些都是單獨一個參數的高階組件
  withRouter,
  connect(commentSelector)
)
const EnhancedComponent = enhance(WrappedComponent)

Redux的compose函數
Redux的compose函數實現要比上面提到的簡潔的多

export default 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)))
}

這個實現咋看之下有點懵逼， 所以可以拆開來看一下

composeFn = compose(fn1, fn2, fn3, fn4)

那麼reduce循環運行時， 第一次a就是fn1, b是fn2, 第二次a是(...args) => fn1(fn2(...args)), b是fn3, 第三次運行的時候則是a是(...args) => fn1(fn2(fn3(...args))), b是fn4， 最後返回了fn1(fn2(fn3(fn4(...args))))

pointfree

它的意思是說，函數無須提及將要操作的數據是什麼樣的。

// 非 pointfree，因爲提到了數據：word
var snakeCase = function (word) {
  return word.toLowerCase().replace(/\s+/ig, '_');
};

// pointfree
var snakeCase = compose(replace(/\s+/ig, '_'), toLowerCase);

pointfree 模式能夠幫助我們減少不必要的命名，讓代碼保持簡潔和通用。對函數式代碼來說，pointfree 是非常好的石蕊試驗，因爲它能告訴我們一個函數是否是接受輸入返回輸出的小函數。比如，while 循環是不能組合的。不過你也要警惕，pointfree 就像是一把雙刃劍，有時候也能混淆視聽。並非所有的函數式代碼都是 pointfree 的，不過這沒關係。可以使用它的時候就使用，不能使用的時候就用普通函數。

總結

有了組合， 配合上面提到的科裏化和偏函數應用， 可以將程序拆成一個個小函數然後組合起來， 優點已經很明顯的呈現出來，也很直觀的表達出了函數式編程的封裝過程的核心概念。

範疇學

函數式編程建立在範疇學上，很多時候討論起來難免有點理論化，所以這裏簡單的介紹一下範疇。

有着以下這些組件（component）的蒐集（collection）就構成了一個範疇：

• 對象的蒐集
• 態射的蒐集
• 態射的組合
• identity 這個獨特的態射

對象的蒐集
對象就是數據類型，例如 String、Boolean、Number 和 Object 等等。通常我們把數據類型視作所有可能的值的一個集合（set）。像 Boolean 就可以看作是 [true, false] 的集合，Number 可以是所有實數的一個集合。把類型當作集合對待是有好處的，因爲我們可以利用集合論（set theory）處理類型。

態射的蒐集
態射是標準的、普通的純函數。

態射的組合
即上面提到的compose

identity 這個獨特的態射
讓我們介紹一個名爲 id 的實用函數。這個函數接受隨便什麼輸入然後原封不動地返回它：

var id = function(x){ return x; };

functor

在學習函數式編程的時候，第一次看到functor的時候一臉懵逼， 確實不理解這個東西是什麼， 可以做什麼，加上一堆術語，頭都大了。在理解functor之前，先認識一個東西

概念

容器

容器爲函數式編程裏普通的變量、對象、函數提供了一層極其強大的外衣，賦予了它們一些很驚豔的特性。

var Container = function(x) {
  this.__value = x;
}
Container.of = x => new Container(x);

//試試看
Container.of(1);
//=> Container(1)

Container.of('abcd');
//=> Container('abcd')

Container.of 把東西裝進容器裏之後，由於這一層外殼的阻擋，普通的函數就對他們不再起作用了，所以我們需要加一個接口來讓外部的函數也能作用到容器裏面的值（像Array也是一個容器）：

Container.prototype.fmap = function(f){
  return Container.of(f(this.__value))
}

我們可以這樣使用它：

Container.of(3)
    .fmap(x => x + 1)                //=> Container(4)
    .fmap(x => 'Result is ' + x);    //=> Container('Result is 4')

我們通過簡單的代碼就實現了一個鏈式調用，並且這也是一個functor。

Functor（函子）是實現了 fmap 並遵守一些特定規則的容器類型。

這樣子看還是有點不好理解， 那麼參考下面這句話可能會好一點：

a functor is nothing more than a data structure you can map functions over with the purpose of lifting values from a container, modifying them, and then putting them back into a container. 都是些簡單的單詞，意會比起本人翻譯會更容易理解。

加上一張圖：

ok, 現在大概知道functor是一個什麼樣的東西了。

作用

那麼functor有什麼作用呢？

鏈式調用
首先它可以鏈式調用，正如上面提到的一樣。

Immutable
可以看到， 我們每次都是返回了一個新的Container.of， 所以數據是Immutable的， 而Immutable的作用就不在這裏贅述了。

將控制權交給Container
將控制權交給Container， 這樣他就可以決定何時何地怎麼去調用我們傳給fmap的function，這個作用非常強大，可以爲我們做空值判斷、異步處理、惰性求值等一系列麻煩的事。

例子

上面作用的第三點可能直觀上有點難以理解， 下面舉三個簡單的例子

Maybe Container
定義一個Maybe Container來幫我們處理空值的判斷

var Maybe = function(x) {
  this.__value = x;
}

Maybe.of = function(x) {
  return new Maybe(x);
}

Maybe.prototype.fmap = function(f) {
  return this.isNothing() ? Maybe.of(null) : Maybe.of(f(this.__value));
}

Maybe.prototype.isNothing = function() {
  return (this.__value === null || this.__value === undefined);
}

//試試看
import _ from 'lodash';
var add = _.curry(_.add);

Maybe.of({name: "Stark"})
    .fmap(_.prop("age"))
    .fmap(add(10));
//=> Maybe(null)

Maybe.of({name: "Stark", age: 21})
    .fmap(_.prop("age"))
    .fmap(add(10));
//=> Maybe(31)

當然， 這裏可以利用上面提到的科裏化函數來簡化掉一堆fmap的情況

import _ from 'lodash';
var compose = _.flowRight;
var add = _.curry(_.add);

// 創造一個柯里化的 map
var map = _.curry((f, functor) => functor.fmap(f));

var doEverything = map(compose(add(10), _.property("age")));

var functor = Maybe.of({name: "Stark", age: 21});
doEverything(functor);
//=> Maybe(31)

Task Container
我們可以編寫一個Task Container來幫我們處理異步的情況

var fs = require('fs');

//  readFile :: String -> Task(Error, JSON)
var readFile = function(filename) {
  return new Task(function(reject, result) {
    fs.readFile(filename, 'utf-8', function(err, data) {
      err ? reject(err) : result(data);
    });
  });
};

readFile("metamorphosis").fmap(split('\n')).fmap(head);

例子中的 reject 和 result 函數分別是失敗和成功的回調。正如你看到的，我們只是簡單地調用 Task 的 map 函數，就能操作將來的值，好像這個值就在那兒似的。(這看起來有點像Promise)

Io Container
我們可以利用Io Container來做惰性求值

import _ from 'lodash';
var compose = _.flowRight;

var IO = function(f) {
    this.__value = f;
}

IO.of = x => new IO(_ => x);

IO.prototype.map = function(f) {
    return new IO(compose(f, this.__value))
};

var io_document = new IO(_ => window.document);

io_document.map(function(doc){ return doc.title });
//=> IO(document.title)

注意我們這裏雖然感覺上返回了一個實際的值 IO(document.title)，但事實上只是一個對象：{ __value: [Function] }，它並沒有執行，而是簡單地把我們想要的操作存了起來，只有當我們在真的需要這個值得時候，IO 纔會真的開始求值，

functor 範疇

functor 的概念來自於範疇學，並滿足一些定律。 即functor 接受一個範疇的對象和態射（morphism），然後把它們映射（map）到另一個範疇裏去。

Js中的functor

Js中也有一些實現了functor, 如map、filter

map    :: (A -> B)   -> Array(A) -> Array(B)
filter :: (A -> Boolean) -> Array(A) -> Array(A)

Monad

普通functor的問題

我們來寫一個函數 cat，這個函數的作用和 Linux 命令行下的 cat 一樣，讀取一個文件，然後打出這個文件的內容

import fs from 'fs';
import _ from 'lodash';

var map = _.curry((f, x) => x.map(f));
var compose = _.flowRight;

var readFile = function(filename) {
    return new IO(_ => fs.readFileSync(filename, 'utf-8'));
};

var print = function(x) {
    return new IO(_ => {
        console.log(x);
        return x;
    });
}

var cat = compose(map(print), readFile);

cat("file")
//=> IO(IO("file的內容"))

ok, 我們最後得到的是兩層嵌套的IO, 要獲取其中的值

cat("file").__value().__value()

問題很明顯的出來了， 我們需要連續調用兩次_value才能獲取， 那麼假如我們嵌套了更多呢， 難道每次都要調用一大堆__value嗎， 那當然是不可能的。

概念

我們可以使用一個join函數， 來將Container裏面的東西拿出來， 像這樣

var join = x => x.join();
IO.prototype.join = function() {
  return this.__value ? IO.of(null) : this.__value();
}

// 試試看
var foo = IO.of(IO.of('123'));

foo.join();

似乎這樣也有點麻煩， 每次都要使用一個join來剖析

var doSomething = compose(join, map(f), join, map(g), join, map(h));

我們可以使用一個chain函數， 來幫助我們做這些事

var chain = _.curry((f, functor) => functor.chain(f));
IO.prototype.chain = function(f) {
  return this.map(f).join();
}

// 現在可以這樣調用了
var doSomething = compose(chain(f), chain(g), chain(h));

// 當然，也可以這樣
someMonad.chain(f).chain(g).chain(h)

// 寫成這樣是不是很熟悉呢？
readFile('file')
    .chain(x => new IO(_ => {
        console.log(x);
        return x;
    }))
    .chain(x => new IO(_ => {
        // 對x做一些事情，然後返回
    }))

ok, 事實上這就是一個Monad， 而且你也會很熟悉， 這就像一個Promise的then， 那麼什麼是Monad呢？
Monad有一個bind方法， 就是上面講到的chain（同一個東西不同叫法），

function bind<T, U>(instance: M<T>, transform: (value: T) => M<U>): M<U> {
    // ...
}

其實，Monad 的作用跟 Functor 類似，也是應用一個函數到一個上下文中的值。不同之處在於，Functor 應用的是一個接收一個普通值並且返回一個普通值的函數，而 Monad 應用的是一個接收一個普通值但是返回一個在上下文中的值的函數。上下文即一個Container。

Promise是Monad

需要被認爲是Monad需要具備以下三個條件

• 擁有容器， 即Maybe、IO之類。
• 一個可以將普通類型轉換爲具有上下文的值的函數， 即Contanier.of
• 擁有bind函數（即上面提到的bind， 而不是ES5的bind）

那麼Promise具備了什麼條件？

• 擁有容器 Promise, 即上面第一點
• Promise.resolve(value)將值轉換爲一個具有上下文的值， 即上面第二點。
• Promise.prototype.then(onFullfill: value => Promise) 擁有一個bind（then）函數， 接受一個函數作爲參數， 該函數接受一個普通值並返回一個含有上下文的值。 即上面第三點

不過Promise比Monad擁有更多的功能。

• 如果then返回了一個正常的value， Promise會調用Promise.resolve將其轉換爲Promise
• 普通的Monad只能提供在計算的時候傳遞一個值， 而Promise有兩個不同的值 - 一個用於成功值，一個用於錯誤（類似於Either monad）。可以使用then方法的第二個回調或使用特殊的.catch方法捕獲錯誤

Applicative Functor

提到了Functor和Monad而不提Applicative Functor就不完整了。

概念

Applicative Functor就是讓不同 functor 可以相互應用（apply）的能力。
舉一個簡單的例子, 假設有兩個同類型的 functor，我們想把這兩者作爲一個函數的兩個參數傳遞過去來調用這個函數。

// 這樣是行不通的，因爲 2 和 3 都藏在瓶子裏。
add(Container.of(2), Container.of(3));
//NaN

// 使用可靠的 map 函數試試
var container_of_add_2 = map(add, Container.of(2));
// Container(add(2))

這時候我們創建了一個 Container，它內部的值是一個局部調用的（partially applied）的函數。確切點講就是，我們想讓 Container(add(2)) 中的 add(2) 應用到 Container(3) 中的 3 上來完成調用。也就是說，我們想把一個 functor 應用到另一個上。
巧的是，完成這種任務的工具已經存在了，即 chain 函數。我們可以先 chain 然後再 map 那個局部調用的 add(2)，就像這樣：

Container.of(2).chain(function(two) {
  return Container.of(3).map(add(two));
});

然而這樣我們需要延遲Container.of(3)的建立， 這對我們來說是很不方便的也是沒有必要的， 我們可以通過建立一個ap函數來達成我們想要的效果

Container.prototype.ap = function(other_container) {
  return other_container.map(this.__value);
}

Container.of(2).map(add).ap(Container.of(3));
// Container(5)

注意上面的add是科裏化函數， this.__value是一個純函數。

由於這種先 map 再 ap 的操作很普遍，我們可以抽象出一個工具函數 liftA2：

const liftA2 = (f, m1, m2) => m1.map(f).ap(m2)
liftA2(add, Container.of(2), Container.of(3))

應用

正如我們上面所說， 我們可以獨立創建兩個Container， 那麼在Task中也可以同時發起兩個http請求，而不必等到第一個返回再執行第二個

// Http.get :: String -> Task Error HTML

var renderPage = curry(function(destinations, events) { /* render page */  });

Task.of(renderPage).ap(Http.get('/destinations')).ap(Http.get('/events'))
// Task("<div>some page with dest and events</div>")

FunctorMonadApplicative Functor的數學規律

Functor

// identity
map(id) === id;

// composition
compose(map(f), map(g)) === map(compose(f, g));

Monad

bind(unit(x), f) ≡ f(x)
bind(m, unit) ≡ m
bind(bind(m, f), g) ≡ bind(m, x ⇒ bind(f(x), g))

Applicative Functor

Identity: A.of(x => x).ap(v) === v
Homomorphism: A.of(f).ap(A.of(x)) === A.of(f(x))
Interchange: u.ap(A.of(y)) === A.of(f => f(y)).ap(u)

js 與 函數式和麪向對象

以下引用自文章漫談 JS 函數式編程（一）

面向對象對數據進行抽象，將行爲以對象方法的方式封裝到數據實體內部，從而降低系統的耦合度。而函數式編程，選擇對過程進行抽象，將數據以輸入輸出流的方式封裝進過程內部，從而也降低系統的耦合度。兩者雖是截然不同，然而在系統設計的目標上可以說是殊途同歸的。

面向對象思想和函數式編程思想也是不矛盾的，因爲一個龐大的系統，可能既要對數據進行抽象，又要對過程進行抽象，或者一個局部適合進行數據抽象，另一個局部適合進行過程抽象，這都是可能的。數據抽象不一定以對象實體爲形式，同樣過程抽象也不是說形式上必然是 functional 的，比如流式對象（InputStream、OutputStream）、Express 的 middleware，就帶有明顯的過程抽象的特徵。但是在通常情況下，OOP更適合用來做數據抽象，FP更適合用來做過程抽象。

當然由於Javascript本身是多範式語言， 所以可以在合適的地方使用合適的編程方式。總而言之， 兩者互不排斥，是可共存的。

尾遞歸優化

由於函數式編程，如果尾遞歸不做優化，很容易爆棧， 這個知識點有很多文章提出來了， 這裏推薦一篇文章

聲明式編程

聲明式主要表現在於只關心結果而不關心過程， 這裏推薦一篇輕鬆易懂的文章
或者舉個例子:
在JQ時代的時候， 假如我們需要渲染一個DOM， 並改變其文字顏色, 我們需要這樣的步驟：

• 找到DOM的class或者id
• 根據class或者id找到DOM
• 重新賦值DOM的style屬性的color屬性

而在React中， 我們可以直接告訴JSX我們想要DOM的顏色變成紅色即可。

const textColor = 'red'
const comp = () => {
    return (
        <div style={{
            color: textColor
        }} />
    )
}

而關於聲明式和函數式， 我個人認爲函數式和聲明式一樣， 也是屬於關心結果， 但是函數式最重要的特點是“函數第一位”，即函數可以出現在任何地方。 兩者其實不應該做比較。

函數式編程在JS中的實踐

• Undescore/Lodash/Ramda庫 特別是Lodash， 打開node_modules基本都能看到
• Immutable-js 數據不可變
• React
• Redux
• ES6 尾遞歸優化

函數式編程在前端開發中的優勢

以下引用自知乎答案

優化綁定

說白了前端和後端不一樣的關鍵點是後端HTTP較多，前端渲染多，前端真正的剛需是數據綁定機制。後端一次對話，計算好Response發回就完成任務了，所以後端吃了二十年年MVC老本還是挺好用的。前端處理的是連續的時間軸，並非一次對話，像後端那樣賦值簡單傳遞就容易斷檔，導致狀態不一致，帶來大量額外複雜度和Bug。不管是標準FRP還是Mobx這種命令式API的TFRP，內部都是基於函數式設計的。函數式重新發明的Return和分號是要比裸命令式好得多的（前端狀態可以同步，後端線程安全等等，想怎麼封裝就怎麼封裝）。

封裝作用

接上條，大幅簡化異步，IO，渲染等作用/副作用相關代碼。和很多人想象的不一樣，函數式很擅長處理作用，只是多一層抽象，如果應用稍微複雜一點，這點成本很快就能找回來（Redux Saga是個例子，特別是你寫測試的情況下）。渲染現在大家都可以理解冪等渲染地好處了，其實函數式編程各種作用和狀態也是冪等的，對於複雜應用非常有幫助。

複用

引用透明，無副作用，代數設計讓函數式代碼可以正確優雅地複用。前端不像後端業務固定，做好業務分析和DDD就可以搭個靜態結構，高枕無憂了。前端的好代碼一定是活的，每處都可能亂改。可組合性其實很重要。通過高階函數來組合效果和效率都要高於繼承，試着多用ramda，你就可以發現絕大部分東西都能一行寫完，最後給個實參就變成一個UI，來需求改兩筆就變成另外一個。

總結

函數式編程在JS的未來是大放異彩還是泯然衆人，都不影響我們學習它的思想。本文裏面有許多引用沒有特別指出，但都會在底部放上鍊接（如介意請留言）， 望見諒。

參考&引用

聲明式編程和命令式編程有什麼區別？
用 JS 代碼完整解釋 Monad
怎麼理解“聲明式渲染”？
JavaScript函數式編程（二）
JavaScript Functors Explained
前端開發js函數式編程真實用途體現在哪裏？
js 是更傾向於函數式編程了還是更傾向於面向對象？或者沒有傾向？只是簡單的提供了更多的語法糖？
漫談 JS 函數式編程（一）
有哪些函數式編程在前端的實踐經驗？
前端使用面向對象式編程 還是 函數式編程 針對什麼問題用什麼方式 分別有什麼具體案例？
什麼是 Monad (Functional Programming)？
Monads In Javascript
Functor、Applicative 和 Monad
JavaScript 讓 Monad 更簡單
函數式編程