JS中的逗号运算符(,)

逗号运算符

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

逗号表达式:

        一般形式:表达式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: '非正式'}

可以看出这样也是可以得到我们想要求的值,但是如何让这些代码一行就能达到效果呢?

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

et newArr= arr.reduce((acc,item)=> (acc[item.id]=item.value, acc),{})
console.log(newArr);
这里我们输出打印的值也一样可以得到我们需求的值 {1: '正式', 2: '非正式'}

从上述例子可以发现,逗号运算符可以简化代码,不过可读性差

  • 12
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值