逗号在 JavaScript 表达式中起什么作用?
在本教程中，我们将讨论逗号在 JavaScript 表达式中起什么作用。
逗号是 JavaScript 中的运算符，它在评估表达式中的所有操作数时返回最后一个操作数。评估是从左到右的方向。
在复合表达式中，最右边操作数的值是表达式的结果。
我们在 for 循环中使用逗号来提供多个参数。逗号运算符与数组、对象、函数参数和参数中的逗号完全不同。
在 JavaScript 表达式中使用逗号运算符
语法
var test = expr1, expr2
在语法中，变量 test 获取 expr2 的值。
示例 1
在此示例中，逗号运算符返回最右边的操作数值。在下面的最后一个表达式中，发生了预增量操作。函数返回操作数 x 的值，同时并行进行表达式求值
<html> <head> <script type = "text/javascript"> function evalExpr() { var commaBtn = document.getElementById("commaBtnWrap"); var commaOut = document.getElementById("commaOut"); var commaStr = ""; let p = 2; p = (p++, p);//2 3, 2 commaStr += "p=2 (p++,p) <b>returns p=" + p + "</b><br><br>"; let a = (1, 4); commaStr += "a=(1,4) <b> returns a=" + a + " </b><br><br>"; let x, b, c; x = b = 3, c = 4; commaStr += "x = b = 3, c = 4 <b>returns x=" + x + "</b></br><br>"; let m, n, o; m = (n = 5, o = 6); commaStr += "m = (n = 5, o = 6) <b>returns m="+ m + "</b><br><br>"; let g = 0; commaStr += "g=0 (g += 1, g) <b>returns " + (g += 1, g) + "</b>"; commaOut.innerHTML = commaStr; } </script> </head> <body> <h2>Using Comma Operator in JavaScript Expressions<i></h2> <div id = "commaBtnWrap"> <p>Click the button</p> <button onclick = "evalExpr()">Click Me</button> </div> <div id = "commaOut"></div> </body> </html>
示例 2
在下面的代码片段中，one() 开始执行并将"function one"打印到控制台。接下来的 two() 开始执行并将"function 2"打印到控制台。最后，three() 开始执行并打印"function 3"。这里函数返回 3，因为它是表达式中最右边的操作数。
<html> <head> <script type = "text/javascript"> function evalExprFn() { var commaFnBtn = document.getElementById("commaFnBtnWrap"); var commaFnOut = document.getElementById("commaFnOut"); var commaFnStr = ""; // commaFnBtn.style.display = "none"; function one() { commaFnStr += "function one<br>"; return 1; } function two() { commaFnStr += "function two<br>"; return 2; } function three() { commaFnStr += "function three<br>"; return 3; } var p = (one(), two(), three()); commaFnStr += p; commaFnOut.innerHTML = commaFnStr; } </script> </head> <body> <h2>Using commas in function calls</h2> <div id = "commaFnBtnWrap"> <p>Click the button</p> <button onclick = "evalExprFn()">Click Me</button> </div> <div id = "commaFnOut"> </div> </body> </html>
在下面的代码片段中，我们明确地写了表达式。这样可读性更强，如果我们像这样练习，代码就很容易理解。
let x = 10; x++; let y = x + 1; console.log(x, y);//11 11
在 for 循环中使用逗号运算符
在此代码中，我们使用逗号进行循环。
示例
在这里，首先，我们在赋值部分使用逗号运算符，然后在递增递减部分使用逗号运算符。在第一部分中分配 i=0 和 j=2。然后我们增加 i 值并减少 j 值。
<html> <head> <script type = "text/javascript"> function evalExprFor() { var commaForBtn = document.getElementById("commaForBtnWrap"); var commaForOut = document.getElementById("commaForOut"); var commaForStr = ""; for(let i = 0, j = 2; i <= 2; i++, j--) { commaForStr += ('i = ' + i + ', j= ' + j); commaForStr += "<br>"; } commaForOut.innerHTML = commaForStr; } </script> </head> <body> <h2>Using commas in a for a loop.</h2> <div id = "commaForBtnWrap"> <p>Click the button</p> <button onclick = "evalExprFor()"> Click Me </button> </div> <div id = "commaForOut"> </div> </body> </html>
其他用途
- 一起声明多个变量。var x = 0, y = 0, z = 0;
- 列出数组中的元素。
[19, 40, 80,]
- 分离对象的属性。
{ min: 0, max: 100
- 定义多个函数参数。
function add(a, b) { return a + b;
- 调用具有多个参数的函数。
add(20, 60)
- 解构数组。
const [lower, upper] = [0, 1];
- 解构对象。
const { big, small } = { big: 100, small: 0 };
- 导入多个模块成员。
import { open, close } from "fs";
- 导出多个模块成员。
export { mkdir, rmdir };
在本教程中，我们讨论了 JavaScript 表达式中逗号的用途。逗号运算符在 JavaScript 编程中也有不同的用途。
