JS 新语法「可选链」新特性：「双问号」已正式进入 Stage 3！

2023-11-06 09:31:33

【文题】JS 新语法「可选链」「双问号」已进入 Stage 3

JS 新语法「可选链」新特性：「双问号」强势登场！

JS 可选链运算符（?.语法）的子语法「双问号」（??语法）已正式进入 Stage 3，它是 JavaScript 中的最新成员，为我们提供了更简洁、更安全的属性访问方式。本文将详细介绍该新特性，并提供代码示例和应用场景，帮助您更深入地理解和掌握可选链语法。

可选链语法简介：

JS 可选链运算符（?.语法）允许您安全地访问嵌套对象属性，即使属性值可能为 null 或 undefined。
?? 语法是可选链运算符（?.语法）的子语法，用于为对象属性或数组元素指定一个默认值。

语法：

result = object?.property ?? defaultValue;

object : 要访问的对象。
property : 要访问的对象属性。
defaultValue : 如果对象属性不存在或为 null 或 undefined，则返回的默认值。

双问号（??）语法示例：

const obj = {
  name: 'John',
  age: undefined,
  address: {
    street: '123 Main Street',
    city: 'Anytown',
  },
};

// 使用 ?? 语法访问对象属性：

// 如果 obj.age 存在且不为 null 或 undefined，则返回 obj.age，否则返回 20。
const age = obj.age ?? 20;

// 如果 obj.address.city 存在且不为 null 或 undefined，则返回 obj.address.city，否则返回 "Unknown City"。
const city = obj.address.city ?? "Unknown City";

双问号（??）语法使用场景：

处理嵌套对象或数组：

可选链语法和 ?? 语法在处理嵌套对象或数组时非常有用。您可以使用可选链语法安全地访问属性或元素，并使用 ?? 语法指定默认值，以避免因属性或元素不存在而导致的错误。
防止意外的 null 或 undefined 错误：

?? 语法可以帮助您防止意外的 null 或 undefined 错误。当您访问一个可能为 null 或 undefined 的对象属性或数组元素时，使用 ?? 语法指定一个默认值，可以确保您始终获得一个有效的值。
简化代码：

可选链语法和 ?? 语法可以帮助您简化代码。您可以使用可选链语法安全地访问属性或元素，而无需使用复杂的 if-else 语句或三元运算符来处理 null 或 undefined 的情况。

结论：

JS 新语法「可选链」子语法「双问号」已进入 Stage 3，它为我们提供了更简洁、更安全的属性访问方式。通过使用 ?? 语法，您可以为对象属性或数组元素指定一个默认值，以避免因属性或元素不存在而导致的错误。可选链语法和 ?? 语法非常适用于处理嵌套对象或数组，防止意外的 null 或 undefined 错误，并简化代码。