IT課程 JavaScript基礎 040_運算符

JavaScript 運算符用於對數學運算、比較、邏輯運算等操作並返回結果。

算術運算符

+：加法
-：減法
*：乘法
/：除法
%：取餘數
**：求冪

示例：

1
let a = 5;
2
let b = 2;
3

4
console.log(a + b);  // 輸出 7
5
console.log(a - b);  // 輸出 3
6
console.log(a * b);  // 輸出 10
7
console.log(a / b);  // 輸出 2.5
8
console.log(a % b);  // 輸出 1
9
console.log(a**b);  // 輸出 25

賦值運算符

=：賦值
+=：加法賦值
-=：減法賦值
*=：乘法賦值
/=：除法賦值
%=：取餘賦值
**=：求冪賦值
??=：空賦值，當變量值為null或undefined時才會進行賦值

示例：

1
let x = 5;
2
x += 2;  // x = x + 2; 輸出 7
3
x -= 2;  // x = x - 2; 輸出 3
4
x *= 2;  // x = x * 2; 輸出 10
5
x /= 2;  // x = x / 2; 輸出 2.5
6
x %= 2;  // x = x % 2; 輸出 1
7
x **= 2;  // x = x ** 2; 輸出 25
8
x ??= 2;  // 輸出 5，當x為null或undefined時賦值為2
9
console.log(x);

比較運算符

==：相等（值的類型會自動轉換）
===：全等（值和類型都相等）
!=：不相等
!==：不全等
>：大於
<：小於
>=：大於等於
<=：小於等於

遇到非數值時，會先轉換為數值後再比較，當遇到字符串時，會逐位地比較字符的 Unicode 編碼。

示例：

1
let a = 5;
2
let b = '5';
3
let c = 10;
4

5
console.log(a == b);   // 輸出 true，值相等
6
console.log(a === b);  // 輸出 false，類型不相等
7
console.log(a != b);   // 輸出 false，值相等
8
console.log(a !== b);  // 輸出 true，類型不相等
9
console.log(a > c);  // 輸出 false，5 < 10
10
console.log(a < c);  // 輸出 true，5 < 10
11
console.log(a >= c);  // 輸出 false，5 <= 10
12
console.log(a <= c);  // 輸出 true，5 <= 10

邏輯運算符

邏輯運算符在處理操作數時，會將其轉化為布爾值，並返回這個操作數的初始值。

`&&`：邏輯與

用於判斷條件是否同時為 true。如果所有條件都為 true，那麼整個表達式的結果為 true；否則，結果為 false。與運算從左到右依次尋找第一個 false ，如果找到 false 就停止計算，並返回這個操作數的初始值（短路求值）。如果最終沒有 false 則返回最後一個 true。

`||`：邏輯或

用於判斷條件中至少有一個為 true 的情況。如果至少有一個條件為 true，那麼整個表達式的結果為 true；如果所有條件都為 false，結果為 false。或運算從左到右依次尋找第一個 true ，如果找到 true 就停止計算，並返回這個操作數的初始值（短路求值）。如果最終沒有 true 則返回最後一個 false。

`!`：邏輯非

用於對一個布爾值進行取反操作。如果一個值為 true，使用邏輯非運算符將其取反為 false；如果一個值為 false，將其取反為 true。邏輯非還可以用於將非布爾值轉換為布爾值。它會將任何非 null、undefined、0、NaN、""（空字符串）的值轉換為 true，而上述值本身都被轉換為 false。

示例：

1
let a = true;
2
let b = false;
3
let c = "hello";
4
let d = null;
5

6
console.log(a && b);  // 輸出 false
7
console.log(c && d);  // 輸出 null
8
console.log(a || b);  // 輸出 true
9
console.log(c || d);  // 輸出 hello
10
console.log(!a);      // 輸出 false
11
console.log(!d);      // 輸出 true

三元運算符

condition ? expr1 : expr2：如果條件為真，則返回 expr1，否則返回 expr2。

示例：

1
let age = 18;
2
let status = (age >= 18) ? '成年人' : '未成年人';
3
console.log(status);  // 輸出 '成年人'

空值合併運算符

空值合併運算符（Nullish Coalescing Operator）是用於處理默認值的運算符，通常用於確保一個變量具有非空（非 null 和非 undefined）的值。該運算符的語法是 ??。

當使用空值合併運算符時，它會返回第一個定義（非 null 和非 undefined）的操作數，如果第一個操作數為 null 或 undefined，則返回第二個操作數。

示例：

1
let num1 = 0;
2
let num2 = 1;
3
let result = num1 ?? num2;
4
console.log(result);  // 輸出 0，因為 num 不為 null 或 undefined
5

6
let user;
7
console.log(user ?? "匿名"); // 輸出 匿名，因為 user 未定義

位運算符

&：按位與
|：按位或
^：按位異或
~：按位取反
<<：左移
>>：右移
>>>：無符號右移

示例：

1
let a = 5;  // 二進制：0101
2
let b = 3;  // 二進制：0011
3

4
console.log(a & b);   // 輸出 1（按位與）
5
console.log(a | b);   // 輸出 7（按位或）
6
console.log(a ^ b);   // 輸出 6（按位異或）
7
console.log(~a);      // 輸出 -6（按位取反）
8
console.log(a << 1);  // 輸出 10（左移）
9
console.log(a >> 1);  // 輸出 2（右移）

其他運算符

typeof：返回一個字符串，表示未經計算的操作數的類型。
instanceof：用於測試對象是否是指定類型的實例。

示例：

1
let str = 'Hello';
2
console.log(typeof str);  // 輸出 'string'
3

4
let arr = [1, 2, 3];
5
console.log(arr instanceof Array);  // 輸出 true

`+`（加號）

在 JavaScript 中，加號 + 有多重用途，包括數學運算、字符串拼接和一元操作。

數學運算

示例：

1
let a = 5;
2
let b = 3;
3
let result = a + b;
4
console.log(result);  // 輸出 8

如果都是數字，+ 被用於執行數學加法。

字符串拼接

示例：

1
let str1 = 'Hello';
2
let str2 = ' World';
3
let result = str1 + str2;
4
console.log(result);  // 輸出 'Hello World'

如果其中一個操作數是字符串，+ 將執行字符串拼接。

一元加法運算符

示例：

1
let str = '42';
2
let num = +str;
3
console.log(num);  // 輸出 42

在單個操作數前使用 +，它可以將操作數轉換為數字，這是一元加法運算符的功能。

類型轉換

示例：

1
let num = 42;
2
let str = '10';
3
let result = num + str;  // 隱式類型轉換（類型強制轉換）
4
console.log(result);  // 輸出 '4210'

如果其中一個操作數是字符串，+ 會進行類型轉換，將其他操作數轉換為字符串，然後執行字符串拼接。

連接數組

示例：

1
let arr1 = [1, 2, 3];
2
let arr2 = [4, 5, 6];
3
let result = arr1 + arr2;
4
console.log(result);  // 輸出 '1,2,34,5,6'

當一個操作數是數組時，+ 會將數組轉換為字符串，然後進行字符串拼接。

特殊情況

示例：

1
let specialResult1 = '1' + 2 + 3;
2
console.log(specialResult1);  // 輸出 '123'
3

4
let specialResult2 =  2 + 3 + '1';
5
console.log(specialResult2);  // 輸出 '51'

specialResult1，因為字符串出現在 + 的最左邊，後續的數字會被當作字符串進行拼接。 specialResult2，因為字符串出現在 + 的最右邊，之前的數字會先進行數學運算後再進行拼接。

`-`（減號）

在 JavaScript 中，減號 - 是一個用於執行數學減法的運算符。

數學減法

示例：

1
let a = 5;
2
let b = 3;
3
let result = a - b;
4
console.log(result);  // 輸出 2

如果都是數字，- 被用於執行數學減法。

一元減法運算符

示例：

1
let num = 42;
2
let result = -num;
3
console.log(result);  // 輸出 -42

在單個操作數前使用 -，它可以執行一元減法運算，將操作數變為其相反數。

類型轉換

示例：

1
let num1 = 42;
2
let str = '10';
3
let result = num1 - str;
4
console.log(result);  // 輸出 32

如果其中一個操作數是字符串，- 會進行類型轉換，將其他操作數轉換為數字，然後執行數學減法。

特殊情況

示例：

1
let specialResult = '10' - 2;
2
console.log(specialResult);  // 輸出 8

在這個特殊的情況下，因為字符串中的內容可以被成功轉換為數字，- 會執行數學減法。

`=、==、===`（賦值、寬鬆相等、嚴格相等）

在 JavaScript 中，等號 = 是賦值運算符，而 == 和 === 是比較運算符。寬鬆相等會將兩個操作數轉換為相同類型，然後再進行比較。在條件判斷中，通常使用 === 進行嚴格相等性比較，因為它不會進行類型轉換。

賦值運算符

= 用於將右側的值賦給左側的變量。

示例：

1
let x = 5;
2
let y = 'Hello';
3
console.log(x);  // 輸出 5
4
console.log(y);  // 輸出 'Hello'

在這個例子中，= 將右側的值賦給左側的變量 x 和 y。

比較運算符

== 和 === 用於比較兩個值的相等性。

示例：

1
let a = 5;
2
let b = '5';
3

4
console.log(a == b);   // 輸出 true
5
console.log(a === b);  // 輸出 false

== 進行相等性比較時，會進行類型轉換，null == undefined 輸出 true。 === 進行相等性比較時，要求值和類型都相等，null === undefined 輸出 false。 NaN 不等於任何值，包括 NaN 本身。

`++`、`--`（自增、自減）

在 JavaScript 中，自增（++）和自減（--）是用於增加或減少變量值的操作符。

自增運算符 (++)

使用後會使得原來的變量立刻增加 1。前置自增，返回自增後的值（新值）；後置自增，返回自增前的值（舊值）；

前置自增示例：

1
let a = 5;
2
// 前置自增，先增加 1，然後再使用新的值
3
let b = ++a;
4
console.log(b);  // 輸出 6
5
console.log(a);  // 輸出 6

在這個例子中，a 先增加了 1，然後 b 獲取了新的 a 值（6）。

後置自增示例：

1
let x = 5;
2
// 後置自增，先使用當前值，然後再增加 1
3
let y = x++;
4
console.log(y);  // 輸出 5
5
console.log(x);  // 輸出 6

在這個例子中，y 先獲得了 x 的當前值（5），然後 x 的值增加了 1。

自減運算符 (—)

使用後會使得原來的變量立刻減少 1。前置自減，返回自減後的值（新值）；後置自減，返回自減前的值（舊值）；

前置自減示例：

1
let p = 10;
2
// 前置自減，先減少 1，然後再使用新的值
3
let q = --p;
4
console.log(q);  // 輸出 9
5
console.log(p);  // 輸出 9

在這個例子中，p 先減少了 1，然後 q 獲取了新的 p 值（9）。

後置自減示例：

1
let m = 8;
2
// 後置自減，先使用當前值，然後再減少 1
3
let n = m--;
4
console.log(n);  // 輸出 8
5
console.log(m);  // 輸出 7

在這個例子中，n 先獲得了 m 的當前值（8），然後 m 的值減少了 1。

運算符優先級：

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_precedence

算術運算符

賦值運算符

比較運算符

邏輯運算符

&&：邏輯與

||：邏輯或

!：邏輯非

三元運算符

空值合併運算符

位運算符

其他運算符

+（加號）

數學運算

字符串拼接

一元加法運算符

類型轉換

連接數組

特殊情況

-（減號）

數學減法

一元減法運算符

類型轉換

特殊情況

=、==、===（賦值、寬鬆相等、嚴格相等）

賦值運算符

比較運算符

++、--（自增、自減）

自增運算符 (++)

自減運算符 (—)

運算符優先級：

評論

`&&`：邏輯與

`||`：邏輯或

`!`：邏輯非

`+`（加號）

`-`（減號）

`=、==、===`（賦值、寬鬆相等、嚴格相等）

`++`、`--`（自增、自減）