JavaScript - 逗号运算符



JavaScript 逗号运算符

JavaScript 中的逗号运算符 (,) 从左到右计算倍数表达式。您可以将 left 表达式的结果值用作 right 表达式的输入。计算所有表达式后,它将返回最右侧表达式的结果值。

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

语法

应遵循以下语法使用逗号表达式来计算多个表达式。


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

返回值

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

例子

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

示例:带字符串的逗号运算符

在下面的示例中,我们在大括号中添加了 4 个逗号分隔的字符串。在这里,每个字符串都用作表达式。该代码将评估字符串并返回最后一个字符串。在输出中,你可以看到它打印了 '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: "QikepuCom",
	 	age: 10,
	 	... other properties
}

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


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

将参数的多个参数传递到函数中。


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

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

导入或导出


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

解构对象数组。


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

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


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