深入探討javascript函數(shù)式編程
有時,優(yōu)雅的實(shí)現(xiàn)是一個函數(shù)。不是方法。不是類。不是框架。只是函數(shù)。
- John Carmack,游戲《毀滅戰(zhàn)士》首席程序員
函數(shù)式編程全都是關(guān)于如何把一個問題分解為一系列函數(shù)的。通常,函數(shù)會鏈在一起,互相嵌套, 來回傳遞,被視作頭等公民。如果你使用過諸如jQuery或Node.js這樣的框架,你應(yīng)該用過一些這樣的技術(shù), 只不過你沒有意識到。
我們從Javascript的一個小尷尬開始。
假設(shè)我們需要一個值的列表,這些值會賦值給普通的對象。這些對象可能包含任何東西:數(shù)據(jù)、HTML對象等等。
var
obj1 = {value: 1},
obj2 = {value: 2},
obj3 = {value: 3};
var values = [];
function accumulate(obj) {
values.push(obj.value);
}
accumulate(obj1);
accumulate(obj2);
console.log(values); // Output: [obj1.value, obj2.value]
這個代碼能用但是不穩(wěn)定。任何代碼都可以不通過accumulate()函數(shù)改變values對象。 而且如果我們忘記了給values賦上空數(shù)組[],這個代碼壓根兒就不會工作。
但是如果變量聲明在函數(shù)內(nèi)部,他就不會被任何搗蛋的代碼給更改。
function accumulate2(obj) {
var values = [];
values.push(obj.value);
return values;
}
console.log(accumulate2(obj1)); // Returns: [obj1.value]
console.log(accumulate2(obj2)); // Returns: [obj2.value]
console.log(accumulate2(obj3)); // Returns: [obj3.value]
不行呀!只有最后傳入的那個對象的值才被返回。
我們也許可以通過在第一個函數(shù)內(nèi)部嵌套一個函數(shù)來解決這個問題。
var ValueAccumulator = function(obj) {
var values = []
var accumulate = function() {
values.push(obj.value);
};
accumulate();
return values;
};
可是問題依然存在,而且我們現(xiàn)在無法訪問accumulate函數(shù)和values變量了。
我們需要的是一個自調(diào)用函數(shù)
自調(diào)用函數(shù)和閉包
如果我們能夠返回一個可以依次返回values數(shù)組的函數(shù)表達(dá)式怎么樣?在函數(shù)內(nèi)聲明的變量可以被函數(shù)內(nèi)的所有代碼訪問到, 包括自調(diào)用函數(shù)。
通過使用自調(diào)用函數(shù),前面的尷尬消失了。
var ValueAccumulator = function() {
var values = [];
var accumulate = function(obj) {
if (obj) {
values.push(obj.value);
return values;
} else {
return values;
}
};
return accumulate;
};
//This allows us to do this:
var accumulator = ValueAccumulator();
accumulator(obj1);
accumulator(obj2);
console.log(accumulator());
// Output: [obj1.value, obj2.value]
ValueAccumulator = ->
values = []
(obj) ->
values.push obj.value if obj
values
這些都是關(guān)于作用域的。變量values在內(nèi)部函數(shù)accumulate()中可見,即便是在外部的代碼在調(diào)用這個函數(shù)時。 這叫做閉包。
Javascript中的閉包就是函數(shù)可以訪問父作用域,哪怕父函數(shù)已經(jīng)執(zhí)行完畢。
閉包是所有函數(shù)式語言都具有的特征。傳統(tǒng)的命令式語言沒有閉包。
高階函數(shù)
自調(diào)用函數(shù)實(shí)際上是高階函數(shù)的一種形式。高階函數(shù)就是以其它函數(shù)為輸入,或者返回一個函數(shù)為輸出的函數(shù)。
高階函數(shù)在傳統(tǒng)的編程中并不常見。當(dāng)命令式程序員使用循環(huán)來迭代數(shù)組的時候,函數(shù)式程序員會采用完全不同的一種實(shí)現(xiàn)方式。 通過高階函數(shù),數(shù)組中的每一個元素可以被應(yīng)用到一個函數(shù)上,并返回新的數(shù)組。
這是函數(shù)式編程的中心思想。高階函數(shù)具有把邏輯像對象一樣傳遞給函數(shù)的能力。
在Javascript中,函數(shù)被作為頭等公民對待,這和Scheme、Haskell等經(jīng)典函數(shù)是語言一樣的。 這話聽起來可能有點(diǎn)古怪,其實(shí)實(shí)際意思就是函數(shù)被當(dāng)做基本類型,就像數(shù)字和對象一樣。 如果數(shù)字和對象可以被來回傳遞,那么函數(shù)也可以。
來實(shí)際看看。現(xiàn)在把上一節(jié)的ValueAccumulator()函數(shù)配合高階函數(shù)使用:
// 使用forEach()來遍歷一個數(shù)組,并對其每個元素調(diào)用回調(diào)函數(shù)accumulator2
var accumulator2 = ValueAccumulator();
var objects = [obj1, obj2, obj3]; // 這個數(shù)組可以很大
objects.forEach(accumulator2);
console.log(accumulator2());
純函數(shù)
純函數(shù)返回的計算結(jié)果僅與傳入的參數(shù)相關(guān)。這里不會使用外部的變量和全局狀態(tài),并且沒有副作用。 換句話說就是不能改變作為輸入傳入的變量。所以,程序里只能使用純函數(shù)返回的值。
用數(shù)學(xué)函數(shù)來舉一個簡單的例子。Math.sqrt(4)將總是返回2,不使用任何隱藏的信息,如設(shè)置或狀態(tài), 而且不會帶來任何副作用。
純函數(shù)是對數(shù)學(xué)上的“函數(shù)”的真實(shí)演繹,就是輸入和輸出的關(guān)系。它們思路簡單也便于重用。 由于純函數(shù)是完全獨(dú)立的,它們更適合被一次又一次地使用。
舉例說明來對比一下非純函數(shù)和純函數(shù)。
// 把信息打印到屏幕中央的函數(shù)
var printCenter = function(str) {
var elem = document.createElement("div");
elem.textContent = str;
elem.style.position = 'absolute';
elem.style.top = window.innerHeight / 2 + "px";
elem.style.left = window.innerWidth / 2 + "px";
document.body.appendChild(elem);
};
printCenter('hello world');
// 純函數(shù)完成相同的事情
var printSomewhere = function(str, height, width) {
var elem = document.createElement("div");
elem.textContent = str;
elem.style.position = 'absolute';
elem.style.top = height;
elem.style.left = width;
return elem;
};
document.body.appendChild(
printSomewhere('hello world',
window.innerHeight / 2) + 10 + "px",
window.innerWidth / 2) + 10 + "px"));
非純函數(shù)依賴window對象的狀態(tài)來計算寬度和高度,自給自足的純函數(shù)則要求這些值作為參數(shù)傳入。 實(shí)際上它就允許了信息打印到任何地方,這也讓這個函數(shù)有了更多用途。
非純函數(shù)看起來是一個更容易的選擇,因?yàn)樗谧约簝?nèi)部實(shí)現(xiàn)了追加元素,而不是返回元素。 返回了值的純函數(shù)printSomewhere()則會在跟其他函數(shù)式編程技術(shù)的配合下有更好的表現(xiàn)。
var messages = ['Hi', 'Hello', 'Sup', 'Hey', 'Hola'];
messages.map(function(s, i) {
return printSomewhere(s, 100 * i * 10, 100 * i * 10);
}).forEach(function(element) {
document.body.appendChild(element);
});
當(dāng)一個函數(shù)是純的,也就是不依賴于狀態(tài)和環(huán)境,我們就不用管它實(shí)際是什么時候被計算出來。 后面的惰性求值將講到這個。
匿名函數(shù)
把函數(shù)作為頭等對象的另一個好處是匿名函數(shù)。
就像名字暗示的那樣,匿名函數(shù)就是沒有名字的函數(shù)。實(shí)際不止這些。它允許了在現(xiàn)場定義臨時邏輯的能力。 通常這帶來的好處就是方便:如果一個函數(shù)只用一次,沒有必要給它浪費(fèi)一個變量名。
下面是一些匿名函數(shù)的例子:
// 寫匿名函數(shù)的標(biāo)準(zhǔn)方式
function() {
return "hello world"
};
// 匿名函數(shù)可以賦值給變量
var anon = function(x, y) {
return x + y
};
// 匿名函數(shù)用于代替具名回調(diào)函數(shù),這是匿名函數(shù)的一個更常見的用處
setInterval(function() {
console.log(new Date().getTime())
}, 1000);
// Output: 1413249010672, 1413249010673, 1413249010674, ...
// 如果沒有把它包含在一個匿名函數(shù)中,他將立刻被執(zhí)行,
// 并且返回一個undefined作為回調(diào)函數(shù):
setInterval(console.log(new Date().getTime()), 1000)
// Output: 1413249010671
下面是匿名函數(shù)和高階函數(shù)配合使用的例子
function powersOf(x) {
return function(y) {
// this is an anonymous function!
return Math.pow(x, y);
};
}
powerOfTwo = powersOf(2);
console.log(powerOfTwo(1)); // 2
console.log(powerOfTwo(2)); // 4
console.log(powerOfTwo(3)); // 8
powerOfThree = powersOf(3);
console.log(powerOfThree(3)); // 9
console.log(powerOfThree(10)); // 59049
這里返回的那個函數(shù)不需要命名,它可以在powersOf()函數(shù)外的任何地方使用,這就是匿名函數(shù)。
還記得累加器的那個函數(shù)嗎?它可以用匿名函數(shù)重寫
var
obj1 = { value: 1 },
obj2 = { value: 2 },
obj3 = { value: 3 };
var values = (function() {
// 匿名函數(shù)
var values = [];
return function(obj) {
// 有一個匿名函數(shù)!
if (obj) {
values.push(obj.value);
return values;
} else {
return values;
}
}
})(); // 讓它自執(zhí)行
console.log(values(obj1)); // Returns: [obj.value]
console.log(values(obj2)); // Returns: [obj.value, obj2.value]
obj1 = { value: 1 }
obj2 = { value: 2 }
obj3 = { value: 3 }
values = do ->
valueList = []
(obj) ->
valueList.push obj.value if obj
valueList
console.log(values(obj1)); # Returns: [obj.value]
console.log(values(obj2)); # Returns: [obj.value, obj2.value]
真棒!一個高階匿名純函數(shù)。我們怎么這么幸運(yùn)?實(shí)際上還不止這些,這里面還有個自執(zhí)行的結(jié)構(gòu), (function(){...})();。函數(shù)后面跟的那個括號可以讓函數(shù)立即執(zhí)行。在上面的例子里, 給外面values賦的值是函數(shù)執(zhí)行的結(jié)果。
匿名函數(shù)不僅僅是語法糖,他們是lambda演算的化身。請聽我說下去…… lambda演算早在計算機(jī)和計算機(jī)語言被發(fā)明的很久以前就出現(xiàn)了。它只是個研究函數(shù)的數(shù)學(xué)概念。 非同尋常的是,盡管它只定義了三種表達(dá)式:變量引用,函數(shù)調(diào)用和匿名函數(shù),但它被發(fā)現(xiàn)是圖靈完整的。 如今,lambda演算處于所有函數(shù)式語言的核心,包括javascript。
由于這個原因,匿名函數(shù)往往被稱作lambda表達(dá)式。
匿名函數(shù)也有一個缺點(diǎn),那就是他們在調(diào)用棧中難以被識別,這會對調(diào)試造成一些困難。要小心使用匿名函數(shù)。
方法鏈
在Javascript中,把方法鏈在一起很常見。如果你使用過jQuery,你應(yīng)該用過這種技巧。它有時也被叫做“建造者模式”。
這種技術(shù)用于簡化多個函數(shù)依次應(yīng)用于一個對象的代碼。
// 每個函數(shù)占用一行來調(diào)用,不如…… arr = [1, 2, 3, 4]; arr1 = arr.reverse(); arr2 = arr1.concat([5, 6]); arr3 = arr2.map(Math.sqrt); // ……把它們串到一起放在一行里面 console.log([1, 2, 3, 4].reverse().concat([5, 6]).map(Math.sqrt)); // 括號也許可以說明是怎么回事 console.log(((([1, 2, 3, 4]).reverse()).concat([5, 6])).map(Math.sqrt));
這只有在函數(shù)是目標(biāo)對象所擁有的方法時才有效。如果你要創(chuàng)建自己的函數(shù),比如要把兩個數(shù)組zip到一起, 你必須把它聲明為Array.prototype對象的成員.看一下下面的代碼片段:
Array.prototype.zip = function(arr2) {
// ...
}
這樣我們就可以寫成下面的樣子
arr.zip([11,12,13,14).map(function(n){return n*2});
// Output: 2, 22, 4, 24, 6, 26, 8, 28
遞歸
遞歸應(yīng)該是最著名的函數(shù)式編程技術(shù)。就是一個函數(shù)調(diào)用它自己。
當(dāng)函數(shù)調(diào)用自己,有時奇怪的事情就發(fā)生了。它的表現(xiàn)即是一個循環(huán),多次執(zhí)行同樣的代碼,也是一個函數(shù)棧。
使用遞歸函數(shù)時必須十分小心地避免無限循環(huán)(這里應(yīng)該說是無限遞歸)。就像循環(huán)一樣,必須有個停止條件。 這叫做基準(zhǔn)情形(base case)。
下面有個例子
var foo = function(n) {
if (n < 0) {
// 基準(zhǔn)情形
return 'hello';
} else {
// 遞歸情形
return foo(n - 1);
}
}
console.log(foo(5));
譯注:原文中的代碼有誤,遞歸情形的函數(shù)調(diào)用缺少return,導(dǎo)致函數(shù)執(zhí)行得最后沒有結(jié)果。這里已經(jīng)糾正。
遞歸和循環(huán)可以相互轉(zhuǎn)換。但是遞歸算法往往更合適,甚至是必要的,因?yàn)橛行┣樾斡醚h(huán)很費(fèi)勁。
一個明顯的例子就是遍歷樹。
var getLeafs = function(node) {
if (node.childNodes.length == 0) {
// base case
return node.innerText;
} else {
// recursive case:
return node.childNodes.map(getLeafs);
}
}
分而治之
遞歸不只是代替for和while循環(huán)的有趣的方式。有個叫分而治之的算法,它遞歸地把問題拆分成更小的情形, 直到小到可以解決。
歷史上有個歐幾里得算法用于找出兩個數(shù)的最大公分母
function gcd(a, b) {
if (b == 0) {
// 基準(zhǔn)情形 (治)
return a;
} else {
// 遞歸情形 (分)
return gcd(b, a % b);
}
}
console.log(gcd(12,8));
console.log(gcd(100,20));
gcb = (a, b) -> if b is 0 then a else gcb(b, a % b)
理論上來說,分而治之很牛逼,但是現(xiàn)實(shí)中有用嗎?當(dāng)然!用Javascript的函數(shù)對數(shù)組排序不是很好, 它不但替換了原數(shù)組,也就是說數(shù)據(jù)不是不變的,并且它還不夠可靠、靈活。通過分而治之,我們可以做得更好。
全部的實(shí)現(xiàn)代碼大概要40行,這里只展示偽代碼:
var mergeSort = function(arr) {
if (arr.length < 2) {
// 基準(zhǔn)情形: 只有0或1個元素的數(shù)組是不用排序的
return items;
} else {
// 遞歸情形: 把數(shù)組拆分、排序、合并
var middle = Math.floor(arr.length / 2);
// 分
var left = mergeSort(arr.slice(0, middle));
var right = mergeSort(arr.slice(middle));
// 治
// merge是一個輔助函數(shù),返回一個新數(shù)組,它將兩個數(shù)組合并到一起
return merge(left, right);
}
}
譯注:關(guān)于用分而治之的思路進(jìn)行排序的一個更好的例子是快排,使用Javascript也只有13行代碼。 具體請參考我以前的博文 《優(yōu)雅的函數(shù)式編程語言》
惰性求值
惰性求值,也叫做非嚴(yán)格求值,它會按需調(diào)用并推遲執(zhí)行,它是一種直到需要時才計算函數(shù)結(jié)果的求值策略, 這對函數(shù)式編程特別有用。比如有行代碼是 x = func(),調(diào)用這個func()函數(shù)得到的返回值會賦值給x。 但是x等于什么一開始并不重要,直到需要用到x的時候。等到需要用x的時候才調(diào)用func()就是惰性求值。
這一策略可以讓性能明顯增強(qiáng),特別是當(dāng)使用方法鏈和數(shù)組這些函數(shù)式程序員最喜愛的程序流技術(shù)的時候。 惰性求值讓人興奮的一個優(yōu)點(diǎn)是讓無限序列成為可能。因?yàn)樵谒鼘?shí)在無法繼續(xù)延遲之前,什么都不需要被真正計算出來。 它可以是這個樣子:
// 理想化的JavaScript偽代碼: var infinateNums = range(1 to infinity); var tenPrimes = infinateNums.getPrimeNumbers().first(10);
這為很多可能性敞開了大門,比如異步執(zhí)行、并行計算、組合,這只列舉了一點(diǎn)。
然而,還有個問題,Javascript本身并不支持惰性求值,也就是說存在讓Javascript模擬惰性求值的函數(shù)庫, 這是第三章的主題。
- JavaScript函數(shù)式編程(Functional Programming)聲明式與命令式實(shí)例分析
- 詳解用函數(shù)式編程對JavaScript進(jìn)行斷舍離
- js 函數(shù)式編程學(xué)習(xí)筆記
- JavaScript與函數(shù)式編程解釋
- javascript函數(shù)式編程實(shí)例分析
- JavaScript 函數(shù)式編程的原理
- 用函數(shù)式編程技術(shù)編寫優(yōu)美的 JavaScript
- 理解javascript函數(shù)式編程中的閉包(closure)
- 探究JavaScript函數(shù)式編程的樂趣
- 《JavaScript函數(shù)式編程》讀后感
- JavaScript函數(shù)式編程(Functional Programming)純函數(shù)用法分析
相關(guān)文章
前端實(shí)現(xiàn)圖片壓縮方案總結(jié)(干貨)
這篇文章主要介紹了前端實(shí)現(xiàn)圖片壓縮的幾種方法和技術(shù),包括使用HTML5的canvas元素和推薦的第三方庫image-magic-adapter,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-01-01
video.js 實(shí)現(xiàn)視頻只能后退不能快進(jìn)的思路詳解
這篇文章主要介紹了video.js 實(shí)現(xiàn)視頻只能后退不能快進(jìn)的思路詳解,主要思路是點(diǎn)擊進(jìn)度條需要獲取拖動前的時間點(diǎn),具體實(shí)例代碼大家跟隨小編一起看看吧2018-08-08
bootstrap實(shí)現(xiàn)動態(tài)進(jìn)度條效果
本篇文章主要介紹了bootstrap實(shí)現(xiàn)動態(tài)進(jìn)度條效果,進(jìn)度條可以加強(qiáng)應(yīng)用的用戶體驗(yàn)效果,看到數(shù)字,具有一定的參考價值,有興趣的可以了解一下。2017-03-03
淺談javascript中for in 和 for each in的區(qū)別
兩個的作用都用來遍歷對象,但為什么有了for in語句了還要for each in語句呢,后來看了下for each in開發(fā)的文檔,for each in是作為E4X標(biāo)準(zhǔn)的一部分在javascript 1.6中發(fā)布的,而且它不是ECMAScript標(biāo)準(zhǔn)的一部分2015-04-04
JavaScript面試開發(fā)常用的知識點(diǎn)總結(jié)
這篇文章主要為大家詳細(xì)總結(jié)了JavaScript面試開發(fā)常用的知識點(diǎn),感興趣的小伙伴們可以參考一下2016-08-08

