JavaScript 逗号运算符

JavaScript 中的逗号运算符 (,) 从左到右评估多个表达式。您可以将左边表达式的结果值作为右边表达式的输入。在评估完所有表达式后，它返回最右边表达式的结果值。

然而，逗号运算符也被用于 'for' 循环、数组、对象等中。在本章中，您将了解逗号运算符的所有使用情况。

语法

您应该按照以下语法使用逗号表达式来评估多个表达式：

var answer = (exp1, exp2, exp3, ex4, ...);

返回值

它仅返回最后一个表达式的结果值。

示例

让我们通过一些例子详细了解 JavaScript 逗号运算符。

示例：逗号运算符与字符串

在下面的示例中，我们在大括号内添加了四个由逗号分隔的字符串。这里，每个字符串都作为一个表达式工作。代码将评估字符串并返回最右边的字符串。在输出中，您可以看到它打印了 'CSS'，因为它是最右边的字符串。

<html>
<body>
    <p id="output"></p>
    <script>
        let output = document.getElementById("output");
        let ans = ("JavaScript", "Python", "HTML", "CSS");
        output.innerHTML = "The value of the ans variable is: " + ans;
    </script>
</body>
</html>

示例：逗号运算符与表达式

在下面的示例中，我们定义了变量 'a' 并将其初始化为 5。在 'ans' 变量中，我们存储了逗号运算符返回的结果值。第一个表达式将 a 更新为 8，第二个表达式将 a 的值加 1，第三个表达式将 2 加到更新后的变量 'a' 的值上。

'ans' 的值是 11，这是由逗号运算符的最右边表达式返回的。

<html>
<body>
    <p id="output"></p>
    <script>
        let output = document.getElementById("output");
        let a = 5;
        let ans = (a = 8, a++, a += 2);
        output.innerHTML = "The value of the ans variable is: " + ans;
    </script>
</body>
</html>

示例：逗号运算符与函数

在下面的示例中，我们定义了 first() 和 second() 函数。同时，根据函数名从函数返回值并打印消息。

我们使用逗号运算符来执行多个函数。在输出中，您可以看到它调用了两个函数，但只打印了来自 second() 函数的返回值。

<html>
<body>
    <p id="output"></p>
    <script>
        let output = document.getElementById("output");
        function first() {
            output.innerHTML += "The first function is called! <br/>";
            return 1;
        }

        function second() {
            output.innerHTML += "The second function is called! <br/>";
            return 2;
        }

        let ans = (first(), second());
        output.innerHTML += "The value of the ans variable is: " + ans;
    </script>
</body>
</html>

逗号运算符的其他用法

在同一行定义多个变量。

let m = 1, n = 2, x = 3;

用多个元素初始化数组。

const arr = [10, 20, 30, 40, 50, 60];

定义具有多个属性的对象。

const obj = {
   name: "tutorialspoint",
   age: 10,
   // 其他属性...
}

在每次迭代中使用逗号运算符 for 循环初始化或更新多个变量。

for(let p = 0, q = 1; p < n; p++, q++) {
 // 循环代码
}

将多个参数或参数传递给函数。

function func(param1, param2, ...) {  
 // 函数代码
}

// 或者
func(10, 20, 30, ...);

导入或导出模块。

import { func2, variable } from './module2.js';

// 或者
export {func1, variable, num};

解构数组或对象。

let [a, b, c] = [34, 72, 23];

在控制台中打印多个变量。

console.log(a, b, c); // a, b, 和 c 是变量。