摘要：如果都為真則返回最后一個結(jié)果遇到運(yùn)算符，先去計(jì)算左邊的結(jié)果并轉(zhuǎn)成布爾值，左邊為字符串，它轉(zhuǎn)為布爾值的結(jié)果為，所以會返回運(yùn)算符右側(cè)的結(jié)果。

運(yùn)算符對于大家來說并不陌生，只要平時(shí)寫代碼就會頻繁用的到?？赡芷綍r(shí)大家只關(guān)注它們的使用層還停留在只知其用法的表面，但是運(yùn)算符有一些鮮為人知技能，明白以后會讓你掌握運(yùn)算符的原理和運(yùn)算符的奇技淫巧以及解決一些面試題

先來看一些面試題，請小伙伴本著不去試的原則寫出下而四道題的運(yùn)行結(jié)果

//1
console.log("kaivon" && (2+1));
console.log(![] || "你好，siri");

//2
{
    let a=10,b=20;
    const fn=()=>(a++,b++,10);
    console.log(a,b,fn());
    
    let c=fn();    
    console.log(a,b,c);
}

//3
for(var i=0,j=0,k;i<6,j<10;i++,j++){
    k=i+j;
}
console.log(k);

//4
{
    let a=1;
    let b=a++;
    console.log(a,b);
    
    let c=1;
    let d=++c;
    console.log(c,d);
}

對于面試題，我一開始是拒絕的，內(nèi)心是崩潰的。總是會想這些題沒有意義啊，真正在開發(fā)的時(shí)候誰會去做題呀，更不會遇到這么無聊的東西，為什么會用這種東西來面試？難道說面試官是過來裝逼的么？看到我們回答不上來，一臉不屑地鄙視我們么？反過來想想，面試官跟我們無冤無仇，前端何苦為難前端？然而這些東西其實(shí)是有意義的，從你對這些題的回答可以看出你的基礎(chǔ)知識全面性，并且能判斷出你的技術(shù)能力。

以上面試題包含三種運(yùn)算符，邏輯運(yùn)算符、逗號運(yùn)算符、遞增遞減運(yùn)算符，我就分別來介紹這三種運(yùn)算符

并且的意思，至少需要兩個數(shù)據(jù)（也可以為表達(dá)式）符號左右各一個。并且會把兩邊的結(jié)果轉(zhuǎn)成布爾值
如果左側(cè)的值為真，返回右側(cè)的值。如果左側(cè)的值為假，返回左側(cè)的值（不會計(jì)算右邊的結(jié)果）
只有當(dāng)左右兩邊的結(jié)果都為真的時(shí)候，整個結(jié)果才為真（用于判斷）
且運(yùn)算符可以出現(xiàn)多個，會依次按從左到右的順序，遇到假的結(jié)果便返回。如果都為真則返回最后一個結(jié)果

console.log("kaivon" && (2+1)); //3

遇到&&運(yùn)算符，先去計(jì)算左邊的結(jié)果并轉(zhuǎn)成布爾值，左邊為字符串kaivon，它轉(zhuǎn)為布爾值的結(jié)果為true，所以會返回&&運(yùn)算符右側(cè)的結(jié)果。右側(cè)為一個表達(dá)式，計(jì)算后的結(jié)果為3，所以整個結(jié)果為3

console.log(![] && "你好，siri");    //false

左側(cè)的表達(dá)式是把一個空數(shù)組轉(zhuǎn)成布爾值（對象轉(zhuǎn)基本數(shù)據(jù)類型的算法私信我要視頻）并取反的結(jié)果。空數(shù)組轉(zhuǎn)成布爾值結(jié)果為true，取反后結(jié)果為false。當(dāng)左側(cè)的結(jié)果為false時(shí)會直接返回，并不會去理會右側(cè)的內(nèi)容，所以直接返回左側(cè)的結(jié)果false

let n=1;
n-1 && (n+=5);
console.log(n);        //1    左側(cè)為假，所以不會執(zhí)行右側(cè)的結(jié)果，n不會加5

const fn=()=>console.log("函數(shù)被調(diào)用了");
n==1 && fn();

第一個console.log的結(jié)果為1，說明n+=5這個表達(dá)式并沒有執(zhí)行。因?yàn)?b>&&運(yùn)算符左邊的表達(dá)式運(yùn)算結(jié)果為0轉(zhuǎn)成布爾值為false，所以直接返回左邊的結(jié)果，不會去管右邊的表達(dá)式，所以n的值并不會變。
第二個console.log會打印出內(nèi)容，說明&&運(yùn)算符的右側(cè)表達(dá)式被執(zhí)行了，因?yàn)閚的值并沒有改變還是1，所以左邊的表達(dá)式運(yùn)行結(jié)果為true，根據(jù)規(guī)則會返回右側(cè)的結(jié)果，所以執(zhí)行調(diào)用函數(shù)fn

console.log(true && "kaivon" && (2-2) && 4 && "陳學(xué)輝" && true);    //0    返回2-2的結(jié)果
console.log(true && "kaivon" && [] && 4 && "陳學(xué)輝");   //陳學(xué)輝

根據(jù)上面最后一條規(guī)則可以很輕易得出上面的運(yùn)算結(jié)果。運(yùn)算會按從左到右的順序執(zhí)行，一旦遇到表達(dá)式的結(jié)果為false的話就會停止執(zhí)行，并且整個表達(dá)式會返回這個運(yùn)算結(jié)果。如果所有表達(dá)式的結(jié)果都為true，那整個結(jié)果為最后那個表達(dá)式的結(jié)果

或者的意思，至少需要兩個數(shù)據(jù)（也可以為表達(dá)式）符號左右各一個。并且會把兩邊的結(jié)果轉(zhuǎn)成布爾值
如果左側(cè)的值為真，返回左側(cè)的值（不會計(jì)算右邊的結(jié)果）。如果左側(cè)的值為假，返回右側(cè)的值
如果有一邊的結(jié)果為真的話，整個結(jié)果就為真（用于判斷）
或運(yùn)算符可以出現(xiàn)多個，會依次按從左到右的順序，遇到真的結(jié)果便返回。如果都為假則返回最后一個結(jié)果

let n=1;
n-1 || (n+=5);
console.log(n);     //6

||運(yùn)算符左邊表達(dá)運(yùn)算結(jié)果為0轉(zhuǎn)布爾值為false，根據(jù)上面列出的規(guī)則會返回右側(cè)表達(dá)式執(zhí)行的結(jié)果，所以會執(zhí)行n+=5，最終n的結(jié)果為6

console.log(false || "" || (2-2) || 4 || "陳學(xué)輝" || true);    //4
console.log(false || "" || ![] || 0 || undefined);        //undefined

根據(jù)上面的規(guī)則也很容易知道運(yùn)行結(jié)果，||運(yùn)算符的左側(cè) 運(yùn)行結(jié)果為false的話就會執(zhí)行右側(cè)的表達(dá)式，直到遇到計(jì)算結(jié)果為true的表達(dá)式才會停下來，并返回這個值。如果所有表達(dá)式都沒有返回true，則取最后表達(dá)式的結(jié)果

或運(yùn)算符的用途：

function fn(text){
    text=text || "kaivon";  //用戶給了參數(shù)，取用戶給的值；用戶沒有給參數(shù)，取默認(rèn)值
    console.log(text);
}
fn();            //kaivon    用戶沒有傳參數(shù)，就會用默認(rèn)的"kaivon"
fn("陳學(xué)輝");    //陳學(xué)輝    用戶有傳參數(shù)，就會用傳的參數(shù)

上面代碼的這種形式是ES5寫面向?qū)ο蟮闹饕问?，用于對參?shù)進(jìn)行處理。如果用戶傳了參數(shù)，那會取用戶所傳的參數(shù)；如果用戶沒有傳參，那取默認(rèn)的參數(shù)。保證函數(shù)始終有參數(shù)，不會報(bào)錯

將多個表達(dá)式放在一條語句里，按從左到右的順序執(zhí)行每個表達(dá)式，返回最后那個表達(dá)式的結(jié)果（在一條語句里執(zhí)行多個運(yùn)算）
優(yōu)先級最低，最后才會運(yùn)算逗號
逗號運(yùn)算符的兩邊不能是語句（賦值語句）

console.log(1,2,3);        //1 2 3    
console.log((1,2,3));    //3        

console.log是個函數(shù)，它里面的逗號表示參數(shù)分隔的意思，并不是逗號操作符。要變成操作符的話，就加個括號，加個括號后就變成了表達(dá)式，而表達(dá)式必需要求出一個值，所以里面的逗號就變成了操作符

let a=10,b=(a++,20,30);
console.log(a,b);    //11 30

第一行代碼中的第一個逗號的作用是：可以在一行中聲明多個變量，減少let關(guān)鍵字。從第二個開始被放到了括號里，而加了括號后就是個表達(dá)式。還是那句話，表達(dá)式一定會產(chǎn)生一個值，這個時(shí)候逗號就是個運(yùn)算符了，會把最后一個賦給變量，也就是30。

下面來詳細(xì)分析一道面試題，再深度的理解一下逗號運(yùn)算符

for(var i=0,j=0,k;i<6,j<10;i++,j++){
    k=i+j;
}
console.log(k);    //18

很多小伙伴會說這個k的值不應(yīng)該是14么？i的值走到5不就停了，j的值走到9不也停了，那加起來應(yīng)該是14??！為什么是18，這不科學(xué)啊?。?！

要明白這個原因需要結(jié)合for循環(huán)的三條語句以及逗號運(yùn)算符的作用去才能理解
說明：

for循環(huán)的第一個語句var i=0,j=0,k是初始化一些變量，這里的逗號與上個代碼塊第一條語句的逗號一樣，作用為在一行里聲明多個變量
for循環(huán)的第二個語句i<6,j<10作用為取一個循環(huán)范圍，這里要注意循環(huán)范圍只能有一個條件，不能說既小于5又小于8，所以這里的逗號就是真正的逗號運(yùn)算符，它只能取一個值，取的就是最后那個j<10

for循環(huán)的第三個語句i++,j++，這條語句的逗號還是個運(yùn)算符，表示在一行里執(zhí)行多條語句，但是這個語句不需要有返回值，只用把語句執(zhí)行了就行
綜上所述，這個for循環(huán)表示：聲明三個變量，條件范圍為j<10，同時(shí)i與j每走一次都要加一次。當(dāng)j的值為9的時(shí)候就不再加了，此時(shí)i的值也一樣會加到9它已經(jīng)沒有范圍限制了會無限的加，但是j有范圍并不會無限加。所以i的值是跟著j在走，得出結(jié)果i+j=18

逗號運(yùn)算符的另一個作用：交換兩個變量的值
聲明兩個變量，要求通過某種方式讓兩個變量的值進(jìn)行交換，你會用什么方法？

let a=10;
let b=20;
//問：如何讓a與b的值進(jìn)行交換

有一種笨方法是利用一個中間變量可以完成，代碼如下：

let a=10;
let b=20;
let c;

c=a;
a=b;
b=c;

console.log(a,b);   //20 10

利用逗號運(yùn)算符，代碼如下：

let a=10;
let b=20;

a=[b][b=a,0];
console.log(a,b);    //20 10

可以看到利用逗號運(yùn)算符倒是很容易實(shí)現(xiàn)需求，但是代碼閱讀起來好像很費(fèi)勁，分析如下：

a=[b][b=a,0];   //這條代碼的兩個中括號表示，前面為數(shù)組，后面為下標(biāo)。在數(shù)組中取某一個數(shù)據(jù)并賦值給a

a=[20][b=10,0]  //分別把a(bǔ)與b的值套進(jìn)去，注意第二個中括號里的b=a，這么寫是把a(bǔ)的值賦給b，所以只能套a的值

/*
 * 重點(diǎn)看第二個中括號里的代碼，此時(shí)這個中括號的作用為下標(biāo)，所以里面必需產(chǎn)生一個值，那里面的逗號就是運(yùn)算符了
 * 根據(jù)逗號運(yùn)算符的作用，先執(zhí)行兩個表達(dá)式，把b的值改成10，再返回最后表達(dá)式的值0
 * 所以這個中括號牛比的地方有兩個，第一個是把b的值改成了10，第二個是整體返回0。也就變成了下面
*/

a=[20][0]   //這不表示把第0個數(shù)據(jù)的值（20）賦給a

所以，逗號運(yùn)算符用巧了就是巧他媽給巧開門，巧到家了~

它倆可以放在操作數(shù)的前面，也可以放在操作數(shù)的后面
不管它倆放在哪個位置，都是一個表達(dá)式，表達(dá)式的話肯定返回一個值
它倆具有隱式類型轉(zhuǎn)數(shù)字的作用

首先驗(yàn)證表達(dá)有值，不管放前面還是放后面都會有值

let a=3;
console.log(a++);    //3
console.log(++a);    //5

表達(dá)式結(jié)果為數(shù)據(jù)直接轉(zhuǎn)數(shù)字后的值
數(shù)據(jù)結(jié)果為加1或者減1的值

let a=["20"];
console.log(a++);    //20    表達(dá)式結(jié)果為a轉(zhuǎn)數(shù)字后的值
console.log(a);        //21    數(shù)據(jù)本身變成了+1后的值

let b="20";
console.log(b--);    //20    表達(dá)式結(jié)果為b轉(zhuǎn)數(shù)字后的值
console.log(b);        //19    數(shù)據(jù)本身變成了-1后的值

表達(dá)式與數(shù)據(jù)的結(jié)果一樣，都為數(shù)據(jù)加1或者減1的值

let a=["20"];
console.log(++a);    //21    表達(dá)式結(jié)果為a轉(zhuǎn)數(shù)字后并加1的值
console.log(a);        //21    數(shù)據(jù)本身也為a轉(zhuǎn)數(shù)字后并加1的值

let b="20";
console.log(--b);    //19    表達(dá)式結(jié)果為a轉(zhuǎn)數(shù)字后并減1的值
console.log(b);        //19    數(shù)據(jù)本身也為a轉(zhuǎn)數(shù)字后并減1的值

兩種寫法的區(qū)別在于表達(dá)式的結(jié)果不同。數(shù)據(jù)的結(jié)果寫前面與寫后面都一樣
如果要用表達(dá)式的結(jié)果，看誰在前面


數(shù)據(jù)在前面，結(jié)果為數(shù)據(jù)的值
符號在前面，結(jié)果為數(shù)據(jù)+1或者數(shù)據(jù)-1的值

{
    let a=1;
    let b=a++;
    console.log(a,b);    //2 1
}

{
    let a=1;
    let b=++a;
    console.log(a,b);    //2 2
}

通過對比，a的值不管是在前面++還是在后面++，結(jié)果都為2（a+1的值）。但b的值（表達(dá)式的值）可以看誰在前面，a在前面那就取a的值，++在前面那就取a+1的值

善于總結(jié)！善于總結(jié)！善于總結(jié)！重要的提醒打三遍！