js 逗号运算符的用法详解

注意：
一、由于目前正在功读JavaScript技术，所以这里拿javascript为例。你可以自己在PHP中试试。
二、JavaScript语法比较复杂，因此拿JavaScript做举例。


最近重新阅读JavaScript权威指南这本书，应该说很认真的阅读，于是便想把所学的东西多记录下来。后

面本人将逐步写上更多关于本书的文章。

本文的理论知识来自于JavaScript权威指南，我这里做一下整理，或者说叫笔记。

如果你的基础够好的话，完全理解不成问题，但是如果读得有些郁闷的话，可以加我的QQ：76863715


阅读本文的前提是，你能区分什么是表达式，什么是语句。还有明确运算符和运算数多是些啥东西。所

谓的表达式就是—— 一个JavaScript的“短语“，JavaScript的解释器可以计算它，从而生成一个值。表达式可

以分为以下三种：

1）直接量，如1.7是数字直接量、"JavaScript权威指南"是一个字符串直接量等。
2) 变量

直接量表达式的值就是这个直接量本身，变量表达式的值则是该变量所存放或引用的值。

3) 可以“合并”上面提到的“简单”表达式来创建为比较复杂的表达式。例如1.7是表达式，i也是表达式，下面的代码所示的同样也是（也可以叫）表达式：
i + 1.7
上面这个表达式的值是两个简单表达式（一个变量表达式和一个简单表达式）的和。在此例中，“+”是一个运算符，用于将两个简单表达式合并起来以组成一个复杂的表达式。

运算数的个数
可以根据运算符需要的运算数的个数对运算符进行分类，大多数运算符都是二元运算符，它们把两个“表达式”合并成一个复杂的表达式。简而言之，就是它有两个运算数。此外，JavaScript还支持大量的一元运算符，它能将一个表达式转换成另一个更复杂的表达式。如表达式-3中，运算符“－”就是一元运算符，它执行操作是对运算数取反。
JavaScript还支持三元操作符“？：”，它可以将三个表达式合并为一个复杂的表达式。

OK，下面开始讲解逗号运算符。

逗号运算符，它将先计算左边的参数，再计算右边的参数值。然后返回最右边参数的值。
原书举的例子不太好，无法解释上面那句话，这里另外提供一个：

<script>

var a = 10, b = 20;

function CommaTest(){
return a++, b++, 10;
}

var c = CommaTest();

alert(a); // 返回11
alert(b); // 返回21
alert(c); // 返回10

</script>

变量c的值是函数CommaTest返回的值，而a和b多加1了。

逗号运算符和函数调用运算符的冲突
在JavaScript中，函数调用确实是函数调用运算符。它很特殊，因为其它编程语言资料中多从来没有这个叫法的。然后，（才是）它没有固定数目的运算数。

函数调用运算符的第一个参数是一个函数名或者是一个引用函数的表达式，其后是括号（）。括号中间可以是数目不定的运算符，这些运算数可以是任意的表达式，它们之间用逗号隔开。

函数调用运算符将计算它的每一个运算数，第一个运算数指定为函数名（括号前），而括号中间的所有运算数的值将传递给这个函数作为函数的参数。
例如：

document.close()
Math.sin(x)
alert("Welcome " + name)
Date.UTC(2000, 11, 31, 23, 59, 59)
funcs.f(funcs.args[0], funcs.args[1])

知道了调用函数运算符后，我们举个例子说明关于如何处理它们冲突的事。

<script>
alert(2*5, 2*4); // 输出10
</script>

上面这段代码输出10,但是如果根据逗号运算符的原理来解释的话，那应该是输出8才对。为什么呢？

因为逗号运算符在JavaScript在的优先级是最底的，记住这一点非常有用。所以函数调用运算符将先于逗号运算符运行。结果alert函数输出第一个参数的值。将上面的代码修改成如下所示即可。

<script>
alert((2*5, 2*4)); // 返回8
</script>


逗号运算符和赋值运算赋的冲突

在JavaScript中，逗号运算符的优先级比赋值运算符还要底。请看下面的代码。

<script>
var a = 20;
var b = ++a,10;
alert(b);
</script>

这段代码似乎不能运行，可能是由于赋值运算符优先于逗号表达式运行，如果将代码改成

<script>
var a = 20;
var b = (++a,10);
alert(b);
</script>

即可了。



上面说到的“可能”我们这里做一下解释，这是本人的一些看法，不一定权威。

逗号运算符要求它的运算数是一个复杂的表达式或简单的表达式（如变量或直接量），但由于赋值运算符优先于逗号运算符执行，因此变成左边不是一个运算数或一个表达式，而是一个含有var关键字的语句

之前不能执行的代码可以看成如下代码：

<script>
var a = 20;
(var b = ++a),10;
alert(b);
</script>

语句中有表达式语句，但不是所有的语句都是表达式。

############################################################

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