将 ES11 特性引入你的项目：空值合并操作符和可选链操作符

在本文中，我们将重点探讨 ES11 中的两个非常有用的特性：空值合并操作符（??）和可选链操作符（?.）。我们将通过实际示例来演示如何使用这些特性，以及它们在项目中的具体应用场景。

空值合并操作符（??）

空值合并操作符（??）允许我们在不使用 if/else 语句的情况下，为变量赋予一个默认值。

let name = user?.name ?? "Guest";

在上面的示例中，如果 user.name 为 null 或 undefined，那么 name 将被赋予 "Guest" 的值。

空值合并操作符的语法如下：

variable ?? defaultValue

• variable：要检查的变量。
• defaultValue：如果 variable 为 null 或 undefined，则赋予它的默认值。

可选链操作符（?.）

可选链操作符（?.）允许我们安全地访问对象的属性，即使该属性可能为 null 或 undefined。

const name = user?.name;

在上面的示例中，如果 user 为 null 或 undefined，那么 name 将被赋予 undefined 的值。

可选链操作符的语法如下：

object?.property

• object：要访问的对象。
• property：要访问的属性。

ES11 特性在项目中的应用

空值合并操作符

检查用户输入

在用户输入的情况下，我们可以使用空值合并操作符来为输入赋予一个默认值。

let username = document.getElementById("username")?.value ?? "";

在上面的示例中，如果用户没有输入用户名，那么 username 将被赋予 "" 的值。

处理数据

在处理数据时，我们可以使用空值合并操作符来避免出现 null 或 undefined 的值。

const data = response.data?.results ?? [];

在上面的示例中，如果 response.data.results 为 null 或 undefined，那么 data 将被赋予 [] 的值。

可选链操作符

访问嵌套属性

在访问嵌套属性时，我们可以使用可选链操作符来避免出现 null 或 undefined 的值。

const name = user?.profile?.name;

在上面的示例中，如果 user 或 user.profile 为 null 或 undefined，那么 name 将被赋予 undefined 的值。

获取对象属性

在获取对象属性时，我们可以使用可选链操作符来避免出现 null 或 undefined 的值。

const value = object?.[property];

在上面的示例中，如果 object 或 object[property] 为 null 或 undefined，那么 value 将被赋予 undefined 的值。

结论

ES11 中的空值合并操作符和可选链操作符是非常有用的特性，它们可以帮助我们编写更简洁、更安全的代码。通过实际示例，我们演示了如何将这些特性应用到项目中。希望本文能够帮助您更好地理解和使用 ES11 的新特性。