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

逗号表达式:
一般形式:表达式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: '非正式'}
从上述例子可以发现,逗号运算符可以简化代码,不过可读性差

逗号(,)运算符在Javascript中的更多相关文章

  1. JavaScript中的逗号运算符

    JavaScript逗号运算符  阅读本文的前提,明确表达式.短语.运算符.运算数这几个概念. 所谓表达式,就是一个JavaScript的“短语”,JavaScript解释器可以计算它,从而生成一个值 ...

  2. JavaScript中:表达式和语句的区别

    JavaScript中:表达式和语句的区别 Javascript语言精粹:表达式是由运算符构成,并运算产生结果的语法结构.程序是由语句构成,语句则是由“:(分号)”分隔的句子或命令.如果在表达式后面加 ...

  3. JavaScript 中表达式和语句的区别

    1.语句和表达式 JavaScript中的表达式和语句是有区别的.一个表达式会产生一个值,它可以放在任何需要一个值的地方,比如,作为一个函数调用的参数.下面的每行代码都是一个表达式: myvar3 + ...

  4. javascript中运算符的优先级

    运算符优先级 JavaScript中的运算符优先级是一套规则.该规则在计算表达式时控制运算符执行的顺序.具有较高优先级的运算符先于较低优先级的运算符执行.例如,乘法的执行先于加法. 下表按从最高到最低 ...

  5. 浅谈JS中逗号运算符的用法

    阅读本文的前提是,你能区分什么是表达式,什么是语句.还有明确运算符和运算数都是些啥东西.所谓的表达式就是一个JavaScript的"短语",JavaScript的解释器可以计算它, ...

  6. JS中逗号运算符的用法

    逗号运算符,它将先计算左边的参数,再计算右边的参数值.然后返回最右边参数的值. 原书举的例子不太好,无法解释上面那句话,这里另外提供一个: var a = 10, b = 20; function C ...

  7. c语言中逗号运算符和逗号表达式

    原文:c语言中逗号运算符和逗号表达式 C语言提供一种特殊的运算符——逗号运算符.用它将两个表达式连接起来.如: 3+5,6+8称为逗号表达式,又称为“顺序求值运算符”.逗号表达式的一般形式为 表达式1 ...

  8. JS逗号运算符的用法详解

    逗号运算符的用法详解 注意: 一.由于目前正在功读JavaScript技术,所以这里拿JavaScript为例.你可以自己在PHP中试试. 二.JavaScript语法比较复杂,因此拿JavaScri ...

  9. javascript中的感叹号 "!"

    JavaScript中会经常遇到一个操作符:! 这是一个布尔操作符,用于将操作的值强制转换为布尔值并取反.常用场景如下: //条件判断中使用 var a; var b=null; if(!a){ co ...

  10. 深入理解javascript 中的 delete(转)

    在这篇文章中作者从<JavaScript面向对象编程指南>一书中关于 delete 的错误讲起,详细讲述了关于 delete 操作的实现, 局限以及在不同浏览器和插件(这里指 firebu ...

随机推荐

  1. costool - 腾讯云cos快捷工具。

    目录 使用截图 使用方法 配置文件 安装方法 其他 一个腾讯云cos(对象存储)非官方快速上传和下载的工具,使用官方go-sdk二次开发.可以用于以下场景. 备份一些配置文件,比如.bashrc .v ...

  2. 【Azure 环境】把OpenSSL生产的自签名证书导入到Azure Key Vault Certificate中报错

    问题描述 通过本地生成的自签名证书导入到Azure Key Vault Certificate报错. 错误信息 the specified PEM X.509 certificate content ...

  3. 学习ASP.NET Core Blazor编程系列十——路由(上)

    学习ASP.NET Core Blazor编程系列一--综述 学习ASP.NET Core Blazor编程系列二--第一个Blazor应用程序(上) 学习ASP.NET Core Blazor编程系 ...

  4. webpack -- element-ui 的按需引入

    简单说明原理: 使用babel-plugin-component实现按需引入.打包.将webpack配置成多入口,保证最终打包的目录结构符合babel-plugin-component插件的要求,实现 ...

  5. 7 款殿堂级的开源 CMS(内容管理系统)

    最近,有读者留言让我推荐开源 CMS.我本想直接回复 WordPress,但是转念一想我玩 WordPress 是 2010 年左右的事情了,都过去十年了,它会不会有些过时呢?有没有新的.更好玩的开源 ...

  6. 【Logback+Spring-Aop】实现全面生态化的全链路日志追踪系统服务插件「Logback-MDC篇」

    日志追踪 日志追踪对于功能问题的排查和数据流转的路径分析时非常重要的,有了全链路日志追踪体系机制可以非常有效且快速的定位问题,但在多线程环境中,若没有相关成熟的框架的支持,想要实现日志追踪,就需要手动 ...

  7. JSP利用AJAX实现页面即时校验验证码

    在JSP页面实现验证码校验文章中当时是使用的Servlet类来进行的验证码校验,但是这种方式并不能即时校验,在正常情况下都是直接在用户输入之后就进行校验,这样对用户来说很方便的. AJAX 即&quo ...

  8. apt-mirror 制作麒麟桌面版内网源

    apt-mirror 制作麒麟桌面版内网源 一.修改apt软件安装源 1.修改source.list安装源 vi /etc/apt/sources.list 添加: deb http://archiv ...

  9. c++题目:数迷

    c++题目:数迷 题目 [题目描述] 给出含有N×N个格子的正方形表格,要求每个格子都填上一个个位数(范围1-N),使得每行.每列以及同一斜线上的数字都不同.部分格子已经填好数字.求满足题意的方案数. ...

  10. 春秋云境 CVE-2022-24663复现

    靶标介绍: 远程代码执行漏洞,任何订阅者都可以利用该漏洞发送带有"短代码"参数设置为 PHP Everywhere 的请求,并在站点上执行任意 PHP 代码.P.S. 存在常见用户 ...