成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

JavaScript的函數式編程,你了解嗎?

開發 前端
JavaScript 是一個多范式語言,允許你自由地混合和使用面向對象式、過程式和函數式的編程范式。最近,函數式編程越來越火熱。在諸如 Angular 和 React 這樣的框架中,通過使用不可變數據結構可以切實提高性能。不可變是函數式編程的核心原則,它以及純函數使得編寫和調試程序變得更加容易。

JavaScript的函數式編程,你了解嗎?

探索函數式編程,通過它讓你的程序更具有可讀性和易于調試

當 Brendan Eich 在 1995 年創造 JavaScript 時,他原本打算將 Scheme 移植到瀏覽器里 。Scheme 作為 Lisp 的方言,是一種函數式編程語言。而當 Eich 被告知新的語言應該是一種可以與 Java 相比的腳本語言后,他最終確立了一種擁有 C 風格語法的語言(也和 Java 一樣),但將函數視作一等公民。而 Java 直到版本 8 才從技術上將函數視為一等公民,雖然你可以用匿名類來模擬它。這個特性允許 JavaScript 通過函數式范式編程。

JavaScript 是一個多范式語言,允許你自由地混合和使用面向對象式、過程式和函數式的編程范式。最近,函數式編程越來越火熱。在諸如 Angular 和 React 這樣的框架中,通過使用不可變數據結構可以切實提高性能。不可變是函數式編程的核心原則,它以及純函數使得編寫和調試程序變得更加容易。使用函數來代替程序的循環可以提高程序的可讀性并使它更加優雅。總之,函數式編程擁有很多優點。

什么不是函數式編程

在討論什么是函數式編程前,讓我們先排除那些不屬于函數式編程的東西。實際上它們是你需要丟棄的語言組件(再見,老朋友):

  • 循環:
    • while
    • do...while
    • for
    • for...of
    • for...in
  • 用 var 或者 let 來聲明變量
  • 沒有返回值的函數
  • 改變對象的屬性 (比如: o.x = 5;)
  • 改變數組本身的方法:
    • copyWithin
    • fill
    • pop
    • push
    • reverse
    • shift
    • sort
    • splice
    • unshift
  • 改變映射本身的方法:
    • clear
    • delete
    • set
  • 改變集合本身的方法:
    • add
    • clear
    • delete

脫離這些特性應該如何編寫程序呢?這是我們將在后面探索的問題。

純函數

你的程序中包含函數不一定意味著你正在進行函數式編程。函數式范式將純函數pure function和非純函數impure function區分開。鼓勵你編寫純函數。純函數必須滿足下面的兩個屬性:

  • 引用透明:函數在傳入相同的參數后永遠返回相同的返回值。這意味著該函數不依賴于任何可變狀態。
  • 無副作用:函數不能導致任何副作用。副作用可能包括 I/O(比如向終端或者日志文件寫入),改變一個不可變的對象,對變量重新賦值等等。

我們來看一些例子。首先,multiply 就是一個純函數的例子,它在傳入相同的參數后永遠返回相同的返回值,并且不會導致副作用。

  1. function multiply(a, b) { return a * b;} 

下面是非純函數的例子。canRide 函數依賴捕獲的 heightRequirement 變量。被捕獲的變量不一定導致一個函數是非純函數,除非它是一個可變的變量(或者可以被重新賦值)。這種情況下使用 let 來聲明這個變量,意味著可以對它重新賦值。multiply 函數是非純函數,因為它會導致在 console 上輸出。

  1. let heightRequirement = 46; 
  2. // Impure because it relies on a mutable (reassignable) variable. 
  3. function canRide(height) { 
  4.   return height >= heightRequirement; 
  5. // Impure because it causes a side-effect by logging to the console. 
  6. function multiply(a, b) { 
  7.   console.log('Arguments: ', a, b); 
  8.   return a * b; 

下面的列表包含著 JavaScript 內置的非純函數。你可以指出它們不滿足兩個屬性中的哪個嗎?

  • console.log
  • element.addEventListener
  • Math.random
  • Date.now
  • $.ajax (這里 $ 代表你使用的 Ajax 庫)

理想的程序中所有的函數都是純函數,但是從上面的函數列表可以看出,任何有意義的程序都將包含非純函數。大多時候我們需要進行 AJAX 調用,檢查當前日期或者獲取一個隨機數。一個好的經驗法則是遵循 80/20 規則:函數中有 80% 應該是純函數,剩下的 20% 的必要性將不可避免地是非純函數。

使用純函數有幾個優點:

  • 它們很容易導出和調試,因為它們不依賴于可變的狀態。
  • 返回值可以被緩存或者“記憶”來避免以后重復計算。
  • 它們很容易測試,因為沒有需要模擬(mock)的依賴(比如日志,AJAX,數據庫等等)。

你編寫或者使用的函數返回空(換句話說它沒有返回值),那代表它是非純函數。

不變性

讓我們回到捕獲變量的概念上。來看看 canRide 函數。我們認為它是一個非純函數,因為 heightRequirement 變量可以被重新賦值。下面是一個構造出來的例子來說明如何用不可預測的值來對它重新賦值。

  1. let heightRequirement = 46; 
  2. function canRide(height) { 
  3.   return height >= heightRequirement; 
  4. // Every half secondset heightRequirement to a random number between 0 and 200. 
  5. setInterval(() => heightRequirement = Math.floor(Math.random() * 201), 500); 
  6. const mySonsHeight = 47; 
  7. // Every half secondcheck if my son can ride. 
  8. // Sometimes it will be true and sometimes it will be false
  9. setInterval(() => console.log(canRide(mySonsHeight)), 500); 

我要再次強調被捕獲的變量不一定會使函數成為非純函數。我們可以通過只是簡單地改變 heightRequirement 的聲明方式來使 canRide 函數成為純函數。

  1. const heightRequirement = 46; 
  2. function canRide(height) { 
  3.   return height >= heightRequirement; 

通過用 const 來聲明變量意味著它不能被再次賦值。如果嘗試對它重新賦值,運行時引擎將拋出錯誤;那么,如果用對象來代替數字來存儲所有的“常量”怎么樣?

  1. const constants = { 
  2.   heightRequirement: 46, 
  3.   // ... other constants go here 
  4. }; 
  5. function canRide(height) { 
  6.   return height >= constants.heightRequirement; 

我們用了 const ,所以這個變量不能被重新賦值,但是還有一個問題:這個對象可以被改變。下面的代碼展示了,為了真正使其不可變,你不僅需要防止它被重新賦值,你也需要不可變的數據結構。JavaScript 語言提供了 Object.freeze 方法來阻止對象被改變。

  1. 'use strict'
  2. // CASE 1: 對象的屬性是可變的,并且變量可以被再次賦值。 
  3. let o1 = { foo: 'bar' }; 
  4. // 改變對象的屬性 
  5. o1.foo = 'something different'
  6. // 對變量再次賦值 
  7. o1 = { message: "I'm a completely new object" }; 
  8. // CASE 2: 對象的屬性還是可變的,但是變量不能被再次賦值。 
  9. const o2 = { foo: 'baz' }; 
  10. // 仍然能改變對象 
  11. o2.foo = 'Something different, yet again'
  12. // 不能對變量再次賦值 
  13. // o2 = { message: 'I will cause an error if you uncomment me' }; // Error! 
  14. // CASE 3: 對象的屬性是不可變的,但是變量可以被再次賦值。 
  15. let o3 = Object.freeze({ foo: "Can't mutate me" }); 
  16. // 不能改變對象的屬性 
  17. // o3.foo = 'Come on, uncomment me. I dare ya!'; // Error! 
  18. // 還是可以對變量再次賦值 
  19. o3 = { message: "I'm some other object, and I'm even mutable -- so take that!" }; 
  20. // CASE 4: 對象的屬性是不可變的,并且變量不能被再次賦值。這是我們想要的!!!!!!!! 
  21. const o4 = Object.freeze({ foo: 'never going to change me' }); 
  22. // 不能改變對象的屬性 
  23. // o4.foo = 'talk to the hand' // Error! 
  24. // 不能對變量再次賦值 
  25. // o4 = { message: "ain't gonna happen, sorry" }; // Error 

不變性適用于所有的數據結構,包括數組、映射和集合。它意味著不能調用例如 Array.prototype.push 等會導致本身改變的方法,因為它會改變已經存在的數組。可以通過創建一個含有原來元素和新加元素的新數組,而不是將新元素加入一個已經存在的數組。其實所有會導致數組本身被修改的方法都可以通過一個返回修改好的新數組的函數代替。

  1. 'use strict'
  2. const a = Object.freeze([4, 5, 6]); 
  3. // Instead of: a.push(7, 8, 9); 
  4. const b = a.concat(7, 8, 9); 
  5. // Instead of: a.pop(); 
  6. const c = a.slice(0, -1); 
  7. // Instead of: a.unshift(1, 2, 3); 
  8. const d = [1, 2, 3].concat(a); 
  9. // Instead of: a.shift(); 
  10. const e = a.slice(1); 
  11. // Instead of: a.sort(myCompareFunction); 
  12. const f = R.sort(myCompareFunction, a); // R = Ramda 
  13. // Instead of: a.reverse(); 
  14. const g = R.reverse(a); // R = Ramda 
  15. // 留給讀者的練習: 
  16. // copyWithin 
  17. // fill 
  18. // splice 

映射 和 集合 也很相似。可以通過返回一個新的修改好的映射或者集合來代替使用會修改其本身的函數。

  1. const map = new Map([ 
  2.   [1, 'one'], 
  3.   [2, 'two'], 
  4.   [3, 'three'
  5. ]); 
  6. // Instead of: map.set(4, 'four'); 
  7. const map2 = new Map([...map, [4, 'four']]); 
  8. // Instead of: map.delete(1); 
  9. const map3 = new Map([...map].filter(([key]) => key !== 1)); 
  10. // Instead of: map.clear(); 
  11. const map4 = new Map(); 
  1. const set = new Set(['A''B''C']); 
  2. // Instead ofset.add('D'); 
  3. const set2 = new Set([...set'D']); 
  4. // Instead ofset.delete('B'); 
  5. const set3 = new Set([...set].filter(key => key !== 'B')); 
  6. // Instead ofset.clear(); 
  7. const set4 = new Set(); 

我想提一句如果你在使用 TypeScript(我非常喜歡 TypeScript),你可以用 Readonly<T>、ReadonlyArray<T>、ReadonlyMap<K, V> 和 ReadonlySet<T> 接口來在編譯期檢查你是否嘗試更改這些對象,有則拋出編譯錯誤。如果在對一個對象字面量或者數組調用 Object.freeze,編譯器會自動推斷它是只讀的。由于映射和集合在其內部表達,所以在這些數據結構上調用 Object.freeze 不起作用。但是你可以輕松地告訴編譯器它們是只讀的變量。

 

TypeScript 只讀接口

好,所以我們可以通過創建新的對象來代替修改原來的對象,但是這樣不會導致性能損失嗎?當然會。確保在你自己的應用中做了性能測試。如果你需要提高性能,可以考慮使用 Immutable.js。Immutable.js 用持久的數據結構 實現了鏈表、堆棧、映射、集合和其他數據結構。使用了如同 Clojure 和 Scala 這樣的函數式語言中相同的技術。

  1. // Use in place of `[]`. 
  2. const list1 = Immutable.List(['A''B''C']); 
  3. const list2 = list1.push('D''E'); 
  4. console.log([...list1]); // ['A''B''C'
  5. console.log([...list2]); // ['A''B''C''D''E'
  6. // Use in place of `new Map()` 
  7. const map1 = Immutable.Map([ 
  8.   ['one', 1], 
  9.   ['two', 2], 
  10.   ['three', 3] 
  11. ]); 
  12. const map2 = map1.set('four', 4); 
  13. console.log([...map1]); // [['one', 1], ['two', 2], ['three', 3]] 
  14. console.log([...map2]); // [['one', 1], ['two', 2], ['three', 3], ['four', 4]] 
  15. // Use in place of `new Set()` 
  16. const set1 = Immutable.Set([1, 2, 3, 3, 3, 3, 3, 4]); 
  17. const set2 = set1.add(5); 
  18. console.log([...set1]); // [1, 2, 3, 4] 
  19. console.log([...set2]); // [1, 2, 3, 4, 5] 

函數組合

記不記得在中學時我們學過一些像 (f ° g)(x) 的東西?你那時可能想,“我什么時候會用到這些?”,好了,現在就用到了。你準備好了嗎?f ° g讀作 “函數 f 和函數 g 組合”。對它的理解有兩種等價的方式,如等式所示: (f ° g)(x) = f(g(x))。你可以認為 f ° g 是一個單獨的函數,或者視作將調用函數 g 的結果作為參數傳給函數 f。注意這些函數是從右向左依次調用的,先執行 g,接下來執行 f。

關于函數組合的幾個要點:

  1. 我們可以組合任意數量的函數(不僅限于 2 個)。
  2. 組合函數的一個方式是簡單地把一個函數的輸出作為下一個函數的輸入(比如 f(g(x)))。
  1. // h(x) = x + 1 
  2. // number -> number 
  3. function h(x) { 
  4.   return x + 1; 
  5. // g(x) = x^2 
  6. // number -> number 
  7. function g(x) { 
  8.   return x * x; 
  9. // f(x) = convert x to string 
  10. // number -> string 
  11. function f(x) { 
  12.   return x.toString(); 
  13. // y = (f ° g ° h)(1) 
  14. const y = f(g(h(1))); 
  15. console.log(y); // '4' 

Ramda 和 lodash 之類的庫提供了更優雅的方式來組合函數。我們可以在更多的在數學意義上處理函數組合,而不是簡單地將一個函數的返回值傳遞給下一個函數。我們可以創建一個由這些函數組成的單一復合函數(就是 (f ° g)(x))。

  1. // h(x) = x + 1 
  2. // number -> number 
  3. function h(x) { 
  4.   return x + 1; 
  5. // g(x) = x^2 
  6. // number -> number 
  7. function g(x) { 
  8.   return x * x; 
  9. // f(x) = convert x to string 
  10. // number -> string 
  11. function f(x) { 
  12.   return x.toString(); 
  13. // R = Ramda 
  14. // composite = (f ° g ° h) 
  15. const composite = R.compose(f, g, h); 
  16. // Execute single function to get the result. 
  17. const y = composite(1); 
  18. console.log(y); // '4' 

好了,我們可以在 JavaScript 中組合函數了。接下來呢?好,如果你已經入門了函數式編程,理想中你的程序將只有函數的組合。代碼里沒有循環(for, for...of, for...in, while, do),基本沒有。你可能覺得那是不可能的。并不是這樣。我們下面的兩個話題是:遞歸和高階函數。

遞歸

假設你想實現一個計算數字的階乘的函數。 讓我們回顧一下數學中階乘的定義:

n! = n * (n-1) * (n-2) * ... * 1.

n! 是從 n 到 1 的所有整數的乘積。我們可以編寫一個循環輕松地計算出結果。

  1. function iterativeFactorial(n) { 
  2.   let product = 1; 
  3.   for (let i = 1; i <= n; i++) { 
  4.     product *= i; 
  5.   } 
  6.   return product; 

注意 product 和 i 都在循環中被反復重新賦值。這是解決這個問題的標準過程式方法。如何用函數式的方法解決這個問題呢?我們需要消除循環,確保沒有變量被重新賦值。遞歸是函數式程序員的最有力的工具之一。遞歸需要我們將整體問題分解為類似整體問題的子問題。

計算階乘是一個很好的例子,為了計算 n! 我們需要將 n 乘以所有比它小的正整數。它的意思就相當于:

n! = n * (n-1)!

啊哈!我們發現了一個解決 (n-1)! 的子問題,它類似于整個問題 n!。還有一個需要注意的地方就是基礎條件。基礎條件告訴我們何時停止遞歸。 如果我們沒有基礎條件,那么遞歸將永遠持續。 實際上,如果有太多的遞歸調用,程序會拋出一個堆棧溢出錯誤。啊哈!

  1. function recursiveFactorial(n) { 
  2.   // Base case -- stop the recursion 
  3.   if (n === 0) { 
  4.     return 1; // 0! is defined to be 1. 
  5.   } 
  6.   return n * recursiveFactorial(n - 1); 

然后我們來計算 recursiveFactorial(20000) 因為……,為什么不呢?當我們這樣做的時候,我們得到了這個結果: 

 

堆棧溢出錯誤

這里發生了什么?我們得到一個堆棧溢出錯誤!這不是無窮的遞歸導致的。我們已經處理了基礎條件(n === 0 的情況)。那是因為瀏覽器的堆棧大小是有限的,而我們的代碼使用了越過了這個大小的堆棧。每次對 recursiveFactorial 的調用導致了新的幀被壓入堆棧中,就像一個盒子壓在另一個盒子上。每當 recursiveFactorial 被調用,一個新的盒子被放在最上面。下圖展示了在計算 recursiveFactorial(3) 時堆棧的樣子。注意在真實的堆棧中,堆棧頂部的幀將存儲在執行完成后應該返回的內存地址,但是我選擇用變量 r 來表示返回值,因為 JavaScript 開發者一般不需要考慮內存地址。 

 

遞歸計算 3! 的堆棧(三次乘法)

你可能會想象當計算 n = 20000 時堆棧會更高。我們可以做些什么優化它嗎?當然可以。作為 ES2015 (又名 ES6) 標準的一部分,有一個優化用來解決這個問題。它被稱作尾調用優化proper tail calls optimization(PTC)。當遞歸函數做的***一件事是調用自己并返回結果的時候,它使得瀏覽器刪除或者忽略堆棧幀。實際上,這個優化對于相互遞歸函數也是有效的,但是為了簡單起見,我們還是來看單一遞歸函數。

你可能會注意到,在遞歸函數調用之后,還要進行一次額外的計算(n * r)。那意味著瀏覽器不能通過 PTC 來優化遞歸;然而,我們可以通過重寫函數使***一步變成遞歸調用以便優化。一個竅門是將中間結果(在這里是 product)作為參數傳遞給函數。

  1. 'use strict'
  2. // Optimized for tail call optimization. 
  3. function factorial(n, product = 1) { 
  4.   if (n === 0) { 
  5.     return product; 
  6.   } 
  7.   return factorial(n - 1, product * n) 

讓我們來看看優化后的計算 factorial(3) 時的堆棧。如下圖所示,堆棧不會增長到超過兩層。原因是我們把必要的信息都傳到了遞歸函數中(比如 product)。所以,在 product 被更新后,瀏覽器可以丟棄掉堆棧中原先的幀。你可以在圖中看到每次最上面的幀下沉變成了底部的幀,原先底部的幀被丟棄,因為不再需要它了。 

 

遞歸計算 3! 的堆棧(三次乘法)使用 PTC

現在選一個瀏覽器運行吧,假設你在使用 Safari,你會得到 Infinity(它是比在 JavaScript 中能表達的***值更大的數)。但是我們沒有得到堆棧溢出錯誤,那很不錯!現在在其他的瀏覽器中呢怎么樣呢?Safari 可能現在乃至將來是實現 PTC 的唯一一個瀏覽器。看看下面的兼容性表格:

 

PTC 兼容性

其他瀏覽器提出了一種被稱作語法級尾調用syntactic tail calls(STC)的競爭標準。“語法級”意味著你需要用新的語法來標識你想要執行尾遞歸優化的函數。即使瀏覽器還沒有廣泛支持,但是把你的遞歸函數寫成支持尾遞歸優化的樣子還是一個好主意。

高階函數

我們已經知道 JavaScript 將函數視作一等公民,可以把函數像其他值一樣傳遞。所以,把一個函數傳給另一個函數也很常見。我們也可以讓函數返回一個函數。就是它!我們有高階函數。你可能已經很熟悉幾個在 Array.prototype 中的高階函數。比如 filter、map 和 reduce 就在其中。對高階函數的一種理解是:它是接受(一般會調用)一個回調函數參數的函數。讓我們來看看一些內置的高階函數的例子:

  1. const vehicles = [ 
  2.   { make: 'Honda', model: 'CR-V', type: 'suv', price: 24045 }, 
  3.   { make: 'Honda', model: 'Accord', type: 'sedan', price: 22455 }, 
  4.   { make: 'Mazda', model: 'Mazda 6', type: 'sedan', price: 24195 }, 
  5.   { make: 'Mazda', model: 'CX-9', type: 'suv', price: 31520 }, 
  6.   { make: 'Toyota', model: '4Runner', type: 'suv', price: 34210 }, 
  7.   { make: 'Toyota', model: 'Sequoia', type: 'suv', price: 45560 }, 
  8.   { make: 'Toyota', model: 'Tacoma', type: 'truck', price: 24320 }, 
  9.   { make: 'Ford', model: 'F-150', type: 'truck', price: 27110 }, 
  10.   { make: 'Ford', model: 'Fusion', type: 'sedan', price: 22120 }, 
  11.   { make: 'Ford', model: 'Explorer', type: 'suv', price: 31660 } 
  12. ]; 
  13. const averageSUVPrice = vehicles 
  14.   .filter(v => v.type === 'suv'
  15.   .map(v => v.price) 
  16.   .reduce((sum, price, i, array) => sum + price / array.length, 0); 
  17. console.log(averageSUVPrice); // 33399 

注意我們在一個數組對象上調用其方法,這是面向對象編程的特性。如果我們想要更函數式一些,我們可以用 Rmmda 或者 lodash/fp 提供的函數。注意如果我們使用 R.compose 的話,需要倒轉函數的順序,因為它從右向左依次調用函數(從底向上);然而,如果我們想從左向右調用函數就像上面的例子,我們可以用 R.pipe。下面兩個例子用了 Rmmda。注意 Rmmda 有一個 mean 函數用來代替 reduce 。

  1. const vehicles = [ 
  2.   { make: 'Honda', model: 'CR-V', type: 'suv', price: 24045 }, 
  3.   { make: 'Honda', model: 'Accord', type: 'sedan', price: 22455 }, 
  4.   { make: 'Mazda', model: 'Mazda 6', type: 'sedan', price: 24195 }, 
  5.   { make: 'Mazda', model: 'CX-9', type: 'suv', price: 31520 }, 
  6.   { make: 'Toyota', model: '4Runner', type: 'suv', price: 34210 }, 
  7.   { make: 'Toyota', model: 'Sequoia', type: 'suv', price: 45560 }, 
  8.   { make: 'Toyota', model: 'Tacoma', type: 'truck', price: 24320 }, 
  9.   { make: 'Ford', model: 'F-150', type: 'truck', price: 27110 }, 
  10.   { make: 'Ford', model: 'Fusion', type: 'sedan', price: 22120 }, 
  11.   { make: 'Ford', model: 'Explorer', type: 'suv', price: 31660 } 
  12. ]; 
  13. // Using `pipe` executes the functions from top-to-bottom.  
  14. const averageSUVPrice1 = R.pipe( 
  15.   R.filter(v => v.type === 'suv'), 
  16.   R.map(v => v.price), 
  17.   R.mean 
  18. )(vehicles); 
  19. console.log(averageSUVPrice1); // 33399 
  20. // Using `compose` executes the functions from bottom-to-top
  21. const averageSUVPrice2 = R.compose( 
  22.   R.mean, 
  23.   R.map(v => v.price), 
  24.   R.filter(v => v.type === 'suv'
  25. )(vehicles); 
  26. console.log(averageSUVPrice2); // 33399 

使用函數式方法的優點是清楚地分開了數據(vehicles)和邏輯(函數 filter,map 和 reduce)。面向對象的代碼相比之下把數據和函數用以方法的對象的形式混合在了一起。

柯里化

不規范地說,柯里化currying是把一個接受 n 個參數的函數變成 n 個每個接受單個參數的函數的過程。函數的 arity 是它接受參數的個數。接受一個參數的函數是 unary,兩個的是 binary,三個的是 ternary,n 個的是 n-ary。那么,我們可以把柯里化定義成將一個 n-ary 函數轉換成 n 個 unary 函數的過程。讓我們通過簡單的例子開始,一個計算兩個向量點積的函數。回憶一下線性代數,兩個向量 [a, b, c] 和 [x, y, z] 的點積是 ax + by + cz。

  1. function dot(vector1, vector2) { 
  2.   return vector1.reduce((sum, element, index) => sum += element * vector2[index], 0); 
  3. const v1 = [1, 3, -5]; 
  4. const v2 = [4, -2, -1]; 
  5. console.log(dot(v1, v2)); // 1(4) + 3(-2) + (-5)(-1) = 4 - 6 + 5 = 3 

dot 函數是 binary,因為它接受兩個參數;然而我們可以將它手動轉換成兩個 unary 函數,就像下面的例子。注意 curriedDot 是一個 unary 函數,它接受一個向量并返回另一個接受第二個向量的 unary 函數。

  1. function curriedDot(vector1) { 
  2.   return function(vector2) { 
  3.     return vector1.reduce((sum, element, index) => sum += element * vector2[index], 0); 
  4.   } 
  5. // Taking the dot product of any vector with [1, 1, 1] 
  6. // is equivalent to summing up the elements of the other vector. 
  7. const sumElements = curriedDot([1, 1, 1]); 
  8. console.log(sumElements([1, 3, -5])); // -1 
  9. console.log(sumElements([4, -2, -1])); // 1 

很幸運,我們不需要把每一個函數都手動轉換成柯里化以后的形式。Ramda 和 lodash 等庫可以為我們做這些工作。實際上,它們是柯里化的混合形式。你既可以每次傳遞一個參數,也可以像原來一樣一次傳遞所有參數。

  1. function dot(vector1, vector2) { 
  2.   return vector1.reduce((sum, element, index) => sum += element * vector2[index], 0); 
  3. const v1 = [1, 3, -5]; 
  4. const v2 = [4, -2, -1]; 
  5. // Use Ramda to do the currying for us! 
  6. const curriedDot = R.curry(dot); 
  7. const sumElements = curriedDot([1, 1, 1]); 
  8. console.log(sumElements(v1)); // -1 
  9. console.log(sumElements(v2)); // 1 
  10. // This works! You can still call the curried function with two arguments. 
  11. console.log(curriedDot(v1, v2)); // 3 

Ramda 和 lodash 都允許你“跳過”一些變量之后再指定它們。它們使用置位符來做這些工作。因為點積的計算可以交換兩項。傳入向量的順序不影響結果。讓我們換一個例子來闡述如何使用一個置位符。Ramda 使用雙下劃線作為其置位符。

  1. const giveMe3 = R.curry(function(item1, item2, item3) { 
  2.   return ` 
  3.     1: ${item1} 
  4.     2: ${item2} 
  5.     3: ${item3} 
  6.   `; 
  7. }); 
  8. const giveMe2 = giveMe3(R.__, R.__, 'French Hens');   // Specify the third argument. 
  9. const giveMe1 = giveMe2('Partridge in a Pear Tree');  // This will go in the first slot. 
  10. const result = giveMe1('Turtle Doves');               // Finally fill in the second argument. 
  11. console.log(result); 
  12. // 1: Partridge in a Pear Tree 
  13. // 2: Turtle Doves 
  14. // 3: French Hens 

在我們結束探討柯里化之前***的議題是偏函數應用partial application。偏函數應用和柯里化經常同時出場,盡管它們實際上是不同的概念。一個柯里化的函數還是柯里化的函數,即使沒有給它任何參數。偏函數應用,另一方面是僅僅給一個函數傳遞部分參數而不是所有參數。柯里化是偏函數應用常用的方法之一,但是不是唯一的。

JavaScript 擁有一個內置機制可以不依靠柯里化來做偏函數應用。那就是 function.prototype.bind 方法。這個方法的一個特殊之處在于,它要求你將 this 作為***個參數傳入。 如果你不進行面向對象編程,那么你可以通過傳入 null 來忽略 this。

  1. 1function giveMe3(item1, item2, item3) { 
  2.   return ` 
  3.     1: ${item1} 
  4.     2: ${item2} 
  5.     3: ${item3} 
  6.   `; 
  7. const giveMe2 = giveMe3.bind(null'rock'); 
  8. const giveMe1 = giveMe2.bind(null'paper'); 
  9. const result = giveMe1('scissors'); 
  10. console.log(result); 
  11. // 1: rock 
  12. // 2: paper 
  13. // 3: scissors 

總結

我希望你享受探索 JavaScript 中函數式編程的過程。對一些人來說,它可能是一個全新的編程范式,但我希望你能嘗試它。你會發現你的程序更易于閱讀和調試。不變性還將允許你優化 Angular 和 React 的性能。 

責任編輯:龐桂玉 來源: Linux中國
相關推薦

2016-08-11 10:11:07

JavaScript函數編程

2016-08-11 10:34:37

Javascript函數編程

2019-08-06 09:00:00

JavaScript函數式編程前端

2019-11-06 09:52:01

JavaScript單線程非阻塞

2012-02-06 13:52:33

JavaScript

2017-03-22 11:22:04

JavaScript函數式編程

2010-06-22 13:32:26

函數式編程JavaScript

2023-10-24 08:53:24

FutureTas并發編程

2022-10-31 08:02:07

Python函數式編程

2016-11-02 12:06:27

分布式系統大數據

2012-03-21 09:30:11

ibmdw

2023-07-10 09:39:02

lambdaPython語言

2015-12-23 10:00:04

多種編程語言

2018-05-24 08:37:30

2020-09-23 16:07:52

JavaScript函數柯里化

2015-05-25 15:06:28

JavaScript函數式編程

2019-10-31 08:36:59

線程內存操作系統

2020-11-01 09:05:16

函數式編程編程數據分析

2012-09-27 10:24:22

監控機房

2022-07-26 00:00:22

HTAP系統數據庫
點贊
收藏

51CTO技術棧公眾號

主站蜘蛛池模板: 日本xx视频免费观看 | 91在线精品一区二区 | 福利视频网 | 久久久激情视频 | 视频一区二区三区四区五区 | 国产日韩精品在线 | 国产精品色哟哟网站 | 国产日韩精品一区二区 | 色综合天天综合网国产成人网 | 日韩人体在线 | 日韩午夜电影在线观看 | 日韩影院在线观看 | 天天操网 | 亚洲欧美日韩在线不卡 | 日韩中文在线视频 | 91精品国产综合久久精品图片 | 高清一区二区三区 | 成人在线免费视频 | 午夜影视网| 在线观看深夜视频 | 日韩视频在线免费观看 | 99精品视频免费观看 | 日本成人中文字幕 | 亚洲第一成年免费网站 | 一级毛片免费看 | 深夜福利亚洲 | 一区二区在线免费观看 | 亚洲人人舔人人 | 午夜天堂精品久久久久 | 五月天激情综合网 | a在线免费观看视频 | 国产精品欧美一区二区三区不卡 | 日韩日韩日韩日韩日韩日韩日韩 | 精品视频一区二区三区四区 | 日韩中文字幕一区二区三区 | 暖暖成人免费视频 | 亚洲国产成人精品女人久久久 | 亚洲 中文 欧美 日韩 在线观看 | 色综合色综合色综合 | 国产成人精品一区二区三区 | 欧美精品一区二区在线观看 |