JavaScript - 運算子

您好，未來的 JavaScript 巫師們！我很興奮能成為您們在這個令人興奮的旅程中的導遊，一起探索 JavaScript 運算子的世界。作為一個教了多年編程的人，我可以告訴您，理解運算子就像學習編程世界的秘密握手一樣。所以，讓我們一起深入探究這些神秘吧！

什麼是運算子？

在我們深入細節之前，先從基礎開始。在 JavaScript 中，運算子是一個用來對操作數（值和變量）進行操作的特別符號。可以把運算子看作是編程語言中的動詞——它們是讓事情發生的作用！

例如，在表達式 2 + 3 中，+ 是運算子，而 2 和 3 則是操作數。簡單吧？

JavaScript 算術運算子

現在，讓我們來討論算術運算子。這些是 JavaScript 中數學操作的核心。記得上過的那些數學課嗎？現在是時候重溫那些知識了！

這裡有一個算術運算子的表格：

運算子	描述	範例
+	加法	5 + 3 = 8
-	減法	5 - 3 = 2
*	乘法	5 * 3 = 15
/	除法	15 / 3 = 5
%	餘數（模數）	5 % 2 = 1
++	递增	Let x = 5; x++; (現在 x 是 6)
--	递减	Let x = 5; x--; (現在 x 是 4)

讓我們看看這些運算子的實際應用：

let a = 10;
let b = 5;

console.log(a + b); // 輸出：15
console.log(a - b); // 輸出：5
console.log(a * b); // 輸出：50
console.log(a / b); // 輸出：2
console.log(a % b); // 輸出：0

a++; // a 現在是 11
console.log(a); // 輸出：11

b--; // b 現在是 4
console.log(b); // 輸出：4

這段代碼的每一行都展示了這些運算子是如何工作的。對於一些同學來說，模數運算子 (%) 可能是新的——它給出除法的餘數。當你需要檢查一個數字是偶數還是奇數時，這非常有用！

JavaScript 比較運算子

接下來，我們來看看比較運算子。這些就像編程競賽中的裁判——它們比較值並返回 true 或 false。它們對於在代碼中做出決策來說是必不可少的。

這裡有一個比較運算子的表格：

運算子	描述	範例
==	等於	5 == 5 返回 true
===	嚴格等於（值和類型）	5 === "5" 返回 false
!=	不等於	5 != 3 返回 true
!==	嚴格不等於	5 !== "5" 返回 true
>	大於	5 > 3 返回 true
<	小於	5 < 3 返回 false
>=	大於或等於	5 >= 5 返回 true
<=	小於或等於	5 <= 3 返回 false

讓我們看看這些運算子的實際應用：

let x = 5;
let y = "5";

console.log(x == y);  // 輸出：true
console.log(x === y); // 輸出：false
console.log(x != y);  // 輸出：false
console.log(x !== y); // 輸出：true
console.log(x > 3);   // 輸出：true
console.log(x < 10);  // 輸出：true
console.log(x >= 5);  // 輸出：true
console.log(x <= 4);  // 輸出：false

注意 == 和 === 之間的差異。三個等號 (===) 檢查值和類型，而雙等號 (==) 只檢查值。這是初學者常見的錯誤來源，所以請留意你使用的是哪一個！

JavaScript 邏輯運算子

邏輯運算子是 JavaScript 中的決策者。它們幫助你組合多個條件並做出複雜的決策。可以把這些運算子看作是編程村莊中的智者和長者，引導你的代碼做出正確的選擇。

這裡有一個邏輯運算子的表格：

運算子	描述	範例
&&	邏輯 AND	(x > 0 && x < 10)
||	邏輯 OR	(x === 5 || y === 5)
!	邏輯 NOT	!(x === y)

讓我們看看這些運算子的實際應用：

let a = 5;
let b = 10;

console.log(a > 0 && b < 20);  // 輸出：true
console.log(a > 10 || b === 10);  // 輸出：true
console.log(!(a === b));  // 輸出：true

&& 運算子僅當兩個條件都為真時返回 true。|| 運算子當至少一個條件為真時返回 true。! 運算子將布爾值反轉——它將 true 變為 false，將 false 變為 true。

JavaScript 位運算子

現在，我們進入了位運算子的領域。這些運算子對整數的位進行操作。它們就像編程世界的秘密間諜——不常使用，但在需要時非常強大。

這裡有一個位運算子的表格：

運算子	描述
&	位運算 AND
|	位運算 OR
^	位運算 XOR
~	位運算 NOT
<<	左移
>>	簡單右移
>>>	零填充右移

這些運算子相對進階，所以如果你一開始覺得它們模糊不清，不必擔心。隨著你在 JavaScript 的進步，你會遇到需要它們的情況。

JavaScript 見賦值運算子

見賦值運算子用於將值分配給變量。它們就像編程世界中的搬運工——它們將事物放在它們屬於的地方。

這裡有一個見賦值運算子的表格：

運算子	描述	範例
=	賦值	x = 5
+=	加法賦值	x += 3 是 x = x + 3 的同義詞
-=	減法賦值	x -= 3 是 x = x - 3 的同義詞
*=	乘法賦值	x = 3 是 x = x 3 的同義詞
/=	除法賦值	x /= 3 是 x = x / 3 的同義詞
%=	餘數賦值	x %= 3 是 x = x % 3 的同義詞

讓我們看看這些運算子的實際應用：

let x = 5;
console.log(x); // 輸出：5

x += 3;
console.log(x); // 輸出：8

x -= 2;
console.log(x); // 輸出：6

x *= 4;
console.log(x); // 輸出：24

x /= 3;
console.log(x); // 輸出：8

x %= 3;
console.log(x); // 輸出：2

這些運算子使你的代碼更簡潔和易於閱讀。它們就像是編程世界的瑞士軍刀——多用途且方便！

JavaScript 雜項運算子

最後，我們來看看一些不適合其他類別的雜項運算子。

1. 條件（三元）運算子：這是 if-else 語句的速寫形式。

let age = 20;
let canVote = (age >= 18) ? "Yes" : "No";
console.log(canVote); // 輸出："Yes"

這個運算子檢查 age >= 18 是否為真。如果是，它將 "Yes" 賦值給 canVote，否則賦值 "No"。

2. typeof 運算子：這個運算子返回指示操作數類型的字符串。

console.log(typeof 42);        // 輸出："number"
console.log(typeof 'blubber'); // 輸出："string"
console.log(typeof true);      // 輸出："boolean"
console.log(typeof [1, 2, 4]); // 輸出："object"

3. delete 運算子：這個運算子刪除對象的屬性或數組的元素。

let person = {name: "John", age: 30};
delete person.age;
console.log(person); // 輸出：{name: "John"}

以上就是 JavaScript 運算子的世界。記住，熟能生巧。所以，不要害怕在您自己的代碼中嘗試這些運算子。快樂編程！

Credits: Image by storyset