Javascript優(yōu)化技巧之短路表達(dá)式詳細(xì)介紹
什么是短路表達(dá)式？
短路表達(dá)式：作為"&&"和"||"操作符的操作數(shù)表達(dá)式，這些表達(dá)式在進(jìn)行求值時(shí)，只要最終的結(jié)果已經(jīng)可以確定是真或假，求值過(guò)程便告終止，這稱之為短路求值。這是這兩個(gè)操作符的一個(gè)重要屬性。
一個(gè)最簡(jiǎn)單的例子：
foo = foo||bar;
這行代碼是什么意思？答案：
//如果foo存在，值不變，否則把bar的值賦給foo
if(!foo)
foo = bar;
在javascript的邏輯運(yùn)算中，0、""、null、false、undefined、NaN都會(huì)判定為false，而其他都為true。所以在上式的foo = foo||bar;中，||先計(jì)算第一個(gè)運(yùn)算數(shù)，如果可以被轉(zhuǎn)換成true，也就是表示foo已經(jīng)存在有值，那么返回左邊這個(gè)表達(dá)式的值，否則計(jì)算第二個(gè)運(yùn)算數(shù)bar。
另外，即使||運(yùn)算符的運(yùn)算數(shù)不是布爾值，仍然可以將它看作布爾OR運(yùn)算，因?yàn)闊o(wú)論它返回的值是什么類型，都可以被轉(zhuǎn)換為布爾值。
當(dāng)然，使用如下做法會(huì)更加嚴(yán)謹(jǐn)：
if(foo) //不夠嚴(yán)謹(jǐn)
if(!!foo) //更為嚴(yán)謹(jǐn)，!!可將其他類型的值轉(zhuǎn)換為boolean類型
可以測(cè)試一下：
var foo;
var number = 1;
var string = "string";
var obj = {};
var arr = [];
console.log(typeof(foo)); // undefined
console.log(typeof(number)); //number
console.log(typeof(string)); //string
console.log(typeof(obj)); //object
console.log(typeof(arr)); //object
console.log(typeof(!!foo)); // boolean
console.log(typeof(!!number)); //boolean
console.log(typeof(!!string)); //boolean
console.log(typeof(!!obj)); //boolean
console.log(typeof(!!arr)); //boolean
利用這一點(diǎn)可以很好的符合，優(yōu)化javascript工程一文中提到的，使腳本少運(yùn)行或者不運(yùn)行，以達(dá)到優(yōu)化javascript的目的。但是需要注意的是，這樣寫幫我們精簡(jiǎn)了代碼的同時(shí)，也帶來(lái)了代碼可讀性的降低的缺點(diǎn)。所以比較好的做好是添加是適當(dāng)?shù)淖⑨尅?/p>
相關(guān)文章
Bootstrap基本樣式學(xué)習(xí)筆記之表單(3)
這篇文章主要介紹了Bootstrap學(xué)習(xí)筆記之表單基本樣式的相關(guān)資料,為大家分享了三種表單樣式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
微信小程序?qū)W習(xí)筆記之本地?cái)?shù)據(jù)緩存功能詳解
這篇文章主要介紹了微信小程序?qū)W習(xí)筆記之本地?cái)?shù)據(jù)緩存功能,結(jié)合實(shí)例形式分析了微信小程序wx.setStorage、wx.getStorage以及wx.removeStorage、wx.clearStorage針對(duì)數(shù)據(jù)緩存的存取、刪除等相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
js實(shí)現(xiàn)簡(jiǎn)單選項(xiàng)卡功能
這篇文章主要為大家詳細(xì)介紹了使用JS實(shí)現(xiàn)簡(jiǎn)單的選項(xiàng)卡功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-08-08
這篇文章主要介紹了element-ui?dialog彈窗增加全屏功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-11-11
淺談layer的Icon樣式以及一些常用的layer窗口使用方法
今天小編就為大家分享一篇淺談layer的Icon樣式以及一些常用的layer窗口使用方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)雙人五子棋小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05
這篇文章主要介紹了JS模板編譯的實(shí)現(xiàn)詳情，編譯是一種格式變成另一種格式的過(guò)程。編譯會(huì)導(dǎo)致好的結(jié)果，比如書寫簡(jiǎn)單的代碼，編譯出來(lái)復(fù)雜的代碼；或者提高代碼的使用性能2022-07-07
基于casperjs和resemble.js實(shí)現(xiàn)一個(gè)像素對(duì)比服務(wù)詳解
這篇文章主要給大家介紹了關(guān)于基于casperjs和resemble.js實(shí)現(xiàn)一個(gè)像素對(duì)比服務(wù)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01
這篇文章主要介紹了js日期范圍初始化得到前一個(gè)月日期的方法,涉及javascript操作日期的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-05-05
簡(jiǎn)單使用webpack打包文件的實(shí)現(xiàn)
這篇文章主要介紹了簡(jiǎn)單使用webpack打包文件的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10