JavaScript中?. 和??指的是什么意思

在JavaScript中，?. 和 ?? 是两个相对较新的操作符，它们分别用于简化代码中的条件判断和默认值处理。这两个操作符在ES2020（即ES11）中被引入，极大地提升了代码的可读性和简洁性。本文将详细介绍它们的用法和适用场景。

1. 可选链操作符 ?.

1.1 什么是可选链操作符？

可选链操作符（Optional Chaining Operator）?. 允许你在访问对象的属性或调用方法时，如果对象是 null 或 undefined，则不会抛出错误，而是返回 undefined。这个操作符的主要目的是简化对深层嵌套对象的访问，避免因为某个中间属性不存在而导致代码崩溃。

1.2 使用场景

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

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

如果我们想要访问 user.address.city，通常的写法是：

const city = user.address.city;

但如果 user 或 user.address 是 null 或 undefined，这段代码就会抛出错误：

const user = null;
const city = user.address.city; // TypeError: Cannot read property 'city' of null

为了避免这种情况，我们通常会使用条件判断：

const city = user && user.address && user.address.city;

这种写法虽然安全，但代码显得冗长且不易读。使用可选链操作符 ?.，我们可以简化这段代码：

const city = user?.address?.city;

如果 user 或 user.address 是 null 或 undefined，city 将会是 undefined，而不会抛出错误。

1.3 可选链操作符的其他用法

可选链操作符不仅可以用于属性访问，还可以用于函数调用：

const user = {
  name: 'Alice',
  greet() {
    console.log(`Hello, ${this.name}`);
  }
};

user.greet?.(); // 如果 user.greet 存在，则调用它

如果 user.greet 不存在，调用 user.greet?.() 不会抛出错误，而是静默地返回 undefined。

2. 空值合并操作符 ??

2.1 什么是空值合并操作符？

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

2.2 使用场景

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

const count = null;
const result = count ?? 0; // result 将会是 0

如果使用逻辑或操作符 ||，情况会有所不同：

const count = 0;
const result = count || 10; // result 将会是 10

在这个例子中，count 是 0，虽然它是一个有效的值，但 || 会将其视为假值，并返回右侧的 10。而使用 ?? 时，count 是 0，因此 result 将会是 0。

2.3 空值合并操作符的适用场景

空值合并操作符特别适用于需要区分 null/undefined 和其他假值的场景。例如，在处理表单输入时，用户可能输入了 0 或空字符串 ''，这些值在某些情况下是有效的，不应该被替换为默认值。

const input = document.querySelector('input').value;
const value = input ?? 'default';

在这个例子中，如果用户没有输入任何内容，input 将会是 ''（空字符串），?? 不会将其替换为 'default'，而 || 会。

3. ?. 和 ?? 的结合使用

?. 和 ?? 可以结合使用，以处理更复杂的场景。例如，假设我们有一个嵌套的对象，我们希望访问某个属性，并在其为 null 或 undefined 时返回一个默认值：

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

const city = user?.address?.city ?? 'Unknown';

在这个例子中，如果 user 或 user.address 是 null 或 undefined，city 将会是 'Unknown'。

4. 总结

• 可选链操作符 ?.：用于简化对深层嵌套对象的访问，避免因为某个中间属性不存在而导致代码崩溃。
• 空值合并操作符 ??：用于在左侧的值为 null 或 undefined 时，返回右侧的默认值，与 || 不同，它不会将其他假值（如 0、'' 等）视为无效。

这两个操作符的引入使得JavaScript代码更加简洁、易读，尤其是在处理复杂的对象结构和默认值时，能够显著减少代码量并提高代码的健壮性。