逗号(,)运算符在Javascript中

时间:2023-02-08 18:10:09

逗号运算符
逗号运算符是二元运算符,它能够先执行运算符左侧的操作数,然后再执行右侧的操作数,最后返回右侧操作数的值。

逗号表达式:
一般形式:表达式1,表达式2,表达式3,......表达式n

求解过程:先计算表达式1的值,再计算表达式2的值,......一直计算到表达式n的值。最后整个表达式的值是表达式n的值。

逗号运算符可以实现连续运算,如多个变量连续赋值。

var a=1 , b=2 , c=3

相当于:
var a=1
var b=2
var c=3
与条件运算符、逻辑运算符根据条件来决定是否执行所有或特定操作数不同的是,逗号运算符会执行所有的操作数,但并非返回所有操作数的结果,它只返回最后一个操作数的值。

a = (b = 1,c = 2); //连续执行和赋值
console.log(a); //返回2
console.log(b); //返回1
console.log(c); //返回2
在上面的代码中,a 的值是运算符之后得出的,通过第二个操作数 c=2 赋值得到的,第一个操作数的表达式被执行了但执行结果没有返回

逗号运算符可以作为仅需执行表达式的工具,这些表达式不需要返回值,但必须要运算。在特定环境中,可以在一个表达式中包含多个子表达式,通过逗号运算符让它们全部执行,而不用返回结果。

1. for循环中逗号运算符
逗号运算符的常见用法是在for循环的增量表达式中使用。例如:

var i,j=5,k;
for(i=0; i<10; i++,j++) {
k = i + j;
}
每次通过循环时,for语句只允许执行单个表达式,但逗号运算符可以将多个表达式当成单个表达式执行,因此这两个变量都递增

2. 逗号运算符与函数调用运算符的冲突
在JavaScript中函数调用可以称之为函数调用运算符。

函数调用运算符将计算它的每一个运算数,第一个运算数指定为函数名(括号前),而括号中的所有运算数的值将传递给这个函数作为参数。

以下面代码为冲突举例:

alert(2,5); //2
alert((2,5)); //5
只是在 alert 里多加了一个括号就是完全不同的意思

由于逗号运算符在JavaScript中的优先级是最低的,因此函数运算符将先于逗号运算符运行,上述代码中第一个alert函数弹出2。 解决方法如第二个alert函数所示,加上括号,保证逗号运算符先运行。

再看几个例子,略为奇葩了:

let arr = [{ id: 1, value: '正式' }, { id: 2, value: '非正式' }]

当我们的需要将arr的值处理成为{1: '正式', 2: '非正式'}的时候
按照我们正常的写法来说,用reduce方法是最合适不过的。

let newArr= arr.reduce((acc,item)=>{
acc[item.id]=item.value
return acc
},{})
console.log(newArr);

这时我们打印输出newArr得到的值就是 {1: '正式', 2: '非正式'}
可以看出这样也是可以得到我们想要求的值,但是如何让这些代码一行就能达到效果呢?

用逗号运算符就可以了,但是太奇葩,一般还是不建议使用。。。

let newArr= arr.reduce((acc,item)=> (acc[item.id]=item.value, acc),{})
console.log(newArr);
这里我们输出打印的值也一样可以得到我们需求的值 {1: '正式', 2: '非正式'}
从上述例子可以发现,逗号运算符可以简化代码,不过可读性差