如何優(yōu)化JS代碼

這篇文章主要介紹“如何優(yōu)化JS代碼”，在日常操作中，相信很多人在如何優(yōu)化JS代碼問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”如何優(yōu)化JS代碼”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

假設(shè)看到了這樣的代碼：

if (a && d || b && c && !d || (!a || !b) && c) {   console.log('pass') } else {   console.log('fail') }

你是否一口老血噴在屏幕上?

當(dāng)然，這段代碼是我參考一個(gè)掘金沸點(diǎn)(@隔壁村的李二狗)偽造的，但愿你和你的同事都別這么寫。

能寫出這種與或非，如果不是邏輯不清，那么估計(jì)只有一種可能，需求變更很多次，多人修改后的結(jié)果。。

現(xiàn)在的問題是，面對如此代碼，這么復(fù)雜的邏輯，能否優(yōu)化?

答案是肯定的!

這種問題的探究來自于一門數(shù)學(xué)：布爾代數(shù)或邏輯代數(shù)。

說到布爾，我們開發(fā)者對此太熟悉了。不就是 true 和 false 嘛。

布爾代數(shù)這門課，大學(xué)里應(yīng)該或多或少都講些吧。因?yàn)槲沂菙?shù)學(xué)專業(yè)畢業(yè)的，看到這種問題必須記錄一下，也順便復(fù)習(xí)一下。

為了方便表達(dá)，JS 中的與或非，我用布爾代數(shù)里面的表示方法：

因此 a && d || b && c && !d || (!a || !b) && c  可以表達(dá)為：

轉(zhuǎn)化后優(yōu)先級(jí)清晰多了。

現(xiàn)在的問題是，我們?nèi)绾位嗊@個(gè)邏輯表達(dá)式。

還好有一些常用結(jié)論可供我們使用：

前四個(gè)公式很好理解。比如，自己或上自己否，當(dāng)然為 true。

關(guān)鍵在于第 5 個(gè)公式?jīng)]那么直觀，可以通過畫圖簡單說明下(其他公式都可以類似推導(dǎo))。

首先看部分，如圖中綠色區(qū)域：

再看，如圖中綠色區(qū)域：

則二者之和為：

而部分正是圖中粉色區(qū)域：

因?yàn)榉凵珔^(qū)域原本就在前二者之和里面，因此加多少次都是一樣的。

注意最后這個(gè)公式核心特點(diǎn)：和是以和出現(xiàn)的。

有了這幾個(gè)公式作為鋪墊，我們就可以正式推導(dǎo)了(原沸點(diǎn)配圖中有)：

根據(jù)第 4 條，替換最后一項(xiàng)：

注意到前兩項(xiàng)分別有和，符合第 5 條：

此時(shí)最后兩項(xiàng)，符合第 2 條：

最后兩項(xiàng)，其中一項(xiàng)為，另外一項(xiàng)也包含，滿足第 3 條：

至此化簡完了。真是不可以思議，B 沒了!

此時(shí)開篇的代碼簡化成了這樣：

if (a && d || c) {   console.log('pass') } else {   console.log('fail') }

到此，關(guān)于“如何優(yōu)化JS代碼”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！