JavaScript 表达式中的逗号有啥作用？

Posted 2023-02-21

技术标签:

【中文标题】JavaScript 表达式中的逗号有啥作用？【英文标题】：What does a comma do in JavaScript expressions?JavaScript 表达式中的逗号有什么作用？ 【发布时间】：2011-04-03 10:15:27 【问题描述】：

如果我使用：

1.09 * 1; // returns "1.09"

但如果我使用：

1,09 * 1; // returns "9"

我知道 1,09 不是数字。

最后一段代码中的逗号有什么作用？

更多示例

if (0,9) alert("ok"); // alert
if (9,0) alert("ok"); // don't alert

alert(1); alert(2); alert(3); // 3 alerts
alert(1), alert(2), alert(3); // 3 alerts too

alert("2",
    foo = function (param) 
        alert(param)
    ,
    foo('1')
)
foo('3'); // alerts 1, 2 and 3

【问题讨论】：

我很惊讶 09 并没有因为八进制文字中的非法 '9' 而失败。 @recursive - 八进制表示中的任何 9 都会导致回退到十进制。不要混淆参数列表中的逗号。 alert 只接受一个参数。之后的任何内容都将被丢弃。 @Andrew：是的，被 alert() 丢弃了，它只接受一个参数，但它会被运行！这很奇怪。谢谢。 @Topera：如果您从 JS 的角度考虑，这并不奇怪。在 JS 中，您不必在函数声明中指定参数列表（您可以改用 arguments 对象，它可以是任意长度）。即使使用现代编译的 JS，也无法提前知道函数需要多少参数。考虑一下：function test() args=[]; for (var i = 0; i < arguments.length; i++) args.push(arguments[i] + 1); ; 解释器必须知道函数是如何被使用的，才能知道它需要多少个参数。相反，它会评估所有内容。 【参考方案1】：

特定语法允许您功能性地烘烤面包并将其交给客户食用，而无需returns。

(new Array(3)).fill()
.map(()=>(state:"dough", bake()this.state="baked", consume()this.state="consumed"))

.map(bread=>(console.log(`Adding $bread.state to oven.`), bread.bake(), bread))
.map(bread=>(console.log(`Consuming $bread.state bread.`), bread.consume(), bread))
.map(bread=>console.log(`Bread is now $bread.state.`))

Adding dough to oven.
Adding dough to oven.
Adding dough to oven.
Consuming baked bread.
Consuming baked bread.
Consuming baked bread.
Bread is now consumed.
Bread is now consumed.
Bread is now consumed.

【讨论】：

【参考方案2】：

逗号运算符同时计算它的操作数（从左到右）和返回第二个的值操作数。

来源： https://developer.mozilla.org/en/javascript/Reference/Operators/Special_Operators/Comma_Operator

例如，表达式1,2,3,4,5 的计算结果为5。显然，逗号操作符只对有副作用的操作有用。

console.log(1,2,3,4,5);
console.log((1,2,3,4,5));

【讨论】：

他们从 C 中得到它。我认为它只对有副作用的表达式有用。我想不出很多使用逗号操作符来产生任何影响但保存字符（缩小）或混淆代码的情况。 @user17753 它可以在for 循环的分号分隔部分合法使用。 @Cyoce：虽然这是真的，但一般来说，这种逻辑在循环体中执行得更清楚。然后有些人会声称他们的方式允许多个continue 点而不重复，但是你不应该有多个continue 点。 @user17753 你有钱了；试图理解一小段缩小代码的 sn-p 就是我在这里的原因【参考方案3】：

还有一些需要考虑：

console.log((0, 9));
console.log((9, 0));
console.log(("foo", "bar"));

【讨论】：

@Andrew：糟糕，我已经用我打算使用的内容更新了我的答案。逗号运算符计算其每个操作数（从左到右）并返回last 操作数的值。【参考方案4】：

向对象添加/修改属性并在同一行中返回它是一种可能的用例：

console.log(
  ((x) => (o = biggerCond: r => r >= x,
           o.r5 = Array.from(window.crypto.getRandomValues(new Uint16Array(5))),
           o.isAnyBigger = o.r5.some(o.biggerCond),
           o.bigger = o.isAnyBigger ? o.r5.filter(o.biggerCond) : [x], o )
  )(5e4)
);
// Example
// 
//   bigger: [58414, 56500, 63397],
//   isAnyBigger: true,
//   isBiggerCond: r => r >= x,
//   r5: [58414, 12015, 56500, 63397, 43861]
//

上述匿名函数返回一个具有大于输入值的随机值的对象，或者，如果没有，则输入值本身位于一个数组中，该数组包含在bigger 属性中。

它仍然是语法糖（如arrow functions），但它确实缩短了行数......我想知道一些JS minifiers是否会以类似的方式自动检测和调整代码。在控制台中运行它：

((x)=>(o=biggerCond:r=>r>=x,o.r5=Array.from(window.crypto.getRandomValues(new Uint16Array(5))),o.isAnyBigger=o.r5.some(o.biggerCond),o.bigger=o.isAnyBigger?o.r5.filter(o.biggerCond):[x],o))(5e4)

【讨论】：

但是你当然不会把这么神秘的咒语放到生产代码中，对吧？ @LightnessRacesinOrbit 好吧，我会说这取决于目的（例如教学、缩短代码、没有变量/函数声明等）。如果你像我上面那样缩进它，它是完全可读的......不能停止注意到你使用了“神秘”这个词:) 嘿，这不是故意的?【参考方案5】：