【重溫基礎】5.表示式和運算子

摘要： 本文是重溫基礎 系列文章的第五篇。 今日感受：家的意義。 系列目錄： 【複習資料】ES6/ES7/ES8/ES9資料整理(個人整理) 【重溫基礎】1.語法和資料型別 【重溫基礎】2.流...

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

系列目錄：

• ofollow,noindex">【複習資料】ES6/ES7/ES8/ES9資料整理(個人整理)
• 【重溫基礎】1.語法和資料型別
• 【重溫基礎】2.流程控制和錯誤處理
• 【重溫基礎】3.迴圈和迭代
• 【重溫基礎】4.函式

本章節複習的是JS中的表示式和運算子，用好這些可以大大提高開發效率。

一些基礎：JavaScript/">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.位運算子

名稱	描述	示例
按位與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.按位與&

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=	賦值、運算賦值
,	多重求值