逗號(hào)操作符

逗號(hào)操作符 對(duì)它的每個(gè)操作數(shù)求值（從左到右），并返回最后一個(gè)操作數(shù)的值。(MDN)

逗號(hào)操作符會(huì)依此從左到右執(zhí)行逗號(hào)分隔的表達(dá)式，并把最后一個(gè)表達(dá)式的運(yùn)算結(jié)果作為最終結(jié)果。

var 表達(dá)式3的結(jié)果 = (表達(dá)式1, 表達(dá)式2, 表達(dá)式3);

逗號(hào)操作符使用場(chǎng)景很有限，通常會(huì)用在 for 循環(huán)中，同時(shí)壓縮代碼也會(huì)用到大量的逗號(hào)表達(dá)式。

1. 運(yùn)用在 for 循環(huán)中

var arr = [1, 2, 3, 4, 5, 6];
var i, len;

for (i = 0, len = arr.length; i < len; i++) {
  console.log(arr[i]);
}

for 循環(huán)的 初始語句 部分要做多件事情的時(shí)候，就會(huì)用逗號(hào)操作符。

上述例子在 初始語句 部分做了兩個(gè)賦值操作，對(duì)應(yīng)兩個(gè)賦值表達(dá)式，使用逗號(hào)操作符，就會(huì)從左到右依次執(zhí)行，對(duì)變量 i 和變量 len 進(jìn)行賦值操作。

for 語句的三個(gè)部分根據(jù)不同的業(yè)務(wù)都有可能用到逗號(hào)操作符，結(jié)合逗號(hào)操作符可以讓表達(dá)式更符合語義。
如上述例子中的 i = 0, len = arr.length;，可以明確的表示把 i 變成 0 和 把 len 設(shè)置成 arr 的長(zhǎng)度是初始操作。

但如果表達(dá)式太多，或者一個(gè)表達(dá)式很長(zhǎng)，不太建議使用逗號(hào)操作符。

var person = {
  father: {
    father: {
      father: {
        mother: {
          hobby: ['吃飯', '睡覺', '打游戲'],
        }
      }
    }
  }
};
var i, len;

for (i = 0, len = person.father.father.father.mother.hobby.length; i < len; i++) {
  console.log(person.father.father.father.mother.hobby[i]);
}

這里要獲取到某個(gè)人的爸爸的爸爸的爸爸的媽媽的愛好，就要寫一長(zhǎng)串。

這種情況應(yīng)該避免，防止一行代碼太長(zhǎng)，很多代碼規(guī)范也規(guī)定了一行代碼不應(yīng)超過 100 個(gè)字符。

可以考慮把爸爸的爸爸的爸爸的媽媽單獨(dú)取出來操作。

var person = {
  father: {
    father: {
      father: {
        mother: {
          hobby: ['吃飯', '睡覺', '打游戲'],
        }
      }
    }
  }
};

var hobby = person.father.father.father.mother.hobby;
var i, len;

for (i = 0, len = hobby.length; i < len; i++) {
  console.log(hobby[i]);
}

再比如要輸出一個(gè)二維數(shù)組從右上到左下的對(duì)角線數(shù)據(jù)，也可以應(yīng)用逗號(hào)操作符。

var arr = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
];

var i, j, len;
for (i = 0, j = arr.length - 1; arr[i]; i++, j--) {
  console.log(arr[i][j]);
}

輸出對(duì)角線，就是輸出 arr[0][2] 、 arr[1][1] 、 arr[2][0]，利用逗號(hào)運(yùn)算符就能很輕易的做到。

2. 用于代碼壓縮

通常不會(huì)手動(dòng)對(duì)代碼去進(jìn)行壓縮，都會(huì)借助自動(dòng)化的工具。

代碼進(jìn)行壓縮后，體積會(huì)有顯著的變化，如 3.5.0 版本 jquery 未壓縮的體積大概是 280KB ，壓縮后大約為 80KB。

代碼壓縮不僅僅是去除了空格，還會(huì)改變語法結(jié)構(gòu)，但通常不影響執(zhí)行結(jié)果。

如以下函數(shù)：

function encrypt(number) {
  number += 10;

  return number / 2 - 1;
}

壓縮后的代碼可能是這樣的：

function encrypt(n){return n+=10,n/2-1}

這是一個(gè)簡(jiǎn)單的數(shù)字加密函數(shù)，利用逗號(hào)表達(dá)式的特性，就可以用于在函數(shù)中對(duì)連續(xù)的幾個(gè)表達(dá)式進(jìn)行壓縮，最后一個(gè)表達(dá)式的結(jié)果就會(huì)是函數(shù)的返回值。

3. 聲明多個(gè)變量的逗號(hào)

在 JavaScript 中，同時(shí)想聲明多個(gè)變量，也是使用逗號(hào)進(jìn)行分隔。

var i = 1, j, person = {}, arr = [];

這里的逗號(hào)并不屬于逗號(hào)操作符，這是同時(shí)聲明多個(gè)變量的語法，其具有自己的含義。

4. 小結(jié)

逗號(hào)操作符是很多前端開發(fā)者在第一次進(jìn)行前端逆向工程（反向推測(cè)壓縮混淆的代碼）時(shí)碰到的，可以見得一般用的不多。

逗號(hào)操作符有時(shí)候可以增加代碼語義性，但不恰當(dāng)?shù)氖褂靡矔?huì)適得其反。如果逗號(hào)操作符讓一行代碼變得很行，應(yīng)考慮其他方式實(shí)現(xiàn)。