js 與或運算子 妙用

2022-03-23 17:48:27 字數 3421 閱讀 2346

首先出個題:

假設對成長速度顯示規定如下: 

成長速度為5顯示1個箭頭;

成長速度為10顯示2個箭頭;

成長速度為12顯示3個箭頭;

成長速度為15顯示4個箭頭;

其他都顯示都顯示0各箭頭。

用**怎麼實現?

差一點的if,else:

js**

**如下:

var add_level = 0

; if(add_step == 5

) else

if(add_step == 10

) else

if(add_step == 12

) else

if(add_step == 15

) else

稍好些的switch:

js**

var add_level = 0

; switch

(add_step)

**如下:

如果需求改成: 

成長速度為》12顯示4個箭頭; 

成長速度為》10顯示3個箭頭;

成長速度為》5顯示2個箭頭;

成長速度為》0顯示1個箭頭;

成長速度為

<=0顯示0個箭頭。

那麼用switch實現起來也很麻煩了。

那麼你有沒有想過用一行就**實現呢?

ok,讓我們來看看js強大的表現力吧:

js**

**如下:

var add_level = (add_step==5 && 1) || (add_step==10 && 2) || (add_step==12 && 3) || (add_step==15 && 4) || 0;

更強大的,也更優的:

js**

**如下:

var add_level=[add_step] || 0;

第二個需求:

js**

var add_level = (add_step>12 && 4) || (add_step>10 && 3) || (add_step>5 && 2) || (add_step>0 && 1) || 0;

在js邏輯運算中,0、""、null、false、undefined、nan都會判為false,其他都為true

這個一定要記住,不然應用||和&&就會出現問題。

這裡順便提下:經常有人問我,看到很多**if(!!attr),為什麼不直接寫if(attr);

其實這是一種更嚴謹的寫法:

請測試 typeof 5和typeof !!5的區別。!!的作用是把乙個其他型別的變數轉成的bool型別。

下面主要討論下邏輯運算子&&和||。

幾乎所有語言中||和&&都遵循「短路」原理,如&&中第乙個表示式為假就不會去處理第二個表示式,而||正好相反。

js也遵循上述原則。但是比較有意思的是它們返回的值。

**:var attr = true && 4 && 「aaa」;

那麼執行的結果attr就不是簡單的true或這false,而是」aaa」

再來看看||:

**:var attr = attr || 「」;這個運算經常用來判斷乙個變數是否已定義,如果沒有定義就給他乙個初始值,這在給函式的引數定義乙個預設值的時候比較有用。因為js不像php可以直接在型引數上定義func($attr=5)。再次提醒你記住上面的原則:如果實參需要是0、""、null、false、undefined、nan的時候也會當false來處理。

if(a >=5

)

可以寫成:

a >= 5 && alert("

你好");

這樣只需一行**就搞定。但是需要注意的一點就是:js中||和&&的特性幫我們精簡了**的同時,也帶來了**可讀性的降低。這就需要我們自己來權衡了。

一方面精簡js**,能實質性的減少網路流量,尤其是大量應用的js公用庫。個人比較推薦的做法是:如果是相對複雜的應用,請適當地寫一些注釋。這個和正在表示式一樣,能夠精簡**,但是可讀性會降低,對讀**的人要求會高些,最好的辦法就是寫注釋。

我們可以不使用這些技巧,但是我們一定要能看懂,因為這些技巧已經廣泛應用,尤其是像jquery等js框裡的**,不理解這些你就很難看懂別人的**。

像var yahoo = yahoo || {};這種是非常廣泛應用的。

ok,最後讓我們來看一段jquery中的**吧:

js**

**如下:

var wrap = 

//option or optgroup

!tags.indexof("

") &&[

1, "

", "

" ] ||

!tags.indexof("

") &&[

1, "

", "

" ] ||tags.match(/^<(thead|tbody|tfoot|colg|cap)/) &&[

1, "

", "

" ] ||

!tags.indexof("

") &&[

2, "

", "

" ] ||

//matched above

(!tags.indexof("

") || !tags.indexof("

")) &&[

3, "

", "

" ] ||

!tags.indexof("

") &&[

2, "

", "

" ] ||

//ie can't serialize and tags normally

!jquery.support.htmlserialize &&[

1, "

div", "

" ] ||[

0, "", ""

];

// div.innerhtml = wrap[1] + elem + wrap[2

];

//move to the right depth

while ( wrap[0]--)

div = div.lastchild;

這段**是作者用來處理 $(html) 時,有些標籤必須要約束的,如必須在之內的。

可能你也發現了作者還有乙個很巧的地方就是 !tags.indexof("

js 與或運算子 妙用

js 與或運算子 妙用,可用於精簡 降低程式的可讀性。首先出個題 如圖 假設對成長速度顯示規定如下 成長速度為5顯示1個箭頭 成長速度為10顯示2個箭頭 成長速度為12顯示3個箭頭 成長速度為15顯示4個箭頭 其他都顯示都顯示0各箭頭。用 怎麼實現?差一點的if,else var add level...

js 與或運算子 妙用

首先我們來梳理一下乙個概念,請你一定要記住 在js邏輯運算中,0 null false undefined nan都會判為false,其他都為true 好像沒有遺漏了吧,請各位確認下 這個一定要記住,不然應用 和 就會出現問題。這裡順便提下 經常有人問我,看到很多 if attr 為什麼不直接寫if...

js 與或運算子 妙用

js 與或運算子 妙用,可用於精簡 降低程式的可讀性。如圖 假設對成長速度顯示規定如下 成長速度為5顯示1個箭頭 成長速度為10顯示2個箭頭 成長速度為12顯示3個箭頭 成長速度為15顯示4個箭頭 其他都顯示都顯示0各箭頭。用 怎麼實現?兩種方法 if 和 switch var add level ...