《JavaScript函數(shù)式編程》讀后感
本文章記錄本人在學習 函數(shù)式 中理解到的一些東西,加深記憶和并且整理記錄下來,方便之后的復習。
在近期看到了《JavaScript函數(shù)式編程》這本書預售的時候就定了下來。主要目的是個人目前還是不理解什么是函數(shù)式編程。在自己學習的過程中一直聽到身邊的人說面向過程編程和面向?qū)ο缶幊?,而函?shù)式就非常少。為了自己不要落后于其他同學的腳步,故想以寫筆記的方式去分享和記錄自己閱讀中所汲取的知識。
js 和函數(shù)式編程
書中用了一句簡單的話來回答了什么是函數(shù)式編程:
函數(shù)式編程通過使用函數(shù)來將值轉(zhuǎn)換為抽象單元,接著用于構(gòu)建軟件系統(tǒng)。
我覺得一定有同學看了這一句還是不怎么動什么是函數(shù)式編程,且為什么要使用函數(shù)式編程。后面的很多例子都使用到了Underscore。
以函數(shù)為抽象單元
抽象方法是指隱藏了細節(jié)的函數(shù)。舉一個書中的例子,一個檢測輸出年齡值的函數(shù)(主要是關(guān)于錯誤和警告的報告):
function parseAge(age) { if (!_.isString(age)) throw new Error("Expecting a string"); var a; console.log("Attempting to parse an age"); a = parseInt(age, 10); if (_.isNaN(a)) { console.log(["Could not parse age: "].join()); a = 0; } return a; }
上面的函數(shù)判斷我們是不是輸入一個年齡,且必須是字符串形式。接著就是來運行這個函數(shù):
parseAge("42"); //=> 42 parseAge(42); //=> Error:Expecting a string parseAge("hhhh"); //=> 0
上面的parseAge函數(shù)工作正常沒有什么問題。如果我們要修改輸出錯誤=信息和警告的呈現(xiàn)方式、那么就需要修改相應的代碼行,以及其他地方的輸出模式。書中給的方法是通過將它們抽象成不同的函數(shù)來實現(xiàn):
function fail(thing) { throw new Error(thing); } function warn(thing) { console.log(["WARNING:", thing].join('')); } function note(thing) { console.log(["NOTE:", thing].join('')); }
接著就是使用上面的函數(shù),去重構(gòu)parseAge這個函數(shù)。
funciton parseAge(age) { if (!_.isString(age)) fail("Expecting a string"); var a; note("Attempting to parse an age"); a = parseInt(age, 10); if (_.isNaN(a)) { warn(["Could not parse age:", age].join("")); a = 0; } return a; }
把報告錯誤的代碼都放到不同的函數(shù)里去,且重構(gòu)后的parseAge和之前的也沒有多大的變化。但是不同的就是現(xiàn)在報告錯誤、信息和警告的想法已經(jīng)被抽象化。錯誤、信息和警告的報告結(jié)果也是完全被修改了。
這么做是,由于行為包含在單一的函數(shù)中,所以函數(shù)可以被能夠提供類似行為的新函數(shù)取代,或直接被完全不同的行為取代。
封裝和隱蔽
這個標題很容易理解,舉個例子。像我們經(jīng)常使用iife來避免全局的污染,這就是一個封裝和隱蔽的很好例子。通過使用iife來隱蔽自己的寫的一些變量和方法,目的就是不去污染全局的環(huán)境。這也是使用閉包的方式來隱蔽數(shù)據(jù)。
因為閉包也是一種函數(shù)。且和現(xiàn)在在學習函數(shù)式編程有莫大的關(guān)系。但是也不要忘記了之前學習的面向?qū)ο笫椒庋b,畢竟這兩者不能說誰更加的好。但是都掌握了也不是一件什么壞事。一句老話:看需求。
以函數(shù)為行為單位
隱藏數(shù)據(jù)和行為(通常不方便于快速修改)只是一種講函數(shù)作為抽象單元的方式。另一種方式就是提供一種簡單地存儲方式和傳遞基本行為的離線散單元。
書中一個小栗子,通過使用js語法來索引數(shù)組中的一個值:
var arr = ['a', 'b', 'c']; arr[1] //=> b
雖然上面索引數(shù)組中的中的一個值很簡單,但并沒有辦法可以在不把它放到函數(shù)里的前提下,獲取這個行為并根據(jù)需要來使用他/她。寫一個簡單函數(shù)nth,用來索引數(shù)組中的一個值:
function nth(a, index) { return a[index]; }
接著運行:
nth(arr, 1); //=> b
運行成功,但是如果傳入一個空對象時,就會報錯了。因此,如果想圍繞nth來實現(xiàn)函數(shù)抽象,我們或許會設(shè)計下面的聲明:nth返回一個存儲在允許索引訪問的數(shù)據(jù)類型中的有效袁術(shù)。這段聲明的關(guān)鍵在于索引數(shù)據(jù)的類型的概念?;蛟S需要一個函數(shù)來判斷類型:
function isIndexed(data) { return _.isArray(data) || _.isString(data); }
接著繼續(xù)完善nth函數(shù)。isIndexed函數(shù)是一個提供了判斷某個數(shù)據(jù)是否為字符串或者數(shù)組的抽象。
function nth(a, index) { if (!_.isNumber(index)) fail("Expected a number as the index"); if (!isIndexed(a)) fail("Not supported on non-indexed type"); if ((index < 0) || (index > a.length - 1)) fail("Index value is out of bounds"); return a[index]; }
從index抽對象構(gòu)建nth函數(shù)抽象的方式一樣,也可以以同樣的方式來構(gòu)建一個second抽象:
function second(a) { return nth(a, 1); }
函數(shù)second允許在一個不同但相關(guān)的情況下,正確的使用nth函數(shù):
second(arr); //=> b
通過上面的栗子,就知道。我們可以把每一步都抽象成一個函數(shù),把每一個參數(shù)都抽象出來。雖然這樣寫感覺定義了許多函數(shù)。不過這樣更加容易理解每一項的功能和流程。
數(shù)據(jù)抽象
JavaScript 的對象原型模型是一個豐富且基礎(chǔ)的數(shù)據(jù)方案。
因為js沒有類的原因,就有了許多模擬類的方法,且在ES6上也出現(xiàn)了class關(guān)鍵字。盡管類有許多長處,但很多的時候js應用程序的數(shù)據(jù)需求幣類中的簡單的要多。
基于類的對象系統(tǒng)的一個有理的論據(jù)是實現(xiàn)用戶界面的歷史使用。
js中的對象和數(shù)組已經(jīng)能夠滿足我們對數(shù)據(jù)的操作了,且Underscore也是重點也是如何處理數(shù)組和對象。
實施和使用的簡易性是使用js的核心數(shù)據(jù)結(jié)構(gòu)進行數(shù)據(jù)建模的目的。這并不是說面向?qū)ο蠡蛘呋陬惖姆椒ň屯耆珱]有用。處理集合為中心的函數(shù)式方式更加適合處理與人有關(guān)的數(shù)據(jù),而面向?qū)ο蟮姆椒ㄗ钸m合模擬人。
js函數(shù)式初試
在開始函數(shù)式編程前,需要先定義兩個常用且有用的函數(shù):
function existy(x) { return x != null } function truthy(x) { return (x !== false) && existy(x); }
existy函數(shù)旨在定義事物之前的存在。js中就有兩個值可以表示不存在:null和undefined。
truthy函數(shù)用來判斷一個對象是否應該認為是true的同義詞。
我們可以在很多地方使用到這兩個函數(shù),其實函數(shù)式理念來自于它們的使用。有些同學可能已經(jīng)熟悉了許多js實現(xiàn)中的map forEach等方法。且Underscroe也提供了許多類似的方法,這也許就是選擇Underscroe來輔助學習函數(shù)式編程的原因。
簡單說下就是:
一個對”存在“的抽象函數(shù)的定義。
一個建立在存在函數(shù)之上的,對”真“的抽象函數(shù)定義。
通過其他函數(shù)來使用上面的兩個函數(shù),以實現(xiàn)更多的行為。
加速
大概了解了函數(shù)式編程之后。你可能會想這函數(shù)式編程不是很慢嗎?比如前面獲取數(shù)組索引,有必要定義一個函數(shù)來專門獲取嗎?直接用arr[index]絕對比那些函數(shù)來的快。
var arr = [1, 2, 3, 4, 5]; // 最快 for (var i = 0; i < arr.length; i++) { console.log(arr[i]); } // 較慢 _.each(arr, function (val, index) { console.log(index); });
但是我們在寫代碼的時候可能不會考慮的那么深,也許使用函數(shù)的確比原生要慢一些。但是大多數(shù)情況下也不會去在乎那么點時間,且現(xiàn)在有強大的v8引擎,大部分情況下的他都能很高效的編譯和執(zhí)行我們的js代碼。所以我們沒有必要在還沒有寫出正確的代碼前考慮運算速度。
如果是我來選擇的話,可能會更加關(guān)注與代碼的風格。那種寫法寫的舒服看的舒服就使用哪一種,當然也是要保證基本的運算速度下,以不至于慢的離譜??吹氖娣拇a比跑的快的代碼可能更加有成就感。
總結(jié)
看完了第一章也是可以小結(jié)一下js的函數(shù)式編程。下面引用書上的總結(jié):
確定抽象,并為其構(gòu)建函數(shù)。
利用已有的函數(shù)來構(gòu)建更加復雜的抽象。
通過將現(xiàn)有的函數(shù)傳給其他的函數(shù)來構(gòu)建更加復雜的抽象。
單是構(gòu)建抽象還是不夠的,如果能夠把強大的數(shù)據(jù)抽象結(jié)合來實現(xiàn)函數(shù)式編程效果會更加好。
后面的章節(jié)讀后感會慢慢的分享給大家,敬請關(guān)注。
- 深入理解JavaScript中的箭頭函數(shù)
- JavaScript中的普通函數(shù)和箭頭函數(shù)的區(qū)別和用法詳解
- javascript ES6中箭頭函數(shù)注意細節(jié)小結(jié)
- JavaScript ES6箭頭函數(shù)使用指南
- JavaScript函數(shù)式編程(Functional Programming)高階函數(shù)(Higher order functions)用法分析
- JavaScript函數(shù)式編程(Functional Programming)純函數(shù)用法分析
- JavaScript函數(shù)式編程(Functional Programming)聲明式與命令式實例分析
- 詳解用函數(shù)式編程對JavaScript進行斷舍離
- 用函數(shù)式編程技術(shù)編寫優(yōu)美的 JavaScript_ibm
- JavaScript 函數(shù)式編程的原理
- JavaScript函數(shù)式編程(Functional Programming)箭頭函數(shù)(Arrow functions)用法分析
相關(guān)文章
JavaScript實現(xiàn)的可變動態(tài)數(shù)字鍵盤控件方式實例代碼
本篇文章主要介紹了JavaScript實現(xiàn)的可變動態(tài)數(shù)字鍵盤控件方式實例代碼,具有一定的參考價值,有興趣的可以了了解一下2017-07-07圖片輪換效果實現(xiàn)代碼(點擊按鈕停止執(zhí)行)
在這個實例中需要注意的是,要把images文件夾下圖片的命名設(shè)置為有順序的,1、2、3..才可以,感興趣的朋友可以參考下2013-04-04七個基于JavaScript實現(xiàn)的情人節(jié)表白特效
情人節(jié)將至 程序員證明自己不是直男的時候到啦 我們也有自己的專屬代碼浪漫。本文將介紹七個利用JavaScript實現(xiàn)的情人節(jié)表白特效,需要的可以參考一下2022-01-01JS switch判斷 三目運算 while 及 屬性操作代碼
這篇文章主要介紹了JS switch判斷 三目運算 while 及 屬性操作代碼,需要的朋友可以參考下2017-09-09基于JavaScript實現(xiàn)線性漸變的高斯模糊效果
這篇文章主要為大家詳細介紹了高斯模糊算法以及線性漸變的高斯模糊算法的原理,并通過一個小demo展示了如何實現(xiàn)y方向上線性漸變的高斯模糊效果,需要的可以了解下2024-01-01Javascript oop設(shè)計模式 面向?qū)ο缶幊毯唵螌嵗榻B
這篇文章主要介紹了Javascript oop設(shè)計模式 面向?qū)ο缶幊毯唵螌嵗榻B的相關(guān)資料,這里附有實例代碼幫助大家學習理解,需要的朋友可以參考下2016-12-12