JavaScript中?.、??、??=的用法及含义是什么

在JavaScript中，随着语言的发展，越来越多的新特性被引入，以简化代码并提高开发效率。其中，可选链操作符（?.）、空值合并操作符（??）和空值合并赋值操作符（??=）是近年来引入的几个非常有用的操作符。本文将详细介绍它们的用法及含义。

1. 可选链操作符（?.）

1.1 基本概念

可选链操作符（?.）允许你在访问对象的属性或调用对象的方法时，如果对象是null或undefined，则不会抛出错误，而是返回undefined。这可以避免在访问深层嵌套对象时出现TypeError。

1.2 使用场景

假设我们有一个嵌套的对象结构：

const user = {
  profile: {
    name: 'Alice',
    address: {
      city: 'Wonderland'
    }
  }
};

如果我们想访问user.profile.address.city，通常情况下是安全的。但如果user或profile或address是null或undefined，直接访问city就会抛出错误。

const city = user.profile.address.city; // 正常情况
const city = user.profile.address.city; // 如果address为null或undefined，会抛出错误

使用可选链操作符可以避免这种情况：

const city = user?.profile?.address?.city; // 如果任何一级为null或undefined，city将为undefined

1.3 方法调用

可选链操作符也可以用于方法调用：

const result = obj?.method?.();

如果obj或method是null或undefined，result将为undefined，而不会抛出错误。

1.4 数组元素访问

可选链操作符还可以用于数组元素的访问：

const firstElement = arr?.[0];

如果arr是null或undefined，firstElement将为undefined。

2. 空值合并操作符（??）

2.1 基本概念

空值合并操作符（??）用于在左侧的表达式为null或undefined时，返回右侧的默认值。与逻辑或操作符（||）不同，??只在左侧为null或undefined时生效，而||在左侧为假值（如0、''、false等）时也会返回右侧的值。

2.2 使用场景

假设我们有一个变量value，我们希望在其为null或undefined时使用默认值：

const value = null;
const defaultValue = 'default';

const result = value ?? defaultValue; // result为'default'

如果value为0或''，??不会返回默认值：

const value = 0;
const defaultValue = 'default';

const result = value ?? defaultValue; // result为0

2.3 与逻辑或操作符的区别

逻辑或操作符（||）在左侧为假值时也会返回右侧的值：

const value = 0;
const defaultValue = 'default';

const result = value || defaultValue; // result为'default'

而??只在左侧为null或undefined时返回右侧的值：

const value = 0;
const defaultValue = 'default';

const result = value ?? defaultValue; // result为0

3. 空值合并赋值操作符（??=）

3.1 基本概念

空值合并赋值操作符（??=）是??的赋值版本。它用于在变量为null或undefined时，将右侧的值赋值给变量。

3.2 使用场景

假设我们有一个变量value，我们希望在其为null或undefined时赋予默认值：

let value = null;
const defaultValue = 'default';

value ??= defaultValue; // value为'default'

如果value已经有值（即使为0或''），??=不会改变它的值：

let value = 0;
const defaultValue = 'default';

value ??= defaultValue; // value仍为0

3.3 与逻辑或赋值操作符的区别

逻辑或赋值操作符（||=）在左侧为假值时也会赋予右侧的值：

let value = 0;
const defaultValue = 'default';

value ||= defaultValue; // value为'default'

而??=只在左侧为null或undefined时赋予右侧的值：

let value = 0;
const defaultValue = 'default';

value ??= defaultValue; // value仍为0

4. 综合示例

让我们通过一个综合示例来展示这些操作符的使用：

const user = {
  profile: {
    name: 'Alice',
    address: null
  }
};

// 使用可选链操作符访问嵌套属性
const city = user?.profile?.address?.city ?? 'Unknown'; // city为'Unknown'

// 使用空值合并赋值操作符赋予默认值
let age = user?.profile?.age;
age ??= 25; // age为25

console.log(city); // 输出: Unknown
console.log(age); // 输出: 25

在这个示例中，user.profile.address为null，因此city通过??操作符赋予了默认值'Unknown'。age原本为undefined，通过??=操作符赋予了默认值25。

5. 总结

• 可选链操作符（?.）：用于安全地访问嵌套对象的属性或方法，避免TypeError。
• 空值合并操作符（??）：用于在左侧为null或undefined时返回右侧的默认值。
• 空值合并赋值操作符（??=）：用于在变量为null或undefined时赋予默认值。

这些操作符极大地简化了代码，减少了冗余的条件判断，提高了代码的可读性和健壮性。在实际开发中，合理使用这些操作符可以显著提升开发效率和代码质量。