首先來看看我們在js中比較經常用到的運算子有哪些

1 + 2 = 3;// 賦值運算子 =
 
條件 ? 表示式1 : 表示式2 // ?: 三元運算子

!表示式 // !取反

// 物件陣列取值

window.location; // .可用用來物件取值

[1, 2][0] window['location'] // []用來陣列取值，或者物件取值

// 算速運算子 加減乘除 取模 ++ --

1 + 1; // 加

2 - 1; // 減

1 * 1; // 乘

2 / 1; // 除

2 % 1; // 取模

a++ 或 ++a; // ++ 

a-- 或 --a; // -- 

// 比較運算子 小於、小於等於、大於、大於等於 等於、不等於、嚴格相等、嚴格不相等

1 < 2; // 小於

1 <= 1 // 小於等於

2 > 1; // 大於

1 >= 1; // 大於等於

1 == 1 // 等於

1 != 2 // 不等於

1 === 1 嚴格相等

1 !== 2 嚴格不相等

// 邏輯運算子 邏輯與 邏輯或

a && b // 邏輯與

a || b // 邏輯或

// 分組運算子 ()
(1 + 2) / (2 -1) // 分組
複製程式碼

以上就是我們經常用到的運算子，但你真的瞭解這些運算子嗎，如果運算子組合一起，哪個先執行，哪個後執行；下面我們先了解下運算子的優先順序， 排序如下優先順序從高到底排序，具有較高優先順序的運算子先於較低優先順序的運算子執行,相同優先順序的運算子按執行順序執行

運算子	說明	執行順序
()	用於分組優先順序最高
. [] ()	.[]可以用於物件取值, ()函式呼叫;	從左到右
++ --	後置遞增或遞減 列如a ++	從左到右
++ -- !	前置遞增或遞減運算, 列如 --a, !取返 經常用來強制轉換成布林值	從右到左
* / %	乘法 除法 取模	從左到右
+ -	加法 減法 字串相加	從左到右
< <= > >=	小於、小於等於、大於、大於等於	從左到右
== != === !==	等於、不等於、嚴格相等、嚴格不相等	從左到右
&&	邏輯與	從左到右
||	邏輯或	從左到右
?:	三元運算子	從右到左
=	賦值運算子	從右到左

先來看看幾個運算子

邏輯與和邏輯或

邏輯與和邏輯非的運算結果不一定是布林值, 列如a和b做邏輯運算，只要有一個不是布林值，運算結果就不一定是布林值。

1. 邏輯與運算，以a&&b為例;

• 假如a和b都是布林值，有且a和b都為true結果才是true，否則為false

console.log(true && true); // true
console.log(true && false); // false
console.log(false && true); // false
console.log(false && false); // false
複製程式碼

• 如果a為false,直接返回false,如果a為true,則直接返回b的值;
• 如果a不是布林值;則首先通過Boolean(a)轉成布林值,如果Boolean(a)的值為false,則直接返回a的值, 如果Boolean(a)的結果為true,則返回b的值

console.log(undefined && true); // 根據上面的規則 轉換Boolean(undefined)值為false, 則直接返回a的值undefined 所以列印的值為undefined
console.log(NaN && {}); // 同理 結果為NaN
console.log(null && function(){}); // 同理 結果為null 
console.log('' && []); // 同理 結果為''
console.log(0 && ''); // 同理 結果為0
console.log([] && null); // 根據上面的規則 轉換Boolean([])值為true, 則直接返回b的值null 所以列印的值為null
console.log({} && NaN); // 同理 結果為NaN
複製程式碼

2. 邏輯或運算，以a||b為例;

• 假如a和b都是布林值，當至少有一個值為true時，則返回true,否則為false

console.log(true && true); // true
console.log(true && false); // true
console.log(false && true); // true
console.log(false && false); // false
複製程式碼

• 如果a為false,直接返回b的值,如果a為true,則直接返回true;
• 如果a不是布林值;則首先通過Boolean(a)轉成布林值,如果Boolean(a)的值為false,則直接返回b的值, 如果Boolean(a)的結果為true,則直接返回a的值

console.log(false || '') //根據規則 結果為 ''
console.log(true || '') // 結果為 true
console.log(0 || '') // 結果為 ''
console.log(null || 0) // 結果為 0
console.log([] || 0) // 結果為 []
複製程式碼

遞增++和遞減--

1. i++ 與 ++i;

都能讓i的值加1;區別在於返回值,i++的返回值是i, ++i的返回值是i + 1後的值。強調下這裡返回值跟i要區分開理解, i是i, 返回值是返回值,兩者不一樣.

// 列子1
var i = 1;
var a = i++;
console.log(a); // i++ 返回的是i的值 為1
console.log(i); // i遞增了 值為2 
// 列子2
var i = 1;
var a = ++i;
console.log(a); // i++ 返回的是i + 1的值 為 1 + 1 = 2
console.log(i); // i遞增了 值為2 

// 列子3
var a = 10, b = 20, c = 30, d;
a++;
++a;
d = ++a + (++b) + (c++) + a++;
console.log(d); // ？
複製程式碼

2. i-- 和 --i;

同理,都能讓i的值減1;區別在於返回值,i--的返回值是i, --i的返回值是i - 1後的值。

三元運算子

a ? b : c; 當a為真時就執行b否則執行c; 如果操作語句比較簡單，建議用三目運算替代if..else, 讓程式碼更加簡潔.

var a = true, b = false, res;

res =  a ? b ? 2 : 3 : 0; 
console.log(res) // res = 3; 相同優先順序從右至左順序執行， 先執行 b ? 2 : 3 的結果為 3 然後 a ? 3 : 0;

res = a || b ? 2 : 3; 
console.log(res); // res = 2; || 優先順序較高 先執行 a || b 為 true ? 2 : 3; 所以結果為2；
複製程式碼

未完待續