首先來看看我們在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做邏輯運算，只要有一個不是布林值，運算結果就不一定是布林值。
- 邏輯與運算，以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
複製程式碼- 邏輯或運算，以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) // 結果為 []
複製程式碼遞增++和遞減--
- 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); // ？
複製程式碼- 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；
複製程式碼