今天旁边同事给我一个面试题,给我"面"懵圈了。
let a = 1, 2, 3, 4;console.log(a);
问 a 打印出来是多少?
他解释说:这个是"逗号操作符"。
我好说也写了几年代码了,我咋没遇到过逗号操作符?
逗号操作符到底是啥?
简单给它一个定义:
逗号操作符:依次执行多个表达式,最终只返回最后一个表达式的结果。
表达式1, 表达式2, 表达式3, ..., 表达式N
执行规则就3条:
- 从左到右,依次执行每一个表达式。
- 前面所有表达式的结果,都会被"丢弃"(执行了但不生效)。
- 整个逗号表达式的最终结果,只取最后一个表达式的值。
举个栗子:
// 基础用法:先执行1+2(结果3,丢弃),再执行3+4(结果7,返回)
let a = (1 + 2, 3 + 4);
console.log(a); // 输出:7
注意:这里的括号千万不能少!
因为逗号操作符的优先级是JS里几乎最低的(比赋值运算符还低),不加括号会被解析成"连续声明变量",而不是逗号表达式,后面会详说这个坑~
逗号操作符 ≠ 逗号分隔符
不是所有逗号,都是逗号操作符!
只有"独立表达式上下文"里的逗号,才是我们说的逗号操作符,其他场景里的逗号,只是"分隔符"。
let a = (1, 2, 3); // 逗号操作符
let arr = [1, 2, 3]; // 逗号分隔符
括号!括号!括号!
注意逗号操作符的优先级极低,几乎比所有运算符都低——包括赋值运算符(=)。
这就导致,不加括号时,JS会优先解析赋值,而不是逗号表达式。
let a = (1 + 2, 3 + 4);
console.log(a); // 7(取最后)
let a = 1 + 2, 3 + 4;
console.log(a); // 3(a被赋值为1+2的结果,后面3+4报错但不影响a)
想用逗号操作符,99%的情况都需要加括号,避免被JS解析成其他语法。
唯一使用场景:for循环
很多兄弟说"从来不用逗号操作符",其实不然。
你写for循环时,大概率已经用过了,只是没意识到那是逗号操作符。
逗号操作符最"正经"的用法,就是在for循环中,同时初始化、更新多个变量,这也是业务开发中唯一推荐使用它的场景,简洁又不影响可读性。
for (let i = 0, j = 10; i < 5; i++, j--) {
console.log(i, j); // 输出:0 10、1 9、2 8、3 7、4 6
}
这里的两个逗号,都是逗号操作符:
第一个用于初始化两个变量,第二个用于每次循环更新两个变量,既简洁又清晰,比写两行代码更高效。
面试真题实战
第1题(基础送分题)
let a = (100, 200, 300);
console.log(a);
输出:300
解析:逗号操作符依次执行三个表达式,返回最后一个表达式的结果,前面100、200的结果都会被丢弃。
第2题(高频题)
let x = 2;
let y = (x++, x + 3);
console.log(y);
输出:6
解析:先执行x++(x从2变成3,表达式结果为2,被丢弃),再执行x+3(3+3=6),最终返回6。
第3题(优先级陷阱)
let a = 5, 10;
console.log(a);
输出:5
解析:这里的逗号不是操作符,而是变量声明分隔符,等价于let a = 5; let 10;(10是非法变量名,会报错,但不影响a的赋值,所以a的值是5)。
第4题(for循环实战)
let k;
for (let i = 0, j = 0; i < 6, j < 10; i++, j++) {
k = i + j;
}
console.log(k);
输出:18
解析:for循环的条件判断里,逗号是操作符,最终判断条件是最后一个表达式(j < 10),循环直到j=10时终止,此时i=10、j=10,k=10+8=18(循环执行10次,最后一次i=9、j=9,k=18)。
第5题(函数+逗号,综合题)
function fn() {
let x = 0;
return (console.log('hello'), x += 1, x);
}
console.log(fn());
先输出hello,再输出1
解析:return后面的逗号表达式,依次执行3件事:打印hello、x自增为1、返回x的值,最终函数返回1,所以先打印hello,再打印函数返回值1。
第6题(大厂坑题,难度拉满)
let i = 0;
let arr = [(i++, i), (i++, i), (i++, i)];
console.log(arr); // 输出什么?
输出:[1, 2, 3]
解析:数组的每个元素都是一个逗号表达式,依次执行:
- 第一个元素:i++(i从0变1,丢弃结果),返回i=1;
- 第二个元素:i++(i从1变2,丢弃结果),返回i=2;
- 第三个元素:i++(i从2变3,丢弃结果),返回i=3; 最终数组为[1, 2, 3]。
总结
其实没啥复杂的, 逗号操作符就是执行多个表达式,只返回最后一个的结果。
在项目上只推荐在for循环中使用,同时初始化/更新多个变量。
如果要用"逗号操作符"记得加括号。