你知道 JS 里有个逗号操作符吗？先来看一段代码：
let a = 1;
let b = 2;
let c = (a++, b++);
console.log(a, b, c); // 执行结果是 2 3 2
// 再看这个
if(true, false, true){alert('hi')}
在第一个例子里，给 c 赋值时，括号内的 a 和 b 都会自增，但 c 最终只取最后一个表达式 b++ 的值。这里 b++ 返回的是自增前的值 2，所以 c 就是 2。a 和 b 则分别变成了 2 和 3。第二个例子中，if 的条件部分顺次执行了几个表达式，最终返回最后一个 true，于是成功弹窗 'hi'。是不是有点反直觉？
说实话，绝大部分人从未刻意用过逗号操作符，甚至压根不知道它的存在。这个知识点过于冷门，存在感极低，但也正是因为它，衍生出不少让人挠头的 Bug，坑过许多人。
这里要特别注意一个概念混淆的坑。我们在 JS 数组里见的逗号，比如 [3, 6, 2, 5]，那叫数组元素分隔符。函数参数里的逗号，比如 setName(id, 'Tom')，那是参数分隔符。而我们今天要聊的这个，是出现在表达式里（通常被括号包裹）的逗号操作符。三者情景不同，性质也完全不同，可别弄混了。
核心用法揭秘
说到底，规则其实很直白：
a = (expr1, expr2, expr3, ..., exprN);
console.log(a); // 输出 exprN 的值
在括号内部，你可以用逗号串联起任意多个表达式。运行时会按从左到右的顺序依次执行它们，但最终只返回最右边那个表达式的结果。这个特性在真实业务中极少露脸——毕竟会引入隐式逻辑，一眼看去很难理解，自然用得少。但在面试环节，它可就成了一个有趣的考点。
来看看网上找的这个例子，没接触过的人大概率会懵：
if(a = 1, b = 2, c < 0){
console.log('ok');
}
这段代码到底在干啥？其实它等同于：
a = 1;
b = 2;
if(c < 0){
console.log('ok');
}
先执行了 a = 1 和 b = 2，然后条件判断只看最后一个 c < 0 的值。
那么它最常在哪出现呢？你可能在学习和阅读源码时，无意识地已经用过它了——在 for 循环里。可以说，逗号操作符 这个语法很大程度上就是为 for 循环而设计的。比如这种常见写法：
for (let i = 0, j = 80; i < j; i++, j--) {
console.log(i, j);
}
看，初始化部分 let i = 0, j = 80 中的逗号，以及循环末尾 i++, j-- 里的逗号，都是它的典型应用。怎么样，是不是有种恍然大悟的感觉？
当然，还有一些更“丧心病狂”的玩法：
const func = () => {
let a = 7;
return a, 10; // 没想到吧，最后 return 的是 10
}
这行代码能把读源码的人吓一激灵。函数内部明明修改了 a 为 7，但由于 return 后面跟的是逗号表达式，最终返回的是逗号后面的 10。
参考链接：
发表于 1 小时前
|
查看: 3|
回复: 0
