Javascript優化技巧之短路表達式詳細介紹

 這篇文章主要介紹了Javascript優化技巧之短路表達式詳細介紹,本文講解了什麼是短路表達式,並給出了一些示例,需要的朋友可以參考下

   

什麼是短路表達式？

短路表達式：作為"&&"和"||"操作符的操作數表達式，這些表達式在進行求值時，只要最終的結果已經可以確定是真或假，求值過程便告終止，這稱之為短路求值。這是這兩個操作符的一個重要屬性。

一個最簡單的例子：

 

代碼如下:
foo = foo||bar;

 

這行代碼是什麼意思？答案：

 

代碼如下:
//如果foo存在，值不變，否則把bar的值賦給foo
if(!foo)
foo = bar;

 

在javascript的邏輯運算中，0、""、null、false、undefined、NaN都會判定為false，而其他都為true。所以在上式的foo = foo||bar;中，||先計算第一個運算數，如果可以被轉換成true，也就是表示foo已經存在有值，那麼返回左邊這個表達式的值，否則計算第二個運算數bar。

另外，即使||運算符的運算數不是布爾值，仍然可以將它看作布爾OR運算，因為無論它返回的值是什麼類型，都可以被轉換為布爾值。

當然，使用如下做法會更加嚴謹：

 

代碼如下:
if(foo) //不夠嚴謹

if(!!foo) //更為嚴謹，!!可將其他類型的值轉換為boolean類型

 

可以測試一下：

代碼如下:
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

 

利用這一點可以很好的符合，優化javascript工程一文中提到的，使腳本少運行或者不運行，以達到優化javascript的目的。但是需要注意的是，這樣寫幫我們精簡了代碼的同時，也帶來了代碼可讀性的降低的缺點。所以比較好的做好是添加是適當的注釋。