js中?. 、?? 、??=用法_。?“”‘、=:”-CSDN博客

本文链接：https://blog.csdn.net/qq_51531742/article/details/130565654

文章介绍了在JavaScript中处理null对象属性访问时引发TypeError的三种方法：1)使用可选链运算符?.来避免错误；2)应用空值合并运算符??以提供默认值；3)逻辑空赋值运算符??=在值为null或undefined时进行赋值。这些技巧有助于优化代码的健壮性和可读性。

摘要由CSDN通过智能技术生成

在与bug对抗的时候经常会遇到：TypeError : Cannot read properties of null (reading 'xxx')错误

只要引入可选链就行...

1、可选链运算符 ?.

const person = { id: 1, name: '咸鱼', desc: null };
 
        
        console.log(person.desc.age) // TypeError 
        console.log(person.desc && person.desc.age); // null
 
     
        console.log(person.desc?.age); // undefined
      
        console.log(person.desc?.address?.city); // undefined

2、空值合并运算符 ??

在左侧值为 null 或 undefined 时，使用右侧的值2.空值合并运算符 ??

在左侧值为 null 或 undefined 时，使用右侧的值

const person = { id: 1, name: '咸鱼', desc: null };
 
        // 当左侧的值存在时
        console.log(person.id ?? person.name);// 1
 
        // 当左侧值为null时
        console.log(person.desc ?? person.name);//咸鱼
        // 当左侧值为undefined
        console.log(person.skill ?? person.name);// 咸鱼

3、逻辑空赋值运算符 ??=

在左侧值为 null 或 undefined 时，对其赋值

 const person = { id: 1, name: '咸鱼', desc: null };
 
        // 当左侧的值存在时
        console.log(person.id ??= person.name);// 1
 
        // 当左侧值为null时
        console.log(person.desc ??= '咸鱼');// 咸鱼
        // 当左侧值为undefined
        console.log(person.skill ??= '咸鱼');// 咸鱼