【重溫基礎】5.表達式和運算符

本文是 重溫基礎 系列文章的第五篇。 今日感覺：家的意義。

系列目錄：

• 【複習資料】ES6/ES7/ES8/ES9資料整理(我的整理)
• 【重溫基礎】1.語法和數據類型
• 【重溫基礎】2.流程控制和錯誤處理
• 【重溫基礎】3.循環和迭代
• 【重溫基礎】4.函數

本章節複習的是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=	賦值、運算賦值
,	多重求值

參考資料

1.MDN 表達式和運算符

---

本部份內容到這結束

Author	王平安
E-mail	pingan8787@qq.com
博 客	www.pingan8787.com
微 信	pingan8787
每日文章推薦	github.com/pingan8787/…
JS小冊	js.pingan8787.com

歡迎關注個人微信公衆號【前端自習課】