這篇“javascript用函數(shù)式編程的原因是什么”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“javascript用函數(shù)式編程的原因是什么”文章吧。

創(chuàng)新互聯(lián)是一家專業(yè)提供富陽(yáng)企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站制作、html5、小程序制作等業(yè)務(wù)。10年已為富陽(yáng)眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)絡(luò)公司優(yōu)惠進(jìn)行中。

原因：1、js的語(yǔ)法是從Scheme這種函數(shù)式編程語(yǔ)言借鑒而來(lái)。2、就瀏覽器端而言，隨著各種單頁(yè)框架的發(fā)展，客戶端的處理能力不斷提升，越來(lái)越多的業(yè)務(wù)邏輯被放到端，從而導(dǎo)致客戶端要維護(hù)的狀態(tài)越來(lái)越多;隨之而來(lái)的問(wèn)題是，一不小心就會(huì)大量使用依賴于外部變量的函數(shù)，這些函數(shù)隨著業(yè)務(wù)邏輯不斷增加，從而導(dǎo)致邏輯分支劇增，狀態(tài)難以追蹤，代碼可讀性差，難以維護(hù)，而函數(shù)式編程有著很好的解決方案。

本教程操作環(huán)境：windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。

一、什么是函數(shù)式編程？

函數(shù)式編程(Functional programming)，簡(jiǎn)稱 FP，并不是什么庫(kù)或者框架，與過(guò)程式編程(Procedural programming)相對(duì)，而是一種編程范式。FP 通過(guò)聲明純函數(shù)抽象數(shù)據(jù)的處理，來(lái)避免或盡可能減少函數(shù)調(diào)用對(duì)于外部狀態(tài)和系統(tǒng)產(chǎn)生的副作用。

所謂副作用，大抵有改變函數(shù)外系統(tǒng)狀態(tài)，向外拋出異常，處理用戶操作，修改入?yún)?，?shù)據(jù)庫(kù)查操作，DOM操作等等可能會(huì)引起系統(tǒng)錯(cuò)誤操作。

二、為什么在 JavaScript 使用函數(shù)式編程思想

2.1 從語(yǔ)言特性來(lái)看

JavaScript 一開始的語(yǔ)法就是從 Scheme 這種函數(shù)式編程語(yǔ)言借鑒而來(lái)。隨著語(yǔ)言標(biāo)準(zhǔn)的推進(jìn)，語(yǔ)言本身的功能性不斷豐富，閉包、箭頭函數(shù)、高階函數(shù)，數(shù)組迭代等等功能都讓 JavaScript 中實(shí)現(xiàn) FP 變得簡(jiǎn)單，簡(jiǎn)單講幾個(gè)特性：

2.1.1. lambda 表達(dá)式

lambda 表達(dá)式其實(shí)是一個(gè)匿名函數(shù)，使用箭頭清晰的表示輸入輸出的映射關(guān)系，JavaScript 中使用箭頭函數(shù)來(lái)實(shí)現(xiàn)。

const multiply = x => x * x
multiply(6) // 36

2.1.2 高階函數(shù)

高階( Higher-order )函數(shù)可以接受一個(gè)或者多個(gè)函數(shù)作為入?yún)?，輸出一個(gè)函數(shù)。

簡(jiǎn)單寫兩個(gè)例子

const add = x => y => x + y
const add10 = add(10)
add10(5) // 15
const compose = (...fns) => x =>  fns.reduce((acc, fn) => fn(acc), x)
const a = x => x + 1
const b = x => x + 2
const composedFn = compose(a, b)
composedFn(1) // 1 + 1 + 2 = 4

2.1.3 filter map forEach reduce 迭代

Array.prototype 下的 filter map forEach reduce 都是高階函數(shù)，因?yàn)槿雲(yún)⑹莻€(gè)函數(shù)。

const flatten = (arr = []) => arr.reduce(
  (acc, val)=> accconcat(Array.isArray(val) ? flatten(val) : val),
  []
)
let arr = [1,[ 4, 5 ], 2, 3];
flatten(arr)  // [1, 4, 5, 2, 3]

2.2 從實(shí)際需求角度來(lái)看

就瀏覽器端而言，隨著各種單頁(yè)框架的發(fā)展，客戶端的處理能力不斷提升，越來(lái)越多的業(yè)務(wù)邏輯被放到端，從而導(dǎo)致客戶端要維護(hù)的狀態(tài)越來(lái)越多。隨之而來(lái)的問(wèn)題是，我們一不小心就會(huì)大量使用依賴于外部變量的函數(shù)，這些函數(shù)隨著業(yè)務(wù)邏輯不斷增加，從而導(dǎo)致邏輯分支劇增，狀態(tài)難以追蹤，代碼可讀性差，難以維護(hù)，而 FP 恰恰有著很好的解決方案。

另外，現(xiàn)在主流的編程語(yǔ)言基本上都引入函數(shù)式編程的特性，即使是以面向?qū)ο笾Q的 java，通過(guò)使用 stream + lambda 表達(dá)式，依然可以實(shí)踐函數(shù)式編程思想，而 Spring5 更是將 Reactive 作為主要賣點(diǎn)，總之 FP 近來(lái)很火。

而 JS 的函數(shù)式編程生態(tài)也在不斷豐富， RxJS， circleJS 等框架在前端產(chǎn)線上的應(yīng)用也越來(lái)越廣。

三、使用函數(shù)式的優(yōu)點(diǎn)

使用 FP 編程主要有以下幾個(gè)優(yōu)點(diǎn)：

• 將數(shù)據(jù)和處理邏輯分離，代碼更加簡(jiǎn)潔，模塊化，可讀性好

• 容易測(cè)試，測(cè)試環(huán)境容易模擬

• 邏輯代碼可復(fù)用性強(qiáng)

四、函數(shù)式編程相關(guān)概念

函數(shù)式編程的實(shí)現(xiàn)主要依賴于：

• 聲明式編程

• 純函數(shù)

• 不可變數(shù)據(jù)

4.1 聲明式編程

聲明式編程 Declarative programming 只描述目標(biāo)的性質(zhì)，從而抽象出形式邏輯，告訴計(jì)算機(jī)需要計(jì)算什么而不是如何一步步計(jì)算。例如正則、SQL、 FP 等。

指令式編程 Imperative Programming 告訴計(jì)算機(jī)每一步的計(jì)算操作

最簡(jiǎn)單的，相同的數(shù)組處理，使用 for 循環(huán)是指令式，用 map 之類的操作是聲明式。使用聲明式編程，簡(jiǎn)化了代碼，提高了復(fù)用率，為重構(gòu)留有余地。

4.2 純函數(shù)

純函數(shù)簡(jiǎn)要概括有兩個(gè)特點(diǎn)：

• 函數(shù)的輸出只與輸入有關(guān)，相同輸入產(chǎn)生的輸出一致，并不會(huì)不依賴外部條件

• 函數(shù)調(diào)用不會(huì)改變函數(shù)域以外的狀態(tài)或者變量，不會(huì)對(duì)系統(tǒng)產(chǎn)生副作用

看個(gè)簡(jiǎn)單的例子：

let counter = 0
const increment = () => ++counter
const increment = counter => ++counter

前一個(gè)函數(shù)每次調(diào)用都會(huì)修改外部變量的值，返回值也依賴于外部變量；后一個(gè)函數(shù)對(duì)于同一輸入值每次返回的結(jié)果都相同，并且不會(huì)對(duì)外部狀態(tài)造成影響。所以后一個(gè)是純函數(shù)。

為什么要追求函數(shù)的純度，這就涉及到一個(gè)稱為引用透明性的概念。

4.2.1 引用透明性

純函數(shù)的這種函數(shù)的返回值只依賴于其輸入值的特性，被稱為引用透明性（referential transparency)，純函數(shù)都是可以進(jìn)行緩存的。

const memorize(pureFn) {
  const _cache = {}
  return (...args) => {
    const key = JSON.stringify(args)
    return _cache[key] || (_cache[key] = purFu.apply(null, args))
  }
}

4.3 Immutable Data

「可變的全局狀態(tài)是萬(wàn)惡之源」（其實(shí)從功能代碼的角度看，局部和全局是相對(duì)而言的）,簡(jiǎn)而言之可變狀態(tài)會(huì)讓程序的運(yùn)行變得不可預(yù)測(cè)，代碼可讀性差，難以維護(hù)。

在 JS 中，當(dāng)函數(shù)入?yún)⑹菍?duì)象類型的數(shù)據(jù)時(shí)，我們拿到的其實(shí)是個(gè)引用，所以即使在函數(shù)內(nèi)部我們也是可以修改對(duì)象內(nèi)部的屬性，這種情景依然會(huì)產(chǎn)生副作用。

所以這個(gè)時(shí)候就需要引入 Immutable 的概念。 Immutable 即 unchangeable， Immutable data在初始化創(chuàng)建后就不能被修改了，每次對(duì)于 Immutable data 的操作都會(huì)返回一個(gè)新的 Immutable data。 所以并不會(huì)對(duì)原來(lái)的狀態(tài)形成改變（當(dāng)然不是簡(jiǎn)單的深拷貝再修改）。

Immutable 比較流行的 JS 實(shí)現(xiàn)有 immutable-js 和 seamless-immutable; 對(duì)于 React 黨來(lái)說(shuō)， immutable-js 一點(diǎn)都不陌生， immutable-js 配合 Redux 就是一種很好的 FP 實(shí)踐。

const map1 = Immutable.Map({a:1, b: {d:2}, c:3});
const map2 = map1.set('a', 50);
map1 === map2 // false
const mapb1 = map1.get('b')
const mapb2 = map2.get('b')
mapb1===mapb2 // true

以上就是關(guān)于“javascript用函數(shù)式編程的原因是什么”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)頁(yè)標(biāo)題：javascript用函數(shù)式編程的原因是什么
文章出自：http://jinyejixie.com/article26/gdjjcg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、域名注冊(cè)、建站公司、營(yíng)銷型網(wǎng)站建設(shè)、網(wǎng)站營(yíng)銷、服務(wù)器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)