Javascript 简明教程

JavaScript - Comma Operator

JavaScript Comma Operator

JavaScript 中的 comma 运算符（，）从左到右求值多个表达式。你可以将左侧表达式的结果值用作右侧表达式的输入。在求值完所有表达式后，它将返回最右侧表达式的结果值。

The comma operator (,) in JavaScript evaluates the multiple expression from left to right. You can use the resultant value of the left expression as an input of the right expression. After evaluating all expressions, it returns the resultant value of the rightmost expression.

但是，逗号运算符也用于“for”循环、数组、对象等。在本章中，你将学习逗号运算符的所有用例。

However, the comma operator is also used in the 'for' loop, array, object, etc. In this chapter, you will learn all the use cases of the comma operator.

Syntax

你应当遵循以下语法，使用逗号表达式来求值多个表达式。

You should follow the below syntax to use the comma expression to evaluate multiple expressions.

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

Return value

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

It returns the resultant value of the last expression only.

Examples

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

Let’s understand the JavaScript comma operator in details with the help of some exmaples

Example: The Comma Operator with Strings

在下面的示例中，我们在花括号中添加了 4 个逗号分隔的字符串。在此处，每个字符串都作为表达式。代码将评估字符串并返回最后一个字符串。在输出中，可以看到它打印了“CSS”，因为它是最右边的字符串。

In the example below, we have added the 4 comma seprated strings in the braces. Here, each string works as an expression. The code will evaluate the string and return the last string. In the output, you can see that it prints the 'CSS' as it is the rightmost string.

<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>

Example: The Comma Operator with Expressions

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

In the example below, we have defined the variable 'a' and initialized it with 5. In the 'ans' variable, we store the resultant value the comma operator returns. The first expression updates the value of a to 8, the second expression increments the value of a by 1, and the third expression adds 2 to the updated value of the variable 'a'.

“ans”的值为 11，其由逗号运算符的最右边的表达式返回。

The value of the 'ans' is 11, which is returned by the rightmost expression of the comma operator.

<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>

Example: The comma operator with functions

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

In the example below, we have defined the first() and second() functions. Also, it prints the message and returns the value from the function according to the function name.

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

We use the comma operator to execute the multiple functions. In the output, you can see that it invokes both functions but prints the returned value from the second() function only.

<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>

Other Use Cases of The Comma Operator

用于在单行中定义多个变量。

For defining the multiple variables in a single row.

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

用于用多个元素初始化数组。

To initialize the array with multiple elements.

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

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

For defining the object with multiple properties.

const obj = {
   name: "tutorialspoint",
   age: 10,
   ... other properties
}

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

You can use the comma operator for loop to initialize or update multiple variables in each iteration.

for(let p = 0, q = 1; p < n; p++, q++) {
 // Code for the loop
}

用于将多个参数传递给函数。

To pass multiple parameters of arguments into the functions.

function func(param1, param2, ... ) {
 // function code
 }

OR
func(10, 20, 30, ...);

用于导入或导出

To import or export

import { func2, variable } from './module2.js';
OR
export {func1, variable, num};

用于解构数组或对象。

To destructure arrays of objects.

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

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

To print multiple variables in the console.

console.log(a, b, c) // a, b, and c are variables.