赶上潮流，探索JavaScript世界中的操作符

2023-11-30 22:16:27

JavaScript 操作符简介

操作符是编程语言中用来执行特定操作或计算的符号。JavaScript 中的操作符种类繁多，常见的有算术运算符、赋值运算符、比较运算符、逻辑运算符和字符串运算符等。这些运算符可以帮助我们进行复杂的计算、条件判断、数据类型转换等操作，从而编写出更加高效、易读的代码。

ES2020 中引入了两个新操作符：可选链操作符（?.）和空值合并操作符（??）。这两个操作符的出现极大地简化了我们的代码，并提高了代码的可读性和可维护性。下面，我们将对这两个操作符进行详细的介绍。

可选链操作符（?.）

可选链操作符（?.）允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。这意味着，如果链中的某个属性不存在，则该操作符会返回 undefined，而不会报错。这在处理深层嵌套的对象时非常有用，可以避免出现讨厌的 undefined 错误。

const user = {
  name: 'John',
  address: {
    street: '123 Main Street',
    city: 'Anytown',
    state: 'CA',
    zip: '12345'
  }
};

// 使用可选链操作符获取用户的街道地址
const streetAddress = user?.address?.street;

// 如果 user.address 不存在或 user.address.street 不存在，则 streetAddress 将为 undefined
console.log(streetAddress); // "123 Main Street"

在上面的示例中，我们使用可选链操作符获取用户的街道地址。如果 user.address 不存在或 user.address.street 不存在，则 streetAddress 将为 undefined。这与传统的方式（使用点运算符）不同，传统的方式在遇到不存在的属性时会抛出错误。

空值合并操作符（??）

空值合并操作符（??）允许我们在两个表达式之间进行选择。如果第一个表达式的值为 null 或 undefined，则返回第二个表达式的值；否则，返回第一个表达式的值。这在处理可能为 null 或 undefined 的值时非常有用，可以避免出现讨厌的 null 或 undefined 错误。

const name = user?.name ?? 'Guest';

// 如果 user.name 不存在或为 null 或 undefined，则 name 将为 'Guest'
console.log(name); // "John"

在上面的示例中，我们使用空值合并操作符来获取用户的姓名。如果 user.name 不存在或为 null 或 undefined，则 name 将为 'Guest'。这与传统的方式（使用三元运算符）不同，传统的方式在处理可能为 null 或 undefined 的值时需要编写更多的代码。

可选链操作符和空值合并操作符的比较

可选链操作符和空值合并操作符都非常有用，但它们的使用场景不同。可选链操作符用于处理深层嵌套的对象，而空值合并操作符用于处理可能为 null 或 undefined 的值。

下表总结了可选链操作符和空值合并操作符的区别：

特性	可选链操作符（?.）	空值合并操作符（??）
用途	读取位于连接对象链深处的属性的值	在两个表达式之间进行选择
返回值	undefined（如果链中的某个属性不存在）	第二个表达式的值（如果第一个表达式的值为 null 或 undefined）
使用场景	处理深层嵌套的对象	处理可能为 null 或 undefined 的值