js的空值合并操作符、可选链操作符、空值赋值操作符

Sappiness ベ

已于 2023-03-22 17:25:25 修改

阅读量241

点赞数

文章标签： javascript 前端 vue.js

于 2023-03-22 17:12:19 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43858276/article/details/129713913

版权

本文介绍了JavaScript中的两个新特性：空值合并操作符(??)和可选链操作符(?.)。空值合并操作符在左值为null或undefined时返回右值；可选链操作符允许安全地访问深层属性，当路径中某部分为null或undefined时返回undefined，避免抛错。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.空值合并操作符（??）:
只有左边是 null / undefined 的时候才会返回右边的值

const number = null ?? 12;
console.log(number); // 12

const str= undefined ?? '测试'
console.log(str);  // 测试

const number1 = 0 ?? 12;
console.log(number1); // 0

const number1 = '' ?? 12;
console.log(number1); // 12

2.可选链操作符：
在引用为空 null / undefined 的情况下不会引起错误，该表达式短路返回值是 undefined
与函数调用一起使用时，如果给定的函数不存在，则返回 undefined。

const obj = {
	label: '测试',
	person: {
		name: '张三'
	}
}
console.log(obj.person.age) // 会报错
// 一般写法
let age = obj.person && obj.person.age;
//使用操作符写法
let age = obj.person?.age // person下有age属性，不会报错，会抛出undefined

3.空值赋值操作符
只有当 ??= 左侧的值为 null / undefined 的时候，才会将右侧变量的值赋值给左侧变量，其他所有值都不会进行赋值。

let a = null;
let b = undefined;
let c = 100;
let d = 200;
let e = '';
console.log(a ??= c); // 100
console.log(b ??= d); // 200
console.log(e ??= c); // ''