掌握可选链?.和空值合并??, 为代码添加安全保障

让我们从一个简单的例子开始, 在旧版本的JavaScript中, 我们经常通过if语句来检查变量是否为null或undefined, 例如:

if (user) {
  console.log(user.name);
}

如果user变量为null或undefined, 此代码就会抛出错误, 为了避免此问题, 我们需要使用可选链?.运算符, 该运算符允许我们安全地访问对象的属性, 即使该属性不存在, 也不会抛出错误, 让我们看看它是如何工作的:

console.log(user?.name);

如果user为null或undefined, 此代码将输出undefined, 不会抛出错误, 这大大提高了代码的健壮性, 避免了不必要的错误处理。

空值合并??运算符也是一个非常有用的工具, 它允许我们为变量设置一个默认值, 如果变量为null或undefined, 则返回该默认值, 例如:

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

如果user为null或undefined, 此代码将返回"Guest", 否则, 它将返回user.name, 这使我们可以轻松地为变量设置默认值, 无需担心null或undefined的问题。

可选链和空值合并是JavaScript中最强大的工具之一, 它们可以使代码更加安全、健壮和易于维护, 下次在编写JavaScript代码时, 请务必考虑使用它们。

现在, 我们来深入探讨一些更高级的用法, 假设我们有一个对象, 其中嵌套了多个对象, 我们需要从该对象中提取一个深层属性, 例如:

const user = {
  address: {
    city: "New York",
  },
};

为了获取city属性, 我们需要编写这样的代码:

console.log(user.address.city);

如果address或city属性为null或undefined, 此代码就会抛出错误, 为了避免此问题, 我们可以使用可选链和空值合并, 如下所示:

console.log(user?.address?.city ?? "Unknown");

如果address或city属性为null或undefined, 此代码将输出"Unknown", 否则, 它将输出city的值, 这使我们可以安全地访问深层属性, 即使这些属性不存在, 也不会抛出错误。

可选链和空值合并还可以用于链式调用, 这使我们可以更轻松地编写复杂的操作, 例如:

const result = user?.orders?.filter(order => order.status === "shipped")?.map(order => order.total);

如果user、orders或任何其他属性为null或undefined, 此代码将返回undefined, 不会抛出错误, 这使我们可以编写更简洁、更易于维护的代码。

总之, 可选链和空值合并是JavaScript中最强大的工具之一, 它们可以使代码更加安全、健壮和易于维护, 下次在编写JavaScript代码时, 请务必考虑使用它们。