可以说99%的前端都没咋用过!JS逗号操作符,面试常考但业务少用?一篇吃透不踩坑

0 阅读4分钟

今天旁边同事给我一个面试题,给我"面"懵圈了。

let a = 1, 2, 3, 4;console.log(a);

a 打印出来是多少?

他解释说:这个是"逗号操作符"。

我好说也写了几年代码了,我咋没遇到过逗号操作符?

逗号操作符到底是啥?

简单给它一个定义:

逗号操作符:依次执行多个表达式,最终只返回最后一个表达式的结果。

表达式1, 表达式2, 表达式3, ..., 表达式N

执行规则就3条:

  1. 从左到右,依次执行每一个表达式。
  2. 前面所有表达式的结果,都会被"丢弃"(执行了但不生效)。
  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]

解析:数组的每个元素都是一个逗号表达式,依次执行:

  1. 第一个元素:i++(i从0变1,丢弃结果),返回i=1;
  2. 第二个元素:i++(i从1变2,丢弃结果),返回i=2;
  3. 第三个元素:i++(i从2变3,丢弃结果),返回i=3; 最终数组为[1, 2, 3]。

总结

其实没啥复杂的, 逗号操作符就是执行多个表达式,只返回最后一个的结果。

在项目上只推荐在for循环中使用,同时初始化/更新多个变量。

如果要用"逗号操作符"记得加括号。