副队长JavaScript教程(20)–三元运算符、逗号运算符

点此查看 所有教程、项目、源码导航

文章目录

  • [1. 前言](#1. 前言)
  • [2. 三元运算符](#2. 三元运算符)
  • [3. 逗号运算符](#3. 逗号运算符)
  • [4. 小结](#4. 小结)

1. 前言

前面我们已经学习了算术、赋值、比较、逻辑运算符。

本篇再来认识两个比较有特点的运算符:逗号运算符和三元运算符。

其中三元运算符在开发中使用频率较高,逗号运算符相对少见,我们一起了解它们的用法。

2. 三元运算符

三元运算符也叫条件运算符,它是 JS 里面唯一一个需要三个操作数的运算符。

语法格式:

js 复制代码
条件 ? 表达式1 : 表达式2

执行规则:

先判断条件,如果条件为 true,执行并返回表达式 1;如果条件为 false,执行并返回表达式 2。

js 复制代码
let age = 18;
let res = age >= 18 ? "成年" : "未成年";
console.log(res);

代码解释:

判断 age >= 18,条件成立,所以返回冒号前面的字符串成年,最后赋值给 res。

三元运算符可以简单实现二选一的判断,用来替代简单的 if 判断,代码写起来更加精简。

注意:三元运算符适合简短的判断逻辑,复杂的分支不推荐使用,可读性会变差。

3. 逗号运算符

逗号运算符使用 , 表示,可以用来依次执行多个表达式,最终只会返回最后一个表达式的结果。

js 复制代码
let a;
let b = (a = 10, a + 20);
console.log(b);

代码解释:

括号里面是逗号运算,先执行 a = 10,再执行 a + 20,逗号运算符最终取最后一个表达式的值,也就是 30,赋值给 b。

重点说明:

逗号运算符优先级很低,很多时候需要用小括号包裹起来,否则不会当成逗号运算符解析。

日常开发中逗号运算符用的不多。

4. 小结

  1. 三元运算符 条件 ? 表达式1 : 表达式2,用于二选一判断,条件成立取前面的值,不成立取后面的值。
  2. 逗号运算符 , 会顺序执行多个表达式,整个运算的结果是最后一个表达式的值。
  3. 三元运算符日常写代码经常使用;逗号运算符使用场景有限,了解即可,不要滥用,容易让代码难以读懂。
相关推荐
用户84298142418109 分钟前
ByteJS,让重要的 JavaScript 以字节码运行。
javascript
FungLeo2 小时前
成为全栈·Vue 管理后台篇·Vue Router如何守住多角色后台边界
前端·javascript·vue.js·rbac·vue router·路由守卫·前端权限
FungLeo3 小时前
成为全栈·Vue管理后台篇·仪表盘不是几张卡片:组合统计接口与角色视图
前端·javascript·vue.js·rbac·仪表盘·管理后台·tanstack query
程序员大阳3 小时前
HTML+CSS+JS对话式实战(7)-学生端活动报名功能开发
javascript·css·html·活动报名
西安小哥3 小时前
做 Agent 写到第三个小时,我开始给它算账
javascript
西安小哥4 小时前
让大模型操作浏览器跑了两周,我发现瓶颈根本不在模型
javascript
用户298698530144 小时前
用 Python 自动化把 JavaScript 代码转换为 Word 文档
javascript·python·api
学以智用4 小时前
正则表达式完整参考手册(JavaScript 版,兼容绝大多数语言)
javascript
北城笑笑4 小时前
Vue 109 ,从零搭建 Vue3 + Electron 工程:生态、安全桥接与打包选型( Vue + Electron )
前端·javascript·vue.js·安全·electron·vue
Highcharts.js5 小时前
Highcharts智能数据分析平台Orbit 多语言配置技术文档
java·前端·javascript·highcharts·orbit·智能数据分析·设置文档