本文是 重溫基礎 系列文章的第五篇。
今日感受：家的意義。
系列目錄：
本章節複習的是JS中的表達式和運算符，用好這些可以大大提高開發效率。
一些基礎：JavaScript中運算符有一元、二元和三元（條件）運算符，常見寫法：
// 操作數 + 運算符 + 操作數
1 + 2 ;
// 運算符 + 操作數
x ++;
// 操作數 + 運算符
++ x;
本文將介紹一下幾類運算符：
- 賦值運算符(Assignment operators)
- 比較運算符(Comparison operators)
- 算數運算符(Arithmetic operators)
- 位運算符(Bitwise operators)
- 邏輯運算符(Logical operators)
- 字符串運算符(String operators)
- 條件（三元）運算符(Conditional operator)
- 逗號運算符(Comma operator)
- 一元運算符(Unary operators)
- 關係運算符(Relational operator)
1.賦值運算符
最簡單的賦值運算符是 = ，它將右邊操作數的值賦值給左邊的操作數，如 a = b。
另外常見的複合賦值運算符有如下：
| 名稱 | 簡寫的操作符 | 含義 |
|---|---|---|
| 賦值 | x = y |
x = y |
| 加法賦值 | x += y |
x = x + y |
| 減法賦值 | x -= y |
x = x - y |
| 乘法賦值 | x *= y |
x = x * y |
| 除法賦值 | x /= y |
x = x / y |
| 求餘賦值 | x %= y |
x = x % y |
| 求冪賦值 | x **= y |
x = x ** y |
| 左移位賦值 | x <<= y |
x = x << y |
| 右移位賦值 | x >>= y |
x = x >> y |
| 無符號右移位賦值 | x >>>= y |
x = x >>> y |
| 按位與賦值 | x &= y |
x = x & y |
| 按位異或賦值 | x ^= y |
x = x ^ y |
| 按位或賦值 | x |= y |
x = x | y |
另外在ES6中，新增一類解構賦值：
let a = ['aa', 'bb', 'cc'];
// 不使用解構賦值
let a1 = a[0];
let a2 = a[1];
// 使用解構賦值
let [a1, a2] = a;
2.比較運算符
通過比較兩個比較對象來返回一個是否爲真的布爾值，當兩個比較的對象不是相同類型，JavaScript會嘗試將兩個比較對象轉換成相同類型進行比較:
let a = 10;
let b = '12';
a > b; // false
常用的比較運算符有：
| 名稱 | 描述 | 返回true的示例 |
|---|---|---|
等於 == |
操作符兩邊數據相等 | 3 == '3' |
不等於 !== |
操作符兩邊數據不相等 | 3 != '4' |
全等 === |
操作符兩邊數據相等且類型相同 | 3 === 3 |
不全等 !== |
操作符兩邊數據不相等或類型不相同 | 3 !== '3' |
大於 > |
判斷操作符左邊大於右邊 | 3 > 2 |
大於等於 >= |
判斷操作符左邊大於或等於右邊 | 3 >= 2 |
小於 < |
判斷操作符左邊小於右邊 | 3 < 4 |
小於等於 <= |
判斷操作符左邊小於或等於右邊 | 3 <= 4 |
注意：
=>不是運算符，而是ES6中新增的箭頭函數的標記符號。
3.算數運算符
除了標準的加減乘除這些基本運算符，JavaScript還提供一些新的算數運算符：
| 名稱 | 描述 | 示例 |
|---|---|---|
求餘 % |
返回相除之後的餘數 | 11 % 5 返回 1 |
自增 ++ |
++N返回加一以後的值，N++返回原數值然後加一 |
++3返回4，3++返回3 |
自減 -- |
--N返回減一以後的值，N--返回原數值然後減一 |
--3返回2，3--返回3 |
一元負值符 - |
返回操作數的負數，若不是Number則試圖轉換爲Number再取負值 |
-'-2' 返回2；-2返回2 |
一元正值符 + |
若操作數不是Number類型則試圖轉換爲Number |
+'-2' 返回-2；+'2'返回2 |
指數運算符 ** |
計算底數a的指數n次方 |
2 ** 3 返回 8 |
4.位運算符
位運算符是在數字底層（即表示數字的 32 個數位）進行操作的。
複習數字32位數的表示
| 名稱 | 描述 | 示例 |
|---|---|---|
按位與 AND & |
在a和b的位表示中，每一個對應的位都爲1則返回1，否則0 |
a & b |
按位或 OR | |
在a和b的位表示中，每一個對應的位，只要有一個爲1則返回1，否則0 |
a | b |
按位異或 XOR ^ |
在a和b的位表示中，每一個對應的位，兩個不相同則返回1，否則0 |
a ^ b |
按位非 NOT ~ |
反轉被操作數的位 | ~a |
左移 shift << |
將a的二進制串向左移動b位,右邊移入0 |
a << b |
算術右移 >> |
譯註:算術右移左邊空出的位是根據最高位是0和1來進行填充的 | a >> b |
無符號右移(左邊空出位用0填充) >>> |
把a的二進制表示向右移動b位，丟棄被移出的所有位，並把左邊空出的位都填充爲0 |
a >>> b |
示例解釋：
1的二進制表示爲 0 0 0 0 0 0 1
3的二進制表示爲 0 0 0 0 0 1 1
- 1.按位與
&
1 & 3 ; // 1
1 | 3 ; // 3
1 ^ 3 ; // 2
~1 ; // -2
1>>1 ; // 0
使用案例
- 1.16進制顏色值轉RGB：
function hexToRGB(hex){
let h = hex.replace('#','0x'),
r = h >> 16,
g = h >> 8 & 0xff,
b = h & 0xff;
return `rgb(${r},${g},${b})`
}
hexToRGB('#eeddff'); // "rgb(238,221,255)"
- 2.RGB轉16進制：
function RGBToHex(rgb){
let r = rgb.split(/[^\d]+/),
c = r[1]<<16 | r[2]<<8 | r[3];
return `#${c.toString(16)}`;
}
RGBToHex('rgb(238,221,255)'); // "#eeddff"
5.邏輯運算符
常用來處理布爾值，但是當處理非布爾值的時候，往往返回非布爾值：
| 運算符 | 描述 | 示例 |
|---|---|---|
邏輯與 && |
若a和b都能轉爲true則返回true |
1+1==2 && 1-1==0 返回 true |
邏輯或 || |
若a和b其中一個能轉爲true則返回true，若都是false則返回false |
1+1==3 || 1-1==0 返回 true |
邏輯非 ! |
若a能轉爲true則返回false |
!1+1==2 返回 false |
注意： 能被轉成false的值有null，0，NaN，空字符串""和undefined。
幾個示例：
let a1 = true && true; // true
let a2 = true && false; // false
let a3 = false && true; // false
let a4 = false && false; // false
let a5 = false && "leo"; // false
let a6 = true && "leo"; // "leo"
let a7 = "leo" && "robin";// "robin"
let b1 = true || true; // true
let b2 = true || false; // true
let b3 = false || true; // true
let b4 = false || false; // false
let b5 = false || "leo"; // "leo"
let b6 = true || "leo"; // true
let b7 = "leo" || "robin";// "leo"
let c1 = !true; // false
let c2 = !false; // true
let c3 = !"leo"; // false
常常還使用短路求值：
false && anything ; // 被短路求值爲false
true || anything ; // 被短路求值爲true
6.字符串運算符
在拼接字符串中，由 + 來連接兩個字符串：
let a = 'leo ' + 'cute~'; // 'leo cute~'
let b = 'ha';
a += b; // "leo cute~ha"
7.條件（三元）運算符
可以使用三個操作數的運算符，運算結果爲根據給定條件在兩個值中取一個：
// 當條件爲真 則取 值1 ，否則取 值2
// 條件 ? 值1 : 值2
let a = 10;
let b = a > 5 ? 'yes' : 'no'; // 'yes'
8.逗號運算符
對兩個操作數求值並且返回最終操作數的值，通常用於for循環中，在每次循環時對多個變量進行更新：
let a1 = [1,2,3,9,6,6];
for(let i = 0,j = 5; i<=j; i++, j--){
console.log(`i:${i},j:${j},i值:${a1[i]},j值:${a1[j]}`)
}
// i:0,j:5,i值:1,j值:6
// i:1,j:4,i值:2,j值:6
// i:2,j:3,i值:3,j值:9
9.一元運算符
一元操作符僅對應一個操作數。
delete
刪除一個對象或一個對象的屬性或者一個數組中某一個鍵值，返回一個布爾值，刪除成功返回true，否則返回false:
let a = {name : 'leo',age : '15'};
delete a.name; // true
a; // {age: "15"}
let b = [1,3,5];
delete b[0]; // true
b; // [empty, 3, 5]
b[0]; // undefined
typeof
返回一個參數的類型的字符串值，參數可以輸字符串，變量，關鍵詞或者對象:
typeof new Function(); // "function"
typeof "leo" ; // "string"
typeof 11 ; // "number"
typeof undefined ; // "undefined"
typeof true ; // "boolean"
typeof null ; // "object"
參數也可以是表達式，typeof會根據其返回結果返回所包含的類型：
typeof (1+1) ; // "number"
typeof (1+1==2 ? 'yes' : 'no') ; // "string"
void
表示一個運算沒有返回值，常常用在創建一個超鏈接文本，但是點擊的時候沒有任何效果：
<a href="javascript:void(0)">點擊</a>
<a href="javascript:void(document.form.submit())">點擊</a>
10.關係運算符
比較兩個操作數：
in
判斷指定屬性是否在指定對象中，若是則返回true：
// 對象
let a = {name:'leo',age:'15'};
'name' in a; // true
// 數組
let b = ['leo', 'pingan', 'robin'];
0 in b; // true
'length' in b;// true
instanceof
判斷一個對象是否是指定類型，若是則返回true：
let d = new Date();
d instanceof Date; // true
11.運算符優先級
當我們需要調整表達式計算順序，就需要用到運算符的優先級，通過括號來實現排序，常見優先級從高到低：
| 運算符 | 描述 |
|---|---|
. [] () |
字段訪問、數組下標、函數調用以及表達式分組 |
++ -- - ~ ! delete new typeof void |
一元運算符、返回數據類型、對象創建、未定義值 |
* / % |
乘法、除法、取模 |
+ - + |
加法、減法、字符串連接 |
<< >> >>> |
移位 |
< <= > >= instanceof |
小於、小於等於、大於、大於等於、instanceof |
== != === !== |
等於、不等於、嚴格相等、非嚴格相等 |
& |
按位與 |
^ |
按位異或 |
| |
按位或 |
&& |
邏輯與 |
|| |
邏輯或 |
?: |
條件 |
= oP= |
賦值、運算賦值 |
, |
多重求值 |
參考資料
本部分內容到這結束
| Author | 王平安 |
|---|---|
| [email protected] | |
| 博 客 | www.pingan8787.com |
| 微 信 | pingan8787 |
| 每日文章推薦 | https://github.com/pingan8787/Leo_Reading/issues |
| ES小冊 | es.pingan8787.com |