javascript為什麼用函數式編程

青灯夜游
發布: 2022-09-30 15:10:14
原創
1520 人瀏覽過

原因:1、js的語法是從Scheme這種函數式程式語言借鏡而來。 2.就瀏覽器端而言,隨著各種單頁框架的發展,客戶端的處理能力不斷提升,越來越多的業務邏輯被放到端,從而導致客戶端要維護的狀態越來越多;隨之而來的問題是,一不小心就會大量使用依賴於外部變量的函數,這些函數隨著業務邏輯不斷增加,從而導致邏輯分支劇增,狀態難以追踪,代碼可讀性差,難以維護,而函數式程式設計有著很好的解決方案。

javascript為什麼用函數式編程

本教學操作環境:windows7系統、javascript1.8.5版、Dell G3電腦。

一、什麼是函數式程式設計?

函數式程式設計(Functional programming),簡稱 FP,並不是什麼函式庫或框架,與過程式程式設計(Procedural programming)相對,而是一種程式設計範式。 FP 透過宣告純函數抽象化資料的處理,來避免或盡可能減少函數呼叫對於外部狀態和系統產生的副作用。

所謂副作用,大抵有改變函數外系統狀態,向外拋出異常,處理用戶操作,修改入參,資料庫查操作,DOM操作等等可能會造成系統錯誤操作。

二、為什麼在JavaScript 使用函數式程式設計想法

#2.1 從語言特性來看

JavaScript 一開始的語法就是從Scheme 這種函數式程式語言借鏡而來。隨著語言標準的推進,語言本身的功能性不斷豐富,閉包、箭頭函數、高階函數,數組迭代等等功能都讓JavaScript 中實現FP 變得簡單,簡單講幾個特性:

2.1.1. lambda 表達式

lambda 表達式其實是匿名函數,使用箭頭清晰的表示輸入輸出的映射關係,JavaScript 中使用箭頭函數來實現。

const multiply = x => x * x
multiply(6) // 36
登入後複製

2.1.2 高階函數

高階( Higher-order )函數可以接受一個或多個函數作為入參,輸出一個函數。

簡單寫兩個例子

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 都是高階函數,因為入參是個函數。

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 從實際需求角度來看

就瀏覽器端而言,隨著各種單頁框架的發展,客戶端的處理能力不斷提升,越來越多的業務邏輯被放到端,導致客戶端要維護的狀態越來越多。隨之而來的問題是,我們一不小心就會大量使用依賴於外部變量的函數,這些函數隨著業務邏輯不斷增加,從而導致邏輯分支劇增,狀態難以追踪,代碼可讀性差,難以維護,而FP 恰好有著很好的解決方案。

另外,現在主流的程式語言基本上都引入函數式程式設計的特性,即使是以物件導向著稱的java,透過使用stream lambda 表達式,依然可以實踐函數式程式設計思想,而Spring5 更是將Reactive 作為主要賣點,總之FP 近來很火。

而 JS 的函數式程式設計生態也在不斷豐富, RxJS, circleJS 等框架在前端產線上的應用也越來越廣。

三、使用函數式的優點

使用FP 程式設計主要有以下幾個優點:

  • #將資料和處理邏輯分離,程式碼更簡潔,模組化,可讀性好

  • 容易測試,測試環境容易模擬

  • 邏輯程式碼可重複使用性強

四、函數式程式設計相關概念

函數式程式設計的實作主要依賴:

  • 聲明式程式設計

  • #純函數

  • 不可變資料

4.1 宣告式程式設計

#宣告式程式設計Declarative programming 只描述目標的性質,以便抽像出形式邏輯,告訴計算機需要計算什麼而不是如何一步步計算。例如正規、SQL、 FP 等。

指令式程式設計Imperative Programming 告訴計算機每一步的計算操作

最簡單的,相同的陣列處理,使用for 迴圈是指令式,用map 之類的操作是聲明式。使用聲明式編程,簡化了程式碼,提高了復用率,並為重構留有餘地。

4.2 純函數

#純函數簡單概括有兩個特點:

  • 函數的輸出只與輸入有關,相同輸入產生的輸出一致,並不會不依賴外部條件

  • 函數呼叫不會改變函數域以外的狀態或變量,不會對系統產生副作用

看个简单的例子:

let counter = 0
const increment = () => ++counter
const increment = counter => ++counter
登入後複製

前一个函数每次调用都会修改外部变量的值,返回值也依赖于外部变量;后一个函数对于同一输入值每次返回的结果都相同,并且不会对外部状态造成影响。所以后一个是纯函数。

为什么要追求函数的纯度,这就涉及到一个称为引用透明性的概念。

4.2.1 引用透明性

纯函数的这种函数的返回值只依赖于其输入值的特性,被称为引用透明性(referential transparency),纯函数都是可以进行缓存的。

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

「可变的全局状态是万恶之源」(其实从功能代码的角度看,局部和全局是相对而言的),简而言之可变状态会让程序的运行变得不可预测,代码可读性差,难以维护。

在 JS 中,当函数入参是对象类型的数据时,我们拿到的其实是个引用,所以即使在函数内部我们也是可以修改对象内部的属性,这种情景依然会产生副作用。

所以这个时候就需要引入 Immutable 的概念。 Immutable 即 unchangeable, Immutable data在初始化创建后就不能被修改了,每次对于 Immutable data 的操作都会返回一个新的 Immutable data。 所以并不会对原来的状态形成改变(当然不是简单的深拷贝再修改)。

Immutable 比较流行的 JS 实现有 immutable-js 和 seamless-immutable; 对于 React 党来说, immutable-js 一点都不陌生, immutable-js 配合 Redux 就是一种很好的 FP 实践。

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
登入後複製

【相关推荐:javascript视频教程编程视频

以上是javascript為什麼用函數式編程的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板