Js 函式式程式設計思想 (V客學院知識分享)

2022-08-31 20:57:12 字數 2741 閱讀 5521

隨之ecmascript 標準規範不斷更新,現在已經更新到

es7,

不久es8

規範即將面世,為了是

js 語法對函式程式設計更加友好,

諸如 rxjs (reactivex) 等函式式框架的不斷

流行。函式式程式設計則應該是以函式做為艦載主體,然後對函式進行拆分封裝、更加抽象,可擴充套件性極強。

與傳統命令式函式相比存在那些優勢?

語法精簡清晰

通用性更好

維護及可擴充套件性更好

限制作用域

以下列舉函式對比

//

陣列中每個單詞,首字母大寫

//一般寫法

for(const i in

arr)

console.log(arr);

//函式式寫法一

function

upperfirst(word)

function

wordtouppercase(arr)

//函式式寫法二

當情況變得更加複雜時,表示式的寫法會遇到幾個問題:

表意不明顯,逐漸變得難以維護

復用性差,會產生更多的**量

會產生很多中間變數

函式式程式設計很好的解決了上述問題。首先參看函式式寫法一

,它利用了函式封裝性將功能做拆解(粒度不唯一),並封裝為不同的函式,而再利用組合的呼叫達到目的。這樣做使得表意清晰,易於維護、復用以及擴充套件。其次利用高階函式

array.map 代替 for…of 做陣列遍歷,減少了中間變數和操作。

函式式寫法一

函式式寫法二

之間的主要差別在於,可以考慮函式是否後續有復用的可能,如果沒有,則後者更優。

從上面函式式寫法二

中我們可以看出,函式式**在寫的過程中,很容易造成橫向延展

,即產生多層巢狀,下面我們舉個比較極端點的例子。

//計算數字之和

//一般寫法

console.log(1 + 2 + 3 - 4)

//函式式寫法

function

sum(a, b)

function

sub(a, b)

console.log(sub(sum(sum(1, 2), 3), 4);

//

優化寫法 (嗯,你沒看錯,這就是 lodash 的鏈式寫法)

const utils =,

sum(b) ,

sub(b) ,

value()

};console.log(utils.chain(1).sum(2).sum(3).sub(4).value());

本例僅為展示橫向延展

的比較極端的情況,隨著函式的巢狀層數不斷增多,導致**的可讀性大幅下降,還很容易產生錯誤。

在這種情況下,我們可以考慮多種優化方式,比如下面的鏈式優化

這樣改寫後,結構會整體變得比較清晰,而且鏈的每一環在做什麼也可以很容易的展現出來。函式的巢狀和鏈式的對比還有乙個很好的例子,那就是**函式 和 promise 模式

//

順序請求兩個介面

//**函式

import $ from 'jquery';

$.post('a/url/to/target', (rs) =>

});}});

//promise

import request from 'catta'; //

catta 是乙個輕量級請求工具,支援 fetch,jsonp,ajax,無依賴

request('a/url/to/target')

.then(rs => rs ? $.post('a/url/to/another/target') : promise.reject())

.then(rs2 => rs2 ? $.post('a/url/to/third/target') : promise.reject());

隨著**函式巢狀層級和單層複雜度增加,它將會變得臃腫且難以維護,而promise的鏈式結構,在高複雜度時,仍能縱向擴充套件,而且層次隔離很清晰。

map (對映)

對映是對集合而言的,即把集合的每一項都做相同的變換,產生乙個新的集合

map作為乙個高階函式,他接受乙個函式引數作為對映的邏輯

//

陣列中每一項加一,組成乙個新陣列

//一般寫法

const arr = [1,2,3];

const rs =;

for(const n of arr)

console.log(rs)

//map改寫

const arr = [1,2,3];

const rs = arr.map(n => ++n);

上面一般寫法,利用for...of迴圈的方式遍歷陣列會產生額外的操作,而且有改變原陣列的風險

map函式封裝了必要的操作,使我們僅需要關心對映邏輯的函式實現即可,減少了**量,也降低了***產生的風險。

php socket程式設計 V客學院知識分享

php socket程式設計 v客學院知識分享 socket用於程序間通訊。程序間通訊通常基於客戶端 服務端模型。此時,客戶端 服務端是可以彼此互動的應用程式。客戶端和服務端之間的互動需要連線。socket 程式設計負責的就是為應用程式之間建立可進行互動的連線。下面主要講解用php建立乙個簡單的客戶...

PHP 物件導向程式設計(V客學院技術分享)

第一 什麼是物件導向 1.概念 一種計算機程式設計架構 2.原則 單個能夠起到子程式作用的單元或物件組合而成 3.目標 重用性 靈活性和擴充套件性 4.為了實現整體運算,每個物件都能夠接收資訊 處理資料和向其它物件傳送資訊。5.特點 首先,物件導向符合人類看待事物的一般規律。其次,採用物件導向方法可...

es6函式新功能使用(V客學院知識分享)

reduce 可以用來彙總 資料const customer const totalcount customer.reduce total,item total item.count,0 total 的初始值 now totalcount 92 把乙個物件陣列變成乙個以陣列中各個物件的 id 為屬性...