JavaScript 中的運算符

JavaScript 中的運算符

在本文中,我們將解釋 JavaScript 中的運算符。

YouTube Video

JavaScript 中的運算符

JavaScript 中的運算符是用來對數字和變量進行計算或比較的符號或關鍵字。有各種類型的運算符,每一種都執行不同的操作。以下是一些主要運算符的摘要:。

算術運算符

JavaScript 的 算術運算子 包括以下內容:。

運算符 描述 示例 結果
+ 加法 5 + 2 7
- 減法 5 - 2 3
* 乘法 5 * 2 10
/ 除法 5 / 2 2.5
% 取模(餘數) 5 % 2 1
++ 自增(增加 1) let x = 5; x++ 6
-- 自減(減少 1) let x = 5; x-- 4
 1let a = 10; // Initialize variable 'a' with the value 10
 2let b = 3;  // Initialize variable 'b' with the value 3
 3
 4// Perform and display arithmetic operations between 'a' and 'b'
 5console.log("Addition (a + b):      ", a + b); // 13
 6console.log("Subtraction (a - b):   ", a - b); // 7
 7console.log("Multiplication (a * b):", a * b); // 30
 8console.log("Division (a / b):      ", a / b); // 3.333...
 9console.log("Modulus (a % b):       ", a % b); // 1
10
11// Demonstrate post-increment operation on 'a'
12// Output the current value of 'a' (10), then increment
13console.log("Post-increment (a++):  ", a++);
14// Display the incremented value of 'a' (11)
15console.log("Value of 'a' after increment:", a);
16
17// Demonstrate pre-increment operation on 'a'
18// Increment 'a' first (12) then output
19console.log("Pre-increment (++a):   ", ++a);
20
21// Demonstrate post-decrement operation on 'a'
22// Output the current value of 'a' (12), then decrement
23console.log("Post-decrement (a--):  ", a--);
24// Display the decremented value of 'a' (11)
25console.log("Value of 'a' after decrement:", a);
26
27// Demonstrate pre-decrement operation on 'a'
28// Decrement 'a' first (10) then output
29console.log("Pre-decrement (--a):   ", --a);

算術運算符對數字執行基本的數學操作。除了加法和減法,您還可以執行取模、自增和自減等操作。請注意,自增或自減返回的值根據運算符位於操作數之前還是之後而有所不同。

賦值運算符

JavaScript 的 賦值運算子 包括以下內容:。

運算符 描述 示例 結果
= 賦值 x = 5 x 被賦值為 5
+= 加法賦值 x += 5 x = x + 5
-= 減法賦值 x -= 5 x = x - 5
*= 乘法賦值 x *= 5 x = x * 5
/= 除法賦值 x /= 5 x = x / 5
%= 取模賦值 x %= 5 x = x % 5
 1let x = 10;
 2
 3x += 5;  // x = x + 5, so x becomes 15
 4console.log('After x += 5 : ', x);  // 15
 5
 6x -= 10;
 7console.log('After x -= 10 : ', x);  // 5
 8
 9x *= 3;
10console.log('After x *= 3 : ', x);  // 15
11
12x /= 3;
13console.log('After x /= 3 : ', x);  // 5
14
15x %= 2;
16console.log('After x %= 2 : ', x);  // 1

賦值運算符用於給變數賦值或更新變數的值。除了常規賦值,還有用於算術運算(如加法和模數)的賦值運算符。

比較運算符

JavaScript 的 比較運算子 包括以下內容:。

運算符 描述 示例 結果
== 等於 5 == "5" true
=== 全等(類型和值都相等) 5 === "5" false
!= 不等於 5 != "5" false
!== 嚴格不等於 5 !== "5" true
> 大於 5 > 2 true
< 小於 5 < 2 false
>= 大於或等於 5 >= 5 true
<= 小於或等於 5 <= 4 false
 1console.log("5 == '5' evaluates to:", 5 == "5");   // true (because the values are equal)
 2console.log("5 === '5' evaluates to:", 5 === "5"); // false (because the types are different)
 3console.log("5 != '5' evaluates to:", 5 != "5");   // false
 4console.log("5 !== '5' evaluates to:", 5 !== "5"); // true
 5console.log("5 > 2 evaluates to:", 5 > 2);         // true
 6console.log("5 < 2 evaluates to:", 5 < 2);         // false
 7console.log("5 >= 5 evaluates to:", 5 >= 5);       // true
 8console.log("5 <= 4 evaluates to:", 5 <= 4);       // false
 9console.log("5 >= '5' evaluates to:", 5 >= "5");   // true
10console.log("5 <= '5' evaluates to:", 5 <= "5");   // true
  • 比較運算符比較值並返回 true 或 false。
  • 相等運算符(==)在進行比較之前,若有需要,會自動轉換不同的類型。嚴格相等運算符(===)在比較時不會進行任何類型轉換,只有在兩個值類型相同且值也相同時才會返回 true。使用嚴格相等運算符(===)有助於防止因非預期的類型轉換引起的錯誤,因此建議優先使用它。

邏輯運算符

JavaScript 的 邏輯運算子 包括以下內容:。

運算符 描述 示例 結果
&& 且(當兩個條件均為 true 時為 true) true && false false
|| 或(當任一條件為 true 時為 true) true || false true
! 非(將 true 變為 false,將 false 變為 true) !true false
1let a = true;
2let b = false;
3
4console.log("a && b evaluates to:", a && b);  // false
5console.log("a || b evaluates to:", a || b);  // true
6console.log("!a evaluates to:", !a);          // false

邏輯運算符用於有多個條件時,評估條件的組合。

邏輯運算子的優先順序

在 JavaScript 中,邏輯運算子通常依照以下順序進行運算:先 NOT,接著 AND,最後 OR

NOT 擁有最高的優先權

NOT 是一元運算子,並具有最高的優先順序。

1console.log(!true || false);  // false
AND 的優先權高於 OR

AND 的優先權高於 OR,因此會先運算 AND 部分。

1console.log(true || false && false);  // true

通過這種方式,首先會計算 AND&&)部分,其結果將傳遞給 OR||)。

ANDOR 進行短路評估

JavaScript 的 ANDOR 執行短路評估。如果結果可由左側的值確定,則不會評估右側的表達式。

1let a = false && console.log("This will not be printed");
2console.log(a);  // false
3
4let b = true || console.log("This will not be printed");
5console.log(b);  // true

無論情況如何,都不會執行 console.log()

建立明確的優先順序

通過使用括號明確分組表達式,可以防止對優先級的誤解。

1console.log(true || (false && false));  // true
自然語言與程式解釋之間的差異

在使用邏輯運算子時,了解自然語言中的模糊性很重要。例如,在說「白狗或貓」時,可能意味著「一隻白狗或任何顏色的貓」,或者「一隻白狗或一隻白貓」。在程式碼中,可能如以下呈現:。

1if (isWhite && isDog || isCat) {
2    console.log(' "A white dog" or "a cat of any color" ');
3}
4
5if (isWhite && (isDog || isCat)) {
6    console.log(' "A white dog" or "a white cat" ');
7}
8
9console.log(true || (false && false));  // true

由於自然語言中存在此類模糊性,在編碼或設計時需要特別注意。

三元運算符(條件運算符)

JavaScript 包含 三元運算子(條件運算子)

運算符 描述 示例 結果
? : 如果條件為 true,執行左側;如果條件為 false,執行右側 條件 ? 為 true 時執行 : 為 false 時執行 根據條件返回結果
1let age = 20;
2let message = age >= 18 ? "Adult" : "Minor";
3console.log(message);  // "Adult"

其寫法為:condition ? 為真時的值 : 為假時的值

位運算符

JavaScript 的 位元運算子 包括以下內容。

運算符 描述 示例 結果
& AND 5 & 1 1
| OR 5 | 1 5
^ XOR 5 ^ 1 4
~ NOT ~5 -6
<< 左移 5 << 1 10
>> 右移 5 >> 1 2
 1let x = 0x0F & 0x0C;
 2console.log("0x0F & 0x0C evaluates to:", x, "(0x0C, 12)");  // 0x0C (12)
 3
 4x = 0x04 | 0x02;
 5console.log("0x04 | 0x02 evaluates to:", x, "(0x06, 6)");  // 0x06 (6)
 6
 7x = 0x0F ^ 0x0C;
 8console.log("0x0F ^ 0x0C evaluates to:", x, "(0x03, 3)");  // 0x03 (3)
 9
10// The inverted number is represented as a negative value
11// because JavaScript numbers are stored as signed 32-bit integers.
12x = ~0x0C;
13console.log("~0x0C evaluates to:", x, "(-13, 0xF3)");  // 0xF3 (-13)
14
15x = 0x04 << 1;
16console.log("0x04 << 1 evaluates to:", x, "(0x08, 8)");    // 0x08 (8)
17x = 0x04 >> 1;
18console.log("0x04 >> 1 evaluates to:", x, "(0x02, 2)");    // 0x02 (2)

位元運算符在位元層級上對數字執行計算。它們通常用於低階處理。

類型運算符

JavaScript 的 類型運算子 包括以下內容。

運算符 描述 示例 結果
typeof 返回變數的類型 typeof 123 "number"
instanceof 檢查物件是否屬於特定類別 arr instanceof Array true
1console.log(typeof "Hello");  // "string"
2console.log(typeof 42);       // "number"
3
4let arr = [1, 2, 3];
5console.log("arr instanceof Array : ", arr instanceof Array); // true

類型運算符用於檢查值的類型或將其轉換為特定類型。

typeof 運算子會返回變數的類型。

instanceof 運算子用於檢查一個物件是否屬於某個特定類別。

總結

  • 算術運算符執行基本計算。
  • 賦值運算符為變數賦值或更新值。
  • 比較運算符比較兩個值並返回真或假。
  • 邏輯運算符評估條件的組合。
  • 三元運算符讓你能以比if更簡短的方式撰寫條件語句。
  • 位元運算符執行位元層級的計算。
  • 類型運算符讓你檢查值的類型。

您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。 請也查看我們的 YouTube 頻道。

YouTube Video