逗號操作符

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

逗號操作符會依此從左到右執(zhí)行逗號分隔的表達式，并把最后一個表達式的運算結(jié)果作為最終結(jié)果。

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

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

1. 運用在 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)的 初始語句 部分要做多件事情的時候，就會用逗號操作符。

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

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

但如果表達式太多，或者一個表達式很長，不太建議使用逗號操作符。

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]);
}

這里要獲取到某個人的爸爸的爸爸的爸爸的媽媽的愛好，就要寫一長串。

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

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

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]);
}

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

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]);
}

輸出對角線，就是輸出 arr[0][2] 、 arr[1][1] 、 arr[2][0]，利用逗號運算符就能很輕易的做到。

2. 用于代碼壓縮

通常不會手動對代碼去進行壓縮，都會借助自動化的工具。

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

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

如以下函數(shù)：

function encrypt(number) {
  number += 10;

  return number / 2 - 1;
}

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

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

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

3. 聲明多個變量的逗號

在 JavaScript 中，同時想聲明多個變量，也是使用逗號進行分隔。

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

這里的逗號并不屬于逗號操作符，這是同時聲明多個變量的語法，其具有自己的含義。

4. 小結(jié)

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

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