網(wǎng)絡(luò)上找到的一篇關(guān)于邏輯與和邏輯或的文章，詳細(xì)記錄一下。

http://www.jb51.net/article/21339.htm

例1：用于賦值
&&：從左往右依次判斷，當(dāng)當(dāng)前值為true則繼續(xù)，為false則返回此值（是返回未轉(zhuǎn)換為布爾值時(shí)的原值哦）
|| ： 從左往右依次判斷，當(dāng)當(dāng)前值為false則繼續(xù)，為true則返回此值（是返回未轉(zhuǎn)換為布爾值時(shí)的原值哦）

// => aaa var attr = true && 4 && "aaa";// => 0 var attr = true && 0 && "aaa";// => 100 var attr = 100 || 12;// => e var attr = "e" || "hahaha"// => hahaha var attr = "" || "hahaha"

例2 經(jīng)過多次判斷的賦值

/* x>=15時(shí) => 4 x>=12時(shí) => 3 x>=10時(shí) => 2 x>=5時(shí) => 1 x<5時(shí) => 0 */ console.log((x>=15 && 4) || (x>=12 && 3) || (x>=10 && 2) || (x>=5 && 1) || 0);

例3 與對象形式的變量合體

/* x=15 時(shí) => 4 x=12 時(shí) => 3 x=10 時(shí) => 2 x=5 時(shí) => 1 其它 => 0 */ console.log( {'5':1,'10':2,'12':3,'15':4}[x] || 0 );

例4 用于執(zhí)行語句

if(a >=5){alert("你好");} //可以寫成： a >= 5 && alert("你好");

---

首先我們來梳理一下一個(gè)概念，請你一定要記住：在js邏輯運(yùn)算中，0、""、null、false、undefined、NaN都會判為false，其他都為true（好像沒有遺漏了吧，請各位確認(rèn)下）。這個(gè)一定要記住，不然應(yīng)用||和&&就會出現(xiàn)問題。?
這里順便提下：經(jīng)常有人問我，看到很多代碼if(!!attr)，為什么不直接寫if(attr)；?
其實(shí)這是一種更嚴(yán)謹(jǐn)?shù)膶懛?#xff1a;?
請測試 typeof 5和typeof !!5的區(qū)別。!!的作用是把一個(gè)其他類型的變量轉(zhuǎn)成的bool類型。?
下面主要討論下邏輯運(yùn)算符&&和||。?
幾乎所有語言中||和&&都遵循“短路”原理，如&&中第一個(gè)表達(dá)式為假就不會去處理第二個(gè)表達(dá)式，而||正好相反。?
js也遵循上述原則。但是比較有意思的是它們返回的值。?
代碼：var attr = true && 4 && “aaa”;?
那么運(yùn)行的結(jié)果attr就不是簡單的true或這false，而是”aaa”?
再來看看||：?
代碼：var attr = attr || “”;這個(gè)運(yùn)算經(jīng)常用來判斷一個(gè)變量是否已定義，如果沒有定義就給他一個(gè)初始值，這在給函數(shù)的參數(shù)定義一個(gè)默認(rèn)值的時(shí)候比較有用。因?yàn)閖s不像php可以直接在型參數(shù)上定義func($attr=5)。再次提醒你記住上面的原則：如果實(shí)參需要是0、""、null、false、undefined、NaN的時(shí)候也會當(dāng)false來處理。?

if(a >=5){?
alert("你好");?
}?
可以寫成：?
a >= 5 && alert("你好");?
這樣只需一行代碼就搞定。但是需要注意的一點(diǎn)就是：js中||和&&的特性幫我們精簡了代碼的同時(shí)，也帶來了代碼可讀性的降低。這就需要我們自己來權(quán)衡了。?
一方面精簡js代碼，能實(shí)質(zhì)性的減少網(wǎng)絡(luò)流量，尤其是大量應(yīng)用的js公用庫。個(gè)人比較推薦的做法是：如果是相對復(fù)雜的應(yīng)用，請適當(dāng)?shù)貙懸恍┳⑨尅＿@個(gè)和正在表達(dá)式一樣，能夠精簡代碼，但是可讀性會降低，對讀代碼的人要求會高些，最好的辦法就是寫注釋。?

我們可以不使用這些技巧，但是我們一定要能看懂，因?yàn)檫@些技巧已經(jīng)廣泛應(yīng)用，尤其是像JQuery等js框里的代碼，不理解這些你就很難看懂別人的代碼。?
像var Yahoo = Yahoo || {};這種是非常廣泛應(yīng)用的。?
ok,最后讓我們來看一段jQuery中的代碼吧：?

var wrap = // option or optgroup !tags.indexOf("<opt") && [ 1, "<select multiple='multiple'>", "</select>" ] || !tags.indexOf("<leg") && [ 1, "<fieldset>", "</fieldset>" ] || tags.match(/^<(thead|tbody|tfoot|colg|cap)/) && [ 1, "<table>", "</table>" ] || !tags.indexOf("<tr") && [ 2, "<table><tbody>", "</tbody></table>" ] || // <thead> matched above (!tags.indexOf("<td") || !tags.indexOf("<th")) && [ 3, "<table><tbody><tr>", "</tr></tbody></table>" ] || !tags.indexOf("<col") && [ 2, "<table><tbody></tbody><colgroup>", "</colgroup></table>" ] || // IE can't serialize <link> and <script> tags normally !jQuery.support.htmlSerialize && [ 1, "div<div>", "</div>" ] || [ 0, "", "" ]; // Go to html and back, then peel off extra wrappers div.innerHTML = wrap[1] + elem + wrap[2]; // Move to the right depth while ( wrap[0]-- ) div = div.lastChild;

這段代碼是作者用來處理 $(html) 時(shí)，有些標(biāo)簽必須要約束的，如<option>必須在<select></select>之內(nèi)的。?
可能你也發(fā)現(xiàn)了作者還有一個(gè)很巧的地方就是 !tags.indexOf("<opt") ，作者很巧很簡單的就實(shí)現(xiàn)了startWith的功能了，沒有一點(diǎn)多余的代碼。jquery源代碼中還有很多如此精妙的代碼，大家可以去學(xué)習(xí)學(xué)習(xí)。

轉(zhuǎn)載于:https://www.cnblogs.com/nana33/p/10272670.html

總結(jié)

以上是生活随笔為你收集整理的js中“||”和“”的高级用法 js，与或运算符 || 妙用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。