JS里一个很少人知道的逗号操作符用法

更新日期: 2026-04-30 阅读: 10 标签: 操作符

你看过这样的代码吗?

let a = 1;
let b = 2;
let c = (a++, b++);
console.log(a, b, c);

先不说结果,你猜猜a、b、c最后是多少?

答案是2、3、2。


这是怎么回事?

括号里面的逗号就是今天要说的逗号操作符。它会把里面的表达式从左到右一个个执行,然后返回最后一个表达式的结果。

所以上面那段代码的执行顺序是:

  1. 执行a++,a从1变成2

  2. 执行b++,b从2变成3

  3. 把b++的结果(也就是加之前的2)赋值给c

c拿到的是b自增前的值,所以c等于2。

再看个例子:

if(true, false, true) {
    alert('hi')
}

这个if判断会依次执行true、false、true,最后取最后一个值true,所以条件成立,会弹出提示框。


注意别搞混

JS里的逗号有三种用法,别弄混了:

  1. 数组里的逗号是分隔符:[3, 6, 2, 5]

  2. 函数参数里的逗号也是分隔符:setName(id, 'Tom')

  3. 今天说的逗号操作符,是在表达式里面用的,通常要写在括号里

只有括号里的才是逗号操作符,其他地方的都是分隔符。


逗号操作符的规律

说起来很简单:

a = (表达式1, 表达式2, 表达式3, ... , 最后一个表达式);
console.log(a);  // 打印出来的是最后一个表达式的结果

括号里的表达式会按顺序一个个执行,但最后只返回最后一个的值。


一个容易看懵的例子

我在网上看到过这样的代码:

if(a = 1, b = 2, c < 0){
    console.log('ok');
}

不熟悉的人可能一头雾水。其实这段代码就等于:

a = 1;
b = 2;
if(c < 0){
    console.log('ok');
}

先把a和b赋值,再用c去判断条件。


这东西有什么用?

说实话,日常工作里很少会主动用逗号操作符。因为它不太直观,别人看代码时要反应一下才知道什么意思。

但有一个地方你可能早就用过了,只是没注意。

for循环

for (let i = 0, j = 80; i < j; i++, j--) {
  console.log(i, j);
}

这里的i++, j--就用到了逗号操作符。每次循环结束,i加1,j减1,两个操作都会执行。

这个写法很常见,很多人每天都在用,只是没意识到这就是逗号操作符。


一个坑人的写法

看这个函数:

const func = () => {
    let a = 7;
    return a, 10;
}

你觉得返回什么?

很多人以为返回a,也就是7。但逗号操作符会返回最后一个值,所以实际返回的是10。

这种写法特别容易坑人,看到的人可能要愣一下才能反应过来。所以写代码时最好不要这样用,容易给看代码的人添麻烦。


总结

逗号操作符就是用来在一个表达式里执行多个操作,然后只取最后一个的结果。

虽然平时不常用,但知道这个知识点有两个好处:

  1. 看别人代码时不会懵,特别是for循环里的写法

  2. 面试时如果被问到,能答得上来

不过写代码的时候建议别故意用这种写法。代码是给人看的,越清楚越好,没必要为了省一行代码让别人看得费劲。

本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://fly63.com/article/detial/13738

相关推荐

TypeScript typeof 操作符

在 TypeScript 中, typeof 操作符可以用来获取一个变量或对象的类型。在上面代码中,我们通过 typeof 操作符获取 sem 变量的类型并赋值给 Sem 类型变量,之后我们就可以使用 Sem 类型

ES新提案:双问号操作符

本文主要讲Gabriel Isenberg撰写的ES提案“Nullish coalescing for JavaScript”。 它提出?? 替换||的运算符,并提供默认值。这里先把这相提案叫作双问号操作符,双问号 ?? 的操作符跟 || 类似,如果给定变量值为 null 或者 undefined

JavaScript剩余操作符Rest Operator

剩余操作符和展开操作符的表示方式一样,都是三个点 \\\'...\\\',但是他们的使用场景会不同。定义函数的时候,如果函数的参数以… 为前缀,则改参数是剩余参数(rest parameter)。剩余参数表示参数个数不确定的参数列表

一文读懂TS in操作符

上述代码规定 staffCount 是一个对象,属性名为 roles 约束的三个,值为 number 类型:类型变量 k,以此绑定到对象的每一个属性,遍历三个字符串字面量组成的联合类型 roles,number 为每个属性的值的类型

js操作符拾遗

对于js操作符的一些特性和有趣题目的整理。逗号操作符有两个作用,一个是用于当你想要在期望一个表达式的位置包含多个表达式时,可以使用逗号操作符。

ES6 展开操作符的几个妙用

ES6 新增了...操作符,通常用于在函数中提取剩余参数和展开数组。但其实它的用途不止于此,本文就介绍几个技巧,用它来操作 JavaScript 对象。复制对象的同时,为其添加新的属性。例子中复制了user对象到userWithPass,并添加了 password 属性。

delete操作符

delete操作符用于删除对象的某个属性;如果没有指向这个属性的引用,那它最终会被释放。对于所有情况都是true,除非属性是一个自己不可配置的属性,在这种情况下

JS 中强大的操作符

JS 里的操作符大家每天都在使用,还有一些 ES2020、ES2021 新加的实用操作符,这些共同构成了 JS 灵活的语法生态。本文除介绍常用的操作符之外

TS typeof 操作符原来有这 5 种用途!

这是一个普通的 JavaScript 对象,在 TypeScript 中你可以使用 type 或 interface 来定义该对象的类型。有了该对象类型之后,你就可以利用 TypeScript 内置的工具类型

Js中经常被忽略的两个神奇操作符?. 和 ??

?.和??估计是Javascript两个最为有用并且最经常被忽略的操作符了。这两个操作符最大的作用,就是对于undefined和null的应对,在没有lodash等库的情况下,直接桶过Javascript自身的机制就可以很大的程度上提高程序的健壮性。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!