?? 、 || 、&&=、||=、??=这些运算符你用对了吗?

在日常开发中,你是不是也常用||来给变量设置默认值?比如

js 复制代码
const title = props.title || '默认标题';

看起来好像没什么大问题,但是当title0,false或者""的时候,或者思考比较全面的同学可能会额外加上关于0false''的判断,但其实有更简单的方法,就是使用??

?? 和 || 的区别

运算符 规则
|| 如果左边是 null 或 undefined,返回右边
?? 如果左边是"假值"(false、0、''、null、undefined),返回右边

??运算符是ES2020 引入的,除了引入了??,自从ES2020以来,还引入了其他几个运算符

可选链?.

用于安全访问多层嵌套对象属性,避免手动判断每一级是否存在

js 复制代码
const city = user?.address?.city;
  • 如果 useruser.addressnull未定义,不会抛错,而是直接返回 undefined
  • 支持属性访问: obj?.prop
  • 支持数组规线访问: arr?.[0]
  • 支持函数调用: fn?.()

逻辑与赋值&&=

其实等价于x &&= yx = x && y

当值为 true 时才赋值

逻辑或赋值||=

等价于x ||= yx = x || y

当值为 false 时才赋值

空值合并赋值??=

等价于x ??= yx = x ?? y

保留 0/空字符/假值,当值为 null 或 undefined 时才赋值

js 复制代码
let username = null;
username ??= 'Guest'; // 结果: 'Guest'

我看还有一些人介绍!!运算符,其实这个不算新加入的,甚至不是一个整体的运算符,他一直存在,只不过是利用了!的特性,做的一种常用写法

相关推荐
前端小咸鱼一条2 分钟前
React的介绍和特点
前端·react.js·前端框架
谢尔登14 分钟前
【React】fiber 架构
前端·react.js·架构
哈哈哈哈哈哈哈哈85318 分钟前
Vue3 的 setup 与 emit:深入理解 Composition API 的核心机制
前端
漫天星梦20 分钟前
Vue2项目搭建(Layout布局、全局样式、VueX、Vue Router、axios封装)
前端·vue.js
ytttr87342 分钟前
5G毫米波射频前端设计:从GaN功放到混合信号集成方案
前端·5g·生成对抗网络
水鳜鱼肥44 分钟前
Github Spark 革新应用,重构未来
前端·人工智能
前端李二牛1 小时前
现代CSS属性兼容性问题及解决方案
前端·css
贰月不是腻月1 小时前
凭什么说我是邪修?
前端
中等生1 小时前
一文搞懂 JavaScript 原型和原型链
前端·javascript
前端李二牛1 小时前
现代化图片组件设计思路与实现方案
前端·html