js中?.、??、??=的用法及使用场景

---

在JavaScript中，.?、??、??= 是三个相对新的运算符，它们分别表示“可选链”、"空值合并"和"空值合并赋值"。以下是它们的用法和使用场景：

1. 可选链运算符 ?.

可选链运算符（Optional Chaining）用于在对象属性访问、数组元素访问、函数调用等场景中，安全地访问嵌套结构中的属性或元素，而不必显式检查每个级别是否存在。

// 以前的写法
let result;
if (obj && obj.prop1 && obj.prop1.prop2) {
  result = obj.prop1.prop2;
} else {
  result = undefined;
}

// 使用可选链
let result = obj?.prop1?.prop2;

2. 空值合并运算符 ??

空值合并运算符（Nullish Coalescing）用于提供默认值，当左侧的操作数为 null 或 undefined 时，返回右侧的操作数。

let defaultValue = "Default Value";
let userInput = null;

// 以前的写法
let result = userInput !== null && userInput !== undefined ? userInput : defaultValue;

// 使用空值合并运算符
let result = userInput ?? defaultValue;

3. 空值合并赋值运算符 ??=

空值合并赋值运算符（Nullish Coalescing Assignment）用于在左侧的变量为 null 或 undefined 时，将右侧的值赋给左侧的变量。

let existingValue = "Existing Value";
let newValue = "New Value";
let variable = null;

// 以前的写法
if (variable === null || variable === undefined) {
  variable = newValue;
}

// 使用空值合并赋值运算符
variable ??= newValue;

这些新的运算符提高了代码的可读性，减少了冗余的代码，特别是在处理嵌套结构和默认值时。但需要注意的是，它们是相对较新的语言特性，不同的 JavaScript 运行环境和浏览器版本可能支持的程度不同，需要注意在使用时进行兼容性检查。

---

原文链接：codingdict.net

---