JavaScript 表达式中的逗号有什么作用？答案

【问题标题】：What does a comma do in JavaScript expressions?JavaScript 表达式中的逗号有什么作用？
【发布时间】：2020-02-15 07:12:43
【问题描述】：

如果我使用：

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); } ; 解释器必须知道函数是如何被使用的，才能知道它需要多少个参数。相反，它会评估所有内容。

标签： javascript comma-operator

【解决方案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】：

逗号运算符评估两者它的操作数（从左到右）和返回second 的值操作数。

https://stackoverflow.com/a/3561056/5934465

应该是这样的！

逗号运算符计算其每个操作数（从左到右）并返回last 操作数的值。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comma_Operator

【讨论】：

逗号操作符有两个操作数，所以原来的引用是正确的。您在谈论的是嵌套此类表达式的最终结果，但这意味着您的替换引用被巧妙地误用了。 a,b,c,d 是 ((((a),b),c),d)

【解决方案6】：

看看here - 逗号代表多个表达式/语句。例如，在您的代码中，您可以使用这样的一行：

var a=0, b=0, c=0;

这将声明所有三个变量而无需编写：

var a=0;
var b=0;
var c=0;

希望对您有所帮助。

【讨论】：

有点老了，但需要注意的是：（1）您提供的示例没有使用逗号运算符（var 声明不使用逗号运算符 i>，即使它是一个逗号）和（2）你不能使用逗号运算符分隔语句；只允许使用表达式。