1.4.3 逗號運算符

小小的逗號在JavaScript中有很大的用處，一方面它是基本的分隔符，例如，函數(shù)傳遞多個參數(shù)時，使用逗號分隔。

---

console.log('我喜歡去%s上學(xué)習(xí)%s', '面試廳', 'JavaScript');

---

另一方面它可以作為一個運算符，作用是將多個表達式連接起來，從左至右依次執(zhí)行。

逗號作為運算符的表現(xiàn)形式為：表達式1，表達式2，表達式3，……，表達式n。

它的求解過程將按照從左至右的順序進行，優(yōu)先執(zhí)行表達式1，然后執(zhí)行表達式2……直到執(zhí)行表達式n，最后返回表達式n的結(jié)果。

例如下面的表達式語句。

---

x = 8 * 2, x * 4

---

這是一個使用了逗號運算符的語句，首先執(zhí)行左邊的部分，x = 8×2，即x = 16，然后執(zhí)行右邊的語句，x×4 = 16×4 = 64，并將其返回。

這個語句表達的意思是x的值為16，返回的值為“64”。如果將整個語句賦值給一個變量y，則該變量y的值為64。

本小節(jié)中我們將重點講解逗號作為運算符的使用場景。

1. 在for循環(huán)中批量執(zhí)行表達式

逗號運算符在for循環(huán)中的使用場景是批量執(zhí)行表達式。如果一個for循環(huán)中有多個變量需要執(zhí)行表達式，可以通過逗號運算符一次性執(zhí)行。

---

for (var i = 0, j = 10; i < 10, j < 20; i++, j++) {
   console.log(i, j); 
}

---

一般在for循環(huán)的末尾處，只允許執(zhí)行單個表達式。在這里我們通過逗號運算符，將i++和j++兩個表達式視為同一個表達式，因此可以一次執(zhí)行，處理i與j兩個變量的遞增。

2. 用于交換變量，無須額外變量

在我們需要交換兩個變量的值時，通常的做法如下所示。

---

var a = 'a';
var b = 'b';
var c;

c = a;
a = b;
b = c;

---

借助臨時變量c先存儲a的值，然后將b值賦給a，再將c值賦給b，這樣就可以實現(xiàn)變量交換了。

如果我們不允許使用額外的變量存儲，可不可以實現(xiàn)呢？

當(dāng)然是可以的，這里提供了兩種使用逗號運算符的方案。

---

var a = 'a';
var b = 'b';
// 方案1
a = [b, b = a][0];
// 方案2
a = [b][b = a, 0];

---

在方案1中，前一部分[b, b = a]是一個一維數(shù)組，數(shù)組第二項值是b = a，實際會將a值賦給b，然后返回“'a'”，因此數(shù)組最終的值為['b', 'a']，然后取索引0的值為'b'，賦給變量a，最終實現(xiàn)a = 'b', b = 'a'。

在方案2中，前一部分[b]是一個一維數(shù)組，后一部分[b = a, 0]，實際會先執(zhí)行b = a，將a值賦給b，然后返回“0”，因此后一部分實際是修改了b的值并返回索引“0”，最終是a = [b][0]，即a = b，實現(xiàn)了a與b的交換。

3. 用于簡化代碼

因為逗號運算符可以使多個表達式先后執(zhí)行，并且返回最后一個表達式的值，因此對于某些特定的函數(shù)，我們可以使用逗號運算符進行簡寫。

---

if (x) {
   foo();
   return bar();
} else {
   return 1;
}
// 使用逗號運算符簡寫后
x ? (foo(), bar()) : 1;

---

4. 用小括號保證逗號運算符的優(yōu)先級

在所有的運算符中，逗號運算符的優(yōu)先級是最低的，因此對于某些涉及優(yōu)先級的問題，我們需要使用到小括號，將含有逗號運算符的表達式括起來。

---

var a = 20;
var b = ++a, 10;
console.log(b);  // Uncaught SyntaxError: Unexpected number

---

對于上面的語句，首先定義一個變量a，然后使用逗號運算符對變量a執(zhí)行自增操作，同時返回“10”，并將其賦值給變量b。

我們可能會認(rèn)為最后輸出b的值為10，但是運行后卻拋出了異常，這是為什么呢？

在上面的代碼中，同時出現(xiàn)了賦值運算符與逗號運算符，因為逗號運算符的優(yōu)先級比較低，實際會先執(zhí)行賦值運算符，即先執(zhí)行var b = ++a語句，再去執(zhí)行后面的10，它不是一個合法的語句，所以會拋出異常。

那么我們該怎么解決這個問題呢？

那就是使用小括號，保證逗號運算符的優(yōu)先級，將賦值語句后面的內(nèi)容括起來，執(zhí)行完含有逗號運算符的表達式后，再執(zhí)行賦值語句。

---

var a = 20;
var b = (++a, 10);
console.log(b);  // 10

---