Javascript函數(shù)式編程簡單介紹
幾十年來,函數(shù)式編程一直是計算機科學狂熱者的至愛,由于數(shù)學的純潔性和謎一般的本質(zhì), 它被埋藏在計算機實驗室,只有數(shù)據(jù)學家和有希望獲得博士學位的人士使用。但是現(xiàn)在,它正經(jīng)歷一場復興, 這要感謝一些現(xiàn)代語言比如Python,Julia,Ruby,Clojure以及——但不是最后一個——Javascript。
你是說Javascript?這個WEB腳本語言?沒錯!
Javascript已經(jīng)被證明是一項長期以來都沒有消失的重要的技術。這主要是由于它擴展的一些框架和庫而使其具有重生的能力, 比如backbone.js,jQuery,Dojo,underscore.js等等。這與Javascript函數(shù)式編程語言的真實身份直接相關。 對Javascript函數(shù)式編程的理解很重要,并且在相當長的一段時間會對各種水平的程序員很有用。
為什么呢?函數(shù)式編程非常強大、健壯并且優(yōu)雅。它對于大型數(shù)據(jù)結(jié)構(gòu)非常有用并且高效。 Javascript作為一個客戶端腳本語言,在應對日益復雜的網(wǎng)站時,函數(shù)式地操作DOM、 組織API響應以及完成一些其它任務會非常有好處。
在這本書里,你將會學習用Javascript進行函數(shù)式編程所需要知道的一切:如何用函數(shù)式編程構(gòu)建你的Javascript web應用, 如何解鎖Javascript隱藏的力量,如何編寫更強大的代碼,并且由于程序更小,使得代碼更容易維護,能夠更快被下載, 并且花費更少的開支。你還會學到函數(shù)式編程的核心概念,以及如何將它們應用到Javascript, 還有將Javascript作為函數(shù)式語言時如何回避一些問題,如何在Javascript中混合使用函數(shù)式編程和面向?qū)ο缶幊獭?/p>
不過在我們開始前,先來做個實驗。
例子
也許快速舉個例子是介紹Javascript函數(shù)式編程最好的方式。我們將用Javascript完成一些任務—— 一個使用傳統(tǒng)、原生的方法,另一個使用函數(shù)式編程。然后我們將會比較這兩種方法。
應用——一個電子商務網(wǎng)站
為了追求真實感,我們來做一個電子商務網(wǎng)站,一個郵購咖啡豆的公司。這個網(wǎng)站會銷售好幾種類型的咖啡, 有不同的品質(zhì),當然也有不同的價格。
命令式方法
首先,我們開始寫程序。為了讓這個例子接地氣,我們需要創(chuàng)建一些對象來保存數(shù)據(jù)。如果需要的話我們可以從數(shù)據(jù)庫里取值。 但是現(xiàn)在我們假設他們是靜態(tài)定義的:
// create some objects to store the data. var columbian = {  name: 'columbian', basePrice: 5 }; var frenchRoast = { name: 'french roast', basePrice: 8 }; var decaf = { name: 'decaf', basePrice: 6 }; // 我們將使用輔助函數(shù)計算價格 // 根據(jù)size打印到一個HTML的列表中 function printPrice(coffee, size) { if (size == 'small') { var price = coffee.basePrice + 2; } else if (size == 'medium') { var price = coffee.basePrice + 4; } else { var price = coffee.basePrice + 6; } // create the new html list item var node = document.createElement("li"); var label = coffee.name + ' ' + size; var textnode = document.createTextNode(label+' price: $'+price); node.appendChild(textnode); document.getElementById('products').appendChild(node); } // 現(xiàn)在我們只需根據(jù)咖啡的各種價格和size的組合調(diào)用printPrice函數(shù) printPrice(columbian, 'small'); printPrice(columbian, 'medium'); printPrice(columbian, 'large'); printPrice(frenchRoast, 'small'); printPrice(frenchRoast, 'medium'); printPrice(frenchRoast, 'large'); printPrice(decaf, 'small'); printPrice(decaf, 'medium'); printPrice(decaf, 'large');
如你所見,這個代碼非?;A。如果現(xiàn)在有更多的咖啡種類而不只是這三個改怎么辦?如果有20個,甚至50個? 如果有更多的size呢?如果有有機和無機之分呢?這將會很快將代碼量變得巨大無比!
采用這種方法,我們讓機器去打印每一種咖啡類型和每一個size。這就是采用這種命令式方法的基本問題。
函數(shù)式編程
命令式的代碼一步一步地告訴電腦需要做什么來解決問題,相反,函數(shù)式編程追求用數(shù)學方式來描述問題, 其余的交給電腦來做。
通過更函數(shù)式一些的方式,同樣的應用可以這樣來寫:
// 從接口中分解數(shù)據(jù)和邏輯 var printPrice = function(price, label) { var node = document.createElement("li"); var textnode = document.createTextNode(label+' price: $'+price); node.appendChild(textnode); document.getElementById('products 2').appendChild(node); } // 為每種咖啡創(chuàng)建函數(shù)對象 var columbian = function(){ this.name = 'columbian'; this.basePrice = 5; }; var frenchRoast = function(){ this.name = 'french roast'; this.basePrice = 8; }; var decaf = function(){ this.name = 'decaf'; this.basePrice = 6; }; // 為每種size通過字面量創(chuàng)建對象 var small = { getPrice: function(){return this.basePrice + 2}, getLabel: function(){return this.name + ' small'} }; var medium = { getPrice: function(){return this.basePrice + 4}, getLabel: function(){return this.name + ' medium'} }; var large = { getPrice: function(){return this.basePrice + 6}, getLabel: function(){return this.name + ' large'} }; // 將所有咖啡的種類和size放到數(shù)組里 var coffeeTypes = [columbian, frenchRoast, decaf]; var coffeeSizes = [small, medium, large]; // 創(chuàng)建由上面內(nèi)容組成的新對象,并把它們放到一個新數(shù)組里 var coffees = coffeeTypes.reduce(function(previous, current) { var newCoffee = coffeeSizes.map(function(mixin) { // `plusmix`是函數(shù)式的minxin, 見第7章 var newCoffeeObj = plusMixin(current, mixin); return new newCoffeeObj(); }); return previous.concat(newCoffee); },[]); // 現(xiàn)在我們已經(jīng)定義了如何獲得所有咖啡種類和size組合方式的價格,現(xiàn)在可以直接打印它們了 coffees.forEach(function(coffee){ printPrice(coffee.getPrice(),coffee.getLabel()); });
首先需要明確的是這個代碼更加模塊化了。現(xiàn)在新增一種size或者信新增一個咖啡種類就像下面的代碼這樣簡單:
var peruvian = function(){ this.name = 'peruvian'; this.basePrice = 11; }; var extraLarge = { getPrice: function(){return this.basePrice + 10}, getLabel: function(){return this.name + ' extra large'} }; coffeeTypes.push(Peruvian); coffeeSizes.push(extraLarge);
咖啡對象的數(shù)組和size對象的數(shù)組混合(mix)到了一起,也就是他們的方法和成員變量被組合到了一塊兒 ——通過一個叫“plusMinxin”的自定義函數(shù)(詳見第七章)。這些咖啡類型的類(columbian, frenchRoast, decaf)包含了成員變量, 而這些size對象(small, medium, large)包含了獲取名稱和計算價格的方法。 ”混合”(minxing)這個動作通過一個map操作來起作用,也就是對數(shù)組中的每一個成員執(zhí)行一個純函數(shù)并返回一個新的函數(shù), 然后這些返回的函數(shù)被放到了一個reduce函數(shù)中被操作,reduce也是一個高階函數(shù),和map有些像, 只是reduce把數(shù)組里的所有元素處理后組合到了一個東西里面。最終,新的數(shù)組包含了所有可能的種類和size的組合, 這個數(shù)組通過forEach方法遍歷,forEach也是一個高階函數(shù),它會讓數(shù)組里面每一個對象作為參數(shù)執(zhí)行一遍回調(diào)函數(shù)。 在這個例子里,這個回調(diào)函數(shù)是一個匿名函數(shù),它獲取這些對象后,以對象的getPrice()和getLabel() 兩個方法的返回值作為參數(shù)調(diào)用printPrice函數(shù)。
實際上,我們可以讓這個例子更加函數(shù)式:去掉coffees變量,并將函數(shù)串到一起鏈式調(diào)用,這也是函數(shù)式編程的一個小技巧。
coffeeTypes.reduce(function(previous, current) { var newCoffee = coffeeSizes.map(function(mixin) { // `plusMixin` function for functional mixins, see Ch.7 var newCoffeeObj = plusMixin(current, mixin); return new newCoffeeObj(); }); return previous.concat(newCoffee); },[]).forEach(function(coffee) { printPrice(coffee.getPrice(),coffee.getLabel()); });
這樣,控制流沒有像命令式代碼那樣從頭到尾的順序進行。在函數(shù)式編程里,map函數(shù)和其它高階函數(shù)代替了for和while循環(huán), 只有少量關鍵的代碼是在順序執(zhí)行。 這使得新接觸的人在閱讀這樣范式的代碼有些困難,但是一旦你能夠欣賞它,你就會發(fā)現(xiàn)這根本沒啥難的, 而且這樣寫看起來更好。
這個例子僅僅是剛開始展露Javascript中函數(shù)式編程能做什么。通過這本書,你將會看到更多函數(shù)式實現(xiàn)的強悍的例子。
總結(jié)
首先,采用函數(shù)式風格的優(yōu)點已經(jīng)明確了。 其次,不要害怕函數(shù)式編程。的確,它往往被認為是編程語言的純邏輯形式,但是我們不需要理解lambda演算也能夠在日常任務中應用它。 實際上,通過把我們的程序拆分成小的片段,它們變得更容易被理解、維護,也更加可靠。 map和reduce函數(shù)是Javascript中不太被知道的內(nèi)建函數(shù),然而我們將要關注它們。
Javascript是一個腳本語言,可交互,易使用,不需要編譯。我們甚至不需要下載任何開發(fā)軟件, 你最喜歡的瀏覽器就可以作為開發(fā)環(huán)境的解釋器。
感興趣嗎?好,我們開始!
- Javascript中的高階函數(shù)介紹
- Javascript 高階函數(shù)使用介紹
- JS高階函數(shù)原理與用法實例分析
- JavaScript函數(shù)式編程(Functional Programming)純函數(shù)用法分析
- JavaScript函數(shù)式編程(Functional Programming)聲明式與命令式實例分析
- JavaScript 函數(shù)式編程實踐(來自IBM)
- javascript函數(shù)式編程實例分析
- 探究JavaScript函數(shù)式編程的樂趣
- 《JavaScript函數(shù)式編程》讀后感
- JavaScript的函數(shù)式編程基礎指南
- 淺談javascript函數(shù)式編程
- JavaScript函數(shù)式編程(Functional Programming)高階函數(shù)(Higher order functions)用法分析
相關文章
JS實現(xiàn)頁面跳轉(zhuǎn)鏈接的幾種方式匯總
這篇文章主要介紹了JS實現(xiàn)頁面跳轉(zhuǎn)鏈接的幾種方式,簡單總結(jié)了幾種頁面跳轉(zhuǎn)功能的實現(xiàn),有使用js跳轉(zhuǎn)頁面,返回上一次預覽界面及button按鈕添加事件跳轉(zhuǎn),本文結(jié)合實例代碼給大家介紹的非常詳細,需要的朋友參考下吧2024-01-01淺談JavaScript中定義變量時有無var聲明的區(qū)別
這篇文章主要介紹了JavaScript中定義變量時有無var聲明的區(qū)別分析以及示例分享,需要的朋友可以參考下2014-08-08JavaScript繼承基礎講解(原型鏈、借用構(gòu)造函數(shù)、混合模式、原型式繼承、寄生式繼承、寄生組合式繼承)
這篇文章主要介紹了JavaScript繼承基礎講解,原型鏈、借用構(gòu)造函數(shù)、混合模式、原型式繼承、寄生式繼承、寄生組合式繼承,需要的朋友可以參考下2014-08-08js實現(xiàn)當鼠標移到表格上時顯示這一格全部內(nèi)容的代碼
下面小編就為大家?guī)硪黄猨s實現(xiàn)當鼠標移到表格上時顯示這一格全部內(nèi)容的代碼。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-06-06avascript中的自執(zhí)行匿名函數(shù)應用示例
javascript中的自執(zhí)行匿名函數(shù)可以用它創(chuàng)建命名空間,只要把自己所有的代碼都寫在這個特殊的函數(shù)包裝內(nèi),那么外部就不能訪問,除非你允許2014-09-09