聊一聊Javascript有趣的逗号操作符
前提: 表达式 语句 运算符
-
- 表达式 可以表示值的任何代码都是表达式。由于表达式产生值，因此它们可以出现在JavaScript期望值的程序中的任何位置
10 // 数字表达式
'有趣的逗号' // 字符串表达式
1&&2;
true || false; //逻辑表达式
a = 1 // 赋值表达式
-
- 语句 语句是执行特定操作的指令。这样的动作包括创建变量或函数，遍历元素数组，基于特定条件评估代码等。JavaScript程序实际上是一系列语句。
var a; // 变量声明语句
function foo() {} // 函数声明语句
var = b =(a = 1 ) //语句表达式
但是没有表达式语句
-
- 运算符
+ - * % / 算术运算符
&& || ^ 逻辑运算符
> < = != 比较运算符
a ? true : false 三元运算符
, 逗号运算符
上面的两点中可以看出 语句中可以有表达式 但是表达式中不能包含语句等其他关键保留字
语句 表达式 运算符的关系
var a = 3; // 语句中含有赋值运算符和数字表达式
var b = 5;
var c = a + b * 3 > 14 ? 2 : 11; // 语句中有算术运算符 比较运算符 三元运算符 还有赋值语句 还有var变量声明语句
逗号运算符
MDN的解释(developer.mozilla.org/zh-CN/docs/…)
逗号操作符 对它的每个操作数求值（从左到右），并返回最后一个操作数的值。
简单的赋值运算
var a;
a = (1, 2, 3, 4*2+1);
console.log(a) // 9
// 从左往右计算返回的是4*2+1
上面的例子没有很好的解释从左往右依次执行,再来一个例子
检测是否从左至右依次执行
var a = 10, b = 12, c = 15;
var d;
function test() {
return a++, b+=2, c+=3 , 100
}
d = test();
console.log(a, b, c, d);
// 11 14 18 100
这里说明在return 后的逗号表达式都依次执行了相应的运算
带括号的逗号运算符
alert(2, 3) // 永远只会弹出２
因为逗号运算符在Javascript中的优先级最低 所以优先级高的函数执行会覆盖优先级低的逗号运算符, 如何提升优先级?
加括号
var a = 10;
var b = 12;
var c = 15;
var d;
d = a, b++, c++, 100;
console.log(a, b, c, d); // 10 13 16 10
var a = 10;
var b = 12;
var c = 15;
var d;
d = (a, b++, c++, 100);
console.log(a, b, c, d); // 10 13 16 100
解析:
- 第一个不带括号d一直等于a的值 因为赋值运算优先级大于逗号运算
- 第二个加了括号是逗号的优先级得到提升 先运算逗号运算符的结果赋值给a 所以a为100
不能运行的情况
上面的代码都是先声明的变量后进行的逗号运算 这次来一点不一样的
var a = 20;
var b = a, 2;
// Uncaught SyntaxError: Unexpected number
解析:
- var b = a, 2使(var b = a)这部分作为了表达式 表达式中不能含有语句所以报错--- 这里的说法可能不准确 我自己的理解
- 把后面的a, 2用括号隔离起来就可以了
var a = 20;
var b = (a, 2);
console.log(b); // 2
逗号操作符的作用
-
- 一次操作计算多个项
下面是一个大厂的面试题
var i = j = 0, k = 0;
for(i, j; i < 10, j < 6; i++, j++) {
k = i + j;
}
console.log(k); // 10
解析:
- i,j,k的初始值都是０
- for循环中有三处逗号操作 i,j i < 10, j < 6 i++, j++
- 每个逗号操作符都会从左至右一次执行并返回最后的操作项的值
- 每次循环i++ j++
- 但是在判断循环的终止条件用的是j < 6来进行判断
- i,j都是５的时候 k = 10
- i,j都是6的时候 6 !< 6循环终止 k等于10
参考文档
medium.com/launch-scho…
2ality.com/2012/09/exp…
www.lib.ru/JAVA/javasc…
