js中三目運算符和&& || 符的個人淺見

這兩天看到別人寫的代碼，感覺很牛逼，如下，大神請忽視

$(".lgn").on("click", function() {
        var a = {};
        a.loginType = $(this).data("logintype");
        a.loginType == wx_utils.LOGIN_TYPE.WX ? (a.username = $("#username").val(), a.password = $("#password").val()) : a.loginType == wx_utils.LOGIN_TYPE.ECARD && (a.username = f || $("#username_").val(), a.password = $("#password_").val(), a.customerCode = d || $("#customerCode").val(), a.outid = $("#outid").val());
        a.scopes = [];
        $("input[name='scope_box']:checked").each(function(b, c) {
            a.scopes.push(c.value)
        });
        wx_utils.login(a, !1, function(a) {
            a && 202102 == a.errorCode ? ($(".modal-overlay").addClass("modal-overlay-visible"), $("#bind_ecard_div").show()) : wx_utils.toast(a)
        })
    });

大概就是這樣，主要用邏輯符合三目運算符來寫判斷

首先說三目運算符，

語法

conditions ? statementA : statementB ;

上述語句，首先判斷條件condition，若結果為真則執行語句statementA，否則執行語句statementB。
值得注意的是，由於 JavaScript 腳本解釋器將分號“ ; ”作為語句的結束符，statementA 和 statementB 語句均必須為單個語句，使用多個語句會報錯。

一般我們用的時候是這樣的，如果statementA或statementB里面有分號或者逗號，都會報錯

var c = 1;
c==1 ? console.log(c),console.log('1') : console.log('c不等於1');

結果為Uncaught SyntaxError: Unexpected token ,報錯了。

那么如何輸出更多語句或者執行一條以上的操作呢？

把statementA用小括號包起來即可，里面可以以逗號為分割符，執行多個語句

var a = 5;
function abc() {
    console.log('我是方法abc')
}
function err() {
    console.log('我是方法err')
}

a==2 ? (abc()):err();
a==5 ? (abc(),abc()):err();

結果如下

我是方法err

我是方法abc

我是方法abc

statementA 或 statementB 里面可以也可以放函數哦。

要注意的是，三目運算符和if else到底有什么區別呢？

對於n++；

var  n = 0;
if(n >= 10){
n =0;
}else{
n ++;
}
console.log(n);
n = 1;

var m = 0;
m = m >= 10 ? m=0 : m++;
console.log(m);
m = 0;

對於++n;

var  n = 0;
if(n >= 10){
n =0;
}else{
++n;
}
console.log(n);
n = 1;

var m = 0;
m = m >= 10 ? m=0 : ++m;
console.log(m);
m = 1;

n++和++n在此驗證中，沒有任何區別，因為if else都是計算結果之后的，不會返回n，沒有任何返回值
 
但是對於三目運算，n++返回的n值為n本身，++n返回的n值為n+1之后的結果

再說邏輯運算符

 

a() && b() :如果執行a()后返回true，則執行b()並返回b的值；如果執行a()后返回false，則整個表達式返回a()的值，b()不執行；
a() || b() :如果執行a()后返回true，則整個表達式返回a()的值，b()不執行；如果執行a()后返回false，則執行b()並返回b()的值；
&& 優先級高於 ||

1、只要“||”前面為false,不管“||”后面是true還是false，都返回“||”后面的值。

2、只要“||”前面為true,不管“||”后面是true還是false，都返回“||”前面的值。

3、只要“&&”前面是false，無論“&&”后面是true還是false，結果都將返“&&”前面的值;

4、只要“&&”前面是true，無論“&&”后面是true還是false，結果都將返“&&”后面的值;

所以，我們可以用&&來代替if else進行判斷，比如我們判斷某些對象是否存在或者某些變量是否等於某個值時，就可以寫做 a && a=5; a.length > 0 && $('.login').show()此類。

舉個例子

如圖： 
假設對成長速度顯示規定如下： 
　　成長速度為5顯示1個箭頭； 
　　成長速度為10顯示2個箭頭； 
　　成長速度為12顯示3個箭頭； 
　　成長速度為15顯示4個箭頭； 
　　其他都顯示都顯示0個箭頭。 

各種方法一覽

//if else 實現
var add_level = 0; 
if(add_step == 5){ 
  add_level = 1; 
}else if(add_step == 10){ 
  add_level = 2; 
}else if(add_step == 12){ 
  add_level = 3; 
}else if(add_step == 15){ 
  add_level = 4; 
}else { 
  add_level = 0; 
}

//也可以用switch實現
var add_level = 0; 
switch(add_step){ 
  case 5 : 
    add_level = 1; 
    break; 
  case 10 : 
    add_level = 2; 
      break; 
  case 12 : 
     add_level = 3; 
    break; 
  case 15 :
    add_level = 4; 
    break; 
  default : 
    add_level = 0; 
    break;
}

如果需求改成： 
成長速度為>12顯示4個箭頭； 
成長速度為>10顯示3個箭頭； 
成長速度為>5顯示2個箭頭； 
成長速度為>0顯示1個箭頭； 
成長速度為<=0顯示0個箭頭。 

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

那么你有沒有想過用一行就代碼實現呢？ 

用邏輯運算符實現這2道題

第一題

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

//更優雅的方式
var add_level={'5':1,'10':2,'12':3,'15':4}[add_step] || 0; 
//此方法還看不太懂，希望前輩看到給我分析下。

第二題

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類型。 

typeof 5
"number"
typeof !!5
"boolean"

下面主要討論下邏輯運算符&&和||。 
幾乎所有語言中||和&&都遵循“短路”原理，如&&中第一個表達式為假就不會去處理第二個表達式，而||正好相反。 
js也遵循上述原則。但是比較有意思的是它們返回的值。 

下面是在AngularJS中根據角色加載子模板的例子

<div ng-include="user.admin&&'edit.admin.html'||'edit.user.html'">
</div>

如果user.admin為true，則會去跑第二個表達式edit.admin.html,並且返回值為第二個表達式，edit.admin.html

如果user.admin為false，則user.admin&&'edit.admin.html'表達式為false，回去跑||后面的第三個表達式，第三個表達式為true，結果為第三個表達式的值。

再看簡單點的

var attr = true && 4 && “aaa”;
結果是attr = aaa

再來看看||： 

var attr = attr || “”;

這個運算經常用來判斷一個變量是否已定義，如果沒有定義就給他一個初始值，這在給函數的參數定義一個默認值的時候比較有用。再次提醒你記住上面的原則：如果實參需要是0、""、null、false、undefined、NaN的時候也會當false來處理。 

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

這樣只需一行代碼就搞定。但是需要注意的一點：js中||和&&的特性幫我們精簡了代碼的同時，也帶來了代碼可讀性的降低。這就需要我們自己來權衡了。 
一方面精簡js代碼，能實質性的減少網絡流量，尤其是大量應用的js公用庫。個人比較推薦的做法是：如果是相對復雜的應用，請適當地寫一些注釋。這個和正在表達式一樣，能夠精簡代碼，但是可讀性會降低，對讀代碼的人要求會高些，最好的辦法就是寫注釋。 

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

像

var Yahoo = Yahoo || {};

這種是非常廣泛應用的。 
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) 時，有些標簽必須要約束的，如<option>必須在<select></select>之內的。 
可能你也發現了作者還有一個很巧的地方就是 !tags.indexOf("<opt") ，作者很巧很簡單的就實現了startWith的功能了，沒有一點多余的代碼。jquery源代碼中還有很多如此精妙的代碼，大家可以去學習學習。

后半部內容轉載自http://www.cnblogs.com/ppforever/p/4375996.html