JavaScript中的逗號運算符

JavaScript逗號運算符 

      閱讀本文的前提，明確表達式、短語、運算符、運算數這幾個概念。

      所謂表達式，就是一個JavaScript的“短語”，JavaScript解釋器可以計算它，從而生成一個值。表達式分為以下三種形式：

 1）直接量：1.7是一個數字直接量，“JavaScript權威指南”是一個字符串直接量；

 2）變量

 3）復雜表達式：合並1）、2）中的表達式，創建比較復雜的表達式。例如：1.7是表達式，i是表達式，而1.7+i，也是表達式，它是兩個簡單表達式（一個直接量表達式，一個變量表達式）的和。在此例中，“+”是一個運算符，用於將兩個簡單表達式合並起來組成一個復雜的表達式。

      所謂運算符和運算數？可根據運算數的個數來對運算符進行分類，一元運算符：只有1個運算數，如：-3中的“-”對運算數取反，只包含一個運算數，為一元運算符。二元運算符：有2個運算數，如“+”。三元運算符：包含3個運算數，將三個表達式合並成一個復雜的表達式，如“?"。

     接下來進入正題...... 

     逗號運算符的特性及作用：逗號運算符的作用是將若干表達式連接起來。它的優先級是所有運算符中最低的，結合方向是自左至右。

     逗號表達式：
           一般形式：表達式1，表達式2，表達式3，......表達式n

           求解過程：先計算表達式1的值，再計算表達式2的值，......一直計算到表達式n的值。最后整個表達式的值是表達式n的值。 

     看下面幾個例子：

 1）x = 8*2, x*4; /*整個表達式為逗號表達式，它的值為64，x的值為16*/

 2）(x = 8*2, x*4) , x*2; /*整個表達式為逗號表達式，它的值為32，x的值為16*/

 3）x = (z=5,5*2); /*整個表達式為賦值表達式，它的值為10，z的值為5*/

     請注意：並不是所有的逗號都要看成逗號運算符，如在函數調用時，各個參數是用逗號分隔開的，這里的逗號並不是逗號運算符。如：printf("%d, %d, %d", x, y, z);

 4）如下代碼所示

 
          var a = 10, 
          
     b = 20; 
          
 
          function CommaTest() { 
          
      
          return a++, b++, 10; 
          
 } 
          
 
          var c = CommaTest(); 
          
 alert(c);  
          // 
           返回10 
         

      使用逗號運算符的場景歸納如下：

1. for循環中逗號運算符

      逗號運算符的常見用法是在for循環的增量表達式中使用。例如：

 
          var i,j=5,k; 
          
 
          for(i=0; i<10; i++,j++) { 
          
     k = i + j; 
          
 } 
         

      在每次通過循環的結尾時，for語句只允許單個表達式被執行。逗號運算符允許將多個表達式視為單個表達式，因此這兩個變量都遞增。

2. 逗號運算符與函數調用運算符的沖突

      在JavaScript中函數調用確實是函數調用運算符。它很特殊，因為其它編程語言資料中從來沒有這個叫法。

      函數調用運算符將計算它的每一個運算數，第一個運算數指定為函數名（括號前），而括號中的所有運算數的值將傳遞給這個函數作為參數。

      接下來看一個逗號運算符和函數運算符沖突的例子以及解決的方法。

           alert(2,5);   
          // 
          2 
          
 alert((2,5));  
          // 
          5 
         

      由於逗號運算符在JavaScript中的優先級是最低的，因此函數運算符將先於逗號運算符運行，上述代碼中第一個alert函數彈出2。 解決方法如第二個alert函數所示，加上括號，保證逗號運算符先運行。

3. 逗號運算符和賦值運算符沖突

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

      上述代碼報錯：由於逗號運算符要求它的運算數為復雜表達式或簡單 表達式（如變量或直接量），賦值運算符先於逗號運算符執行，使逗號運算符左邊不是一個運算數或表達式，而是含有var關鍵字的語句，因此報錯。解決方法：只需加上括號，即var b = (++a, 10)，保證逗號運算符先執行即可。

 

      再看幾個示例，后兩個示例略為奇葩。

      示例一：

           console.log((0,9));   
          // 
          9 
          
 console.log((9,0));   
          // 
          0 
          
  
          if((9,0)) console.log("no"); 
          
 
          if((0,9)) console.log("yes");   
          // 
          yes 
         

      示例二：交換變量，無需第三個變量

 
          var a = 'a', b = 'b'; 
          
 
          // 
          method1 
          
 a = [b,b=a][0]; 
          
 
          // 
          method2 
          
 a = [b][b=a,0]; 
         

      分析：a = [b,b=a][0]中，[b,b=a]表示一維數組，[0]表示下標；a = [b][b=a, 0]，其中[b]表示一維數組，[b=a, 0]中按逗號運算符處理，返回0，當做下標。

      在這個例子中，我一直將在[b,b=a][0]和[b][b=a, 0]視作二維數組，這不對的。

      一維數組形式：[1,2,3][0]   //取得值1      

      二維數組形式：[[1,2,3],[4,5,6]][1][1]     //取得值5 

      不過上述兩種數組表示形式很少用。

      示例三：簡化代碼，不過可讀性差

 
          if(x) { 
          
     foo(); 
          
      
          return bar(); 
          
 }  
          else { 
          
      
          return 1; 
          
 } 
          
 
          // 
           equal to  
          
  
          return x ? (foo(), bar()) : 1; 
         

 

 

 

時間：2014-10-20

地點：合肥

引用：http://msdn.microsoft.com/zh-cn/library/ie/9b37css7(v=vs.94).aspx 

        http://www.feeldesignstudio.com/2013/09/javascript-comma-operator 

        http://www.cnblogs.com/pinocchioatbeijing/articles/2343736.html