如何在我的JavaScript项目中使用可选链和空值合并？

JavaScript ES2020引入了一些新功能，帮助我们编写更清晰的代码。让我们快速了解其中两个功能，旨在使处理对象和变量变得更加容易。

可选链

可选链运算符 (?.) 允许我们在不必验证嵌套链中的每个引用的情况下，访问深层嵌套的对象属性。如果引用为nullish（null或undefined），可选链运算符将短路，返回undefined。可选链运算符也可以与函数调用一起使用，如果给定的函数不存在，则返回undefined。

下面是使用可选链的代码示例，可以看到代码更短、更简单：

const data = getDataFromMyAPI();

// 没有使用可选链
const userName = data && data.user && data.user.name;
const userType = data && data.user && data.user.type;
data && data.showNotifications && data.showNotifications();

// 使用可选链
const userName = data?.user?.name;
const userType = data?.user?.type;
data.showNotifications?.();

空值合并

同样的精神，空值合并运算符 (??) 是一个逻辑运算符，允许我们检查nullish（null或undefined）值，当值为非nullish时返回右操作数，否则返回左操作数。

除了更清晰的代码，这个运算符还可以避免一些与假值相关的麻烦：

const config = getServerConfig();

// 没有空值合并
const port = config.server.port || 8888;
// 哎呀！即使我们传递了false，这个表达式也会返回true
const wrongkeepAlive = config.server.keepAlive || true;
// 我们必须明确检查空值
const keepAlive =
  (config.server.keepAlive !== null & config.server.keepAlive !== undefined)
  ? config.server.keepAlive : true;

// 使用空值合并
const port = config.server.port ?? 8888;
// 这样就正确了
const keepAlive = config.server.keepAlive ?? true;

[!NOTE]

请记住，这两个特性都是相对较新的，所以你可能需要polyfill来支持旧版本的浏览器。在使用之前，请务必检查它们的兼容性。