你不知道的JavaScript運算符

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

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

//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);
}

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

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

邏輯運算符

且運算符：&&

• 并且的意思，至少需要兩個數據（也可以為表達式）符號左右各一個。并且會把兩邊的結果轉成布爾值
• 如果左側的值為真，返回右側的值。如果左側的值為假，返回左側的值（不會計算右邊的結果）
• 只有當左右兩邊的結果都為真的時候，整個結果才為真（用于判斷）
• 且運算符可以出現多個，會依次按從左到右的順序，遇到假的結果便返回。如果都為真則返回最后一個結果

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

遇到&&運算符，先去計算左邊的結果并轉成布爾值，左邊為字符串kaivon，它轉為布爾值的結果為true，所以會返回&&運算符右側的結果。右側為一個表達式，計算后的結果為3，所以整個結果為3

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

左側的表達式是把一個空數組轉成布爾值（對象轉基本數據類型的算法私信我要視頻）并取反的結果。空數組轉成布爾值結果為true，取反后結果為false。當左側的結果為false時會直接返回，并不會去理會右側的內容，所以直接返回左側的結果false

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

const fn=()=>console.log('函數被調用了');
n==1 && fn();

第一個console.log的結果為1，說明n+=5這個表達式并沒有執行。因為&&運算符左邊的表達式運算結果為0轉成布爾值為false，所以直接返回左邊的結果，不會去管右邊的表達式，所以n的值并不會變。
第二個console.log會打印出內容，說明&&運算符的右側表達式被執行了，因為n的值并沒有改變還是1，所以左邊的表達式運行結果為true，根據規則會返回右側的結果，所以執行調用函數fn

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

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

或運算符：||

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

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

||運算符左邊表達運算結果為0轉布爾值為false，根據上面列出的規則會返回右側表達式執行的結果，所以會執行n+=5，最終n的結果為6

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

根據上面的規則也很容易知道運行結果，||運算符的左側 運行結果為false的話就會執行右側的表達式，直到遇到計算結果為true的表達式才會停下來，并返回這個值。如果所有表達式都沒有返回true，則取最后表達式的結果

或運算符的用途：

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

上面代碼的這種形式是ES5寫面向對象的主要形式，用于對參數進行處理。如果用戶傳了參數，那會取用戶所傳的參數；如果用戶沒有傳參，那取默認的參數。保證函數始終有參數，不會報錯

逗號運算符

• 將多個表達式放在一條語句里，按從左到右的順序執行每個表達式，返回最后那個表達式的結果（在一條語句里執行多個運算）
• 優先級最低，最后才會運算逗號
• 逗號運算符的兩邊不能是語句（賦值語句）

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

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

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

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

下面來詳細分析一道面試題，再深度的理解一下逗號運算符

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

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

要明白這個原因需要結合for循環的三條語句以及逗號運算符的作用去才能理解
說明：

1. for循環的第一個語句var i=0,j=0,k是初始化一些變量，這里的逗號與上個代碼塊第一條語句的逗號一樣，作用為在一行里聲明多個變量
2. for循環的第二個語句i<6,j<10作用為取一個循環范圍，這里要注意循環范圍只能有一個條件，不能說既小于5又小于8，所以這里的逗號就是真正的逗號運算符，它只能取一個值，取的就是最后那個j<10
3. for循環的第三個語句i++,j++，這條語句的逗號還是個運算符，表示在一行里執行多條語句，但是這個語句不需要有返回值，只用把語句執行了就行
4. 綜上所述，這個for循環表示：聲明三個變量，條件范圍為j<10，同時i與j每走一次都要加一次。當j的值為9的時候就不再加了，此時i的值也一樣會加到9它已經沒有范圍限制了會無限的加，但是j有范圍并不會無限加。所以i的值是跟著j在走，得出結果i+j=18

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

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

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

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

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

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

利用逗號運算符，代碼如下：

let a=10;
let b=20;

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

可以看到利用逗號運算符倒是很容易實現需求，但是代碼閱讀起來好像很費勁，分析如下：

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

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

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

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

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

遞增遞減運算符

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

首先驗證表達有值，不管放前面還是放后面都會有值

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

后自增、后自減

• 表達式結果為數據直接轉數字后的值
• 數據結果為加1或者減1的值

let a=['20'];
console.log(a++);   //20    表達式結果為a轉數字后的值
console.log(a);     //21    數據本身變成了+1后的值

let b='20';
console.log(b--);   //20    表達式結果為b轉數字后的值
console.log(b);     //19    數據本身變成了-1后的值

前自增、前自減

• 表達式與數據的結果一樣，都為數據加1或者減1的值

let a=['20'];
console.log(++a);   //21    表達式結果為a轉數字后并加1的值
console.log(a);     //21    數據本身也為a轉數字后并加1的值

let b='20';
console.log(--b);   //19    表達式結果為a轉數字后并減1的值
console.log(b);     //19    數據本身也為a轉數字后并減1的值

兩種寫法對比

• 兩種寫法的區別在于表達式的結果不同。數據的結果寫前面與寫后面都一樣
• 如果要用表達式的結果，看誰在前面
  1. 數據在前面，結果為數據的值
  2. 符號在前面，結果為數據+1或者數據-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的值不管是在前面++還是在后面++，結果都為2（a+1的值）。但b的值（表達式的值）可以看誰在前面，a在前面那就取a的值，++在前面那就取a+1的值

善于總結！善于總結！善于總結！重要的提醒打三遍！