JavaScript - 逗號運算子

Hello, 對程式設計有興趣的各位！今天，我們將要深入探討一個在JavaScript中非常有趣但常被忽略的特性：逗號運算子。如果你之前從未聽過它，別擔心——在本課結束之前，你將能夠像專家一樣使用它！

什麼是JavaScript的逗號運算子？

逗號運算是JavaScript中的一個獨特特性，它讓我們能在單一語句中評估多個表達式。它會從左到右評估它的每一個操作數，並返回最後一個操作數的值。

把它想像成一排骨牌：逗號運算子會按順序推倒它們，但最後只有最後一個骨牌的結果是重要的！

語法

逗號運算子的基本語法非常簡單：

expression1, expression2, expression3, ..., expressionN

在這裡，每一個表達式都會按順序評估，但只有最後一個表達式（expressionN）的值會被返回。

逗號運算子的例子

讓我們從一些簡單的例子開始，感受一下逗號運算子是如何工作的。

示例 1：基本使用

let x = 1, y = 2, z = 3;
console.log(x, y, z);

在這個例子中，我們使用逗號運算子在單一行中聲明和初始化多個變量。輸出將會是：

1 2 3

但等等！這其實不是逗號運算子的工作。這只是JavaScript聲明多個變量的語法。讓我們看一個真正使用逗號運算子的例子。

示例 2：評估和返回

let a = (5, 10, 15);
console.log(a);

這段代碼將會輸出：

15

為什麼？因為逗號運算子評估所有的表達式，但只返回最後一個。所以變量a被賦予了最後一個表達式的值：15。

示例 3：在循環中使用

for (let i = 0, j = 10; i < 5; i++, j--) {
console.log(i, j);
}

這個循環將會輸出：

0 10
1 9
2 8
3 7
4 6

在這裡，我們在兩個地方使用了逗號運算子：

1. 初始化兩個變量（i 和 j）
2. 在每次迭代中增加 i 和減少 j

逗號運算子的其他用途

逗號運算子可以非常多功能。讓我們探討一些其他可能有用的情况。

使用案例 1：縮短多個語句

function greet(name) {
let greeting = "Hello";
return (greeting += " " + name, greeting.toUpperCase());
}

console.log(greet("Alice"));

這將會輸出：

HELLO ALICE

在這裡，我們使用逗號運算子在單一行中執行兩個操作：串接字符串，然後轉換為大寫。

使用案例 2：變量交換

let x = 1, y = 2;
x = (y++, y);
console.log(x, y);

這將會輸出：

3 3

在這個棘手的例子中，y 首先被增加到 3，然後它的最新值被賦予 x。

使用案例 3：在箭頭函數中

const doubleSayHello = name => (console.log("Hello " + name), console.log("Hello " + name));

doubleSayHello("Bob");

這將會輸出：

Hello Bob
Hello Bob

在這裡，我們使用逗號運算子在緊湊的箭頭函數中執行兩個 console.log 語句。

方法表

這裡是一個總結逗號運算子關鍵點的表格：

方法	描述	示例
基本使用	評估多個表達式，返回最後一個	let x = (1, 2, 3); // x 是 3
在變量聲明中	聲明多個變量	let a = 1, b = 2, c = 3;
在循環中	在循環部分允許多個表達式	for (let i = 0, j = 10; i < 5; i++, j--)
在返回語句中	在返回之前執行多個操作	return (a += b, a * 2);
在箭頭函數中	在緊湊的函數中允許多個語句	const func = () => (expr1, expr2);

記住，雖然逗號運算子可以使你的代碼更紧凑，但重要的是要謹慎使用它。過度使用會導致代碼難以閱讀和維護。與所有編程工具一樣，清晰應該是你的主要目標！

希望這個教程能夠讓你對JavaScript的逗號運算子有一個堅實的理解。持續練習，很快你就能像有經驗的專業人士一樣使用它！快樂編程！

Credits: Image by storyset