ES2019 将 nullish 合并操作符与可选的 catch 绑定-JavaScript中文网-JavaScript教程资源分享门户

在 JavaScript 中，null 和 undefined 都表示值的缺失。而在 ES2019 中，我们可以使用 nullish 合并操作符 ?? 来处理 null 或 undefined 的情况，同时也可以将其与可选的 catch 语句一起使用，使代码更加简洁、易读。

nullish 合并操作符 ??

在 JavaScript 中，当我们需要判断一个变量是否为 null 或 undefined 时，通常会使用 || 运算符来进行判断，例如：

const foo = null || 'default';
console.log(foo); // 输出 'default'

在这个例子中，当 foo 为 null 时，|| 运算符会返回 'default'，从而使得 foo 的值变为 'default'。然而，当 foo 的值为一个 falsy 值（例如 0 或空字符串）时，|| 运算符同样会返回 'default'，这可能会导致一些不必要的错误。

为了解决这个问题，ES2019 引入了 nullish 合并操作符 ??。与 || 运算符不同的是，?? 运算符只有在左侧的值为 null 或 undefined 时，才会返回右侧的值。例如：

const foo = null ?? 'default';
console.log(foo); // 输出 null

const bar = 0 ?? 'default';
console.log(bar); // 输出 0

在这个例子中，当 foo 的值为 null 时，?? 运算符会返回 null，而不是 'default'。同时，当 bar 的值为 0 时，?? 运算符同样会返回 0，而不是 'default'。

可选的 catch 语句

在 JavaScript 中，try...catch 语句常常被用来处理异常情况。然而，在 ES2019 之前，如果我们只想在 catch 语句中处理某种特定的异常，而不想处理其他类型的异常，就需要进行一些额外的判断。例如：

try {
  // 可能会抛出异常的代码
} catch (e) {
  if (e instanceof TypeError) {
    // 处理类型错误异常
  }
}

在这个例子中，我们需要使用 instanceof 运算符来判断异常类型，才能进行特定的处理。这样的代码不仅不够简洁，而且容易出错。

为了解决这个问题，ES2019 引入了可选的 catch 语句。我们可以在 catch 语句中使用一个参数，并在参数名后面加上一个问号，这样就可以只处理特定类型的异常，而不用进行额外的判断。例如：

try {
  // 可能会抛出异常的代码
} catch (e?) {
  if (e instanceof TypeError) {
    // 处理类型错误异常
  }
}

在这个例子中，当抛出的异常类型为 TypeError 时，catch 语句中的 e 参数会被赋值为异常对象。如果抛出的异常类型不是 TypeError，catch 语句中的 e 参数会被赋值为 undefined。

nullish 合并操作符与可选的 catch 语句的结合使用

在 ES2019 中，我们可以将 nullish 合并操作符和可选的 catch 语句结合使用，使代码更加简洁、易读。例如：

try {
  // 可能会抛出异常的代码
} catch (e?) {
  const message = e?.message ?? 'unknown error';
  console.log(message);
}

在这个例子中，我们使用 nullish 合并操作符和可选的 catch 语句来处理异常情况。当抛出的异常类型为 TypeError 时，e?.message 会返回异常对象的 message 属性；当抛出的异常类型不是 TypeError 时，e?.message 会返回 undefined。然后，我们使用 ?? 运算符来判断 message 是否为 undefined，如果是，就将其赋值为 'unknown error'。最后，我们输出 message 的值。

总结

ES2019 引入了 nullish 合并操作符和可选的 catch 语句，使 JavaScript 代码更加简洁、易读。在实际开发中，我们可以结合使用这两个特性，处理 null 或 undefined 的情况，以及只处理特定类型的异常。下面是一个完整的示例代码：

try {
  // 可能会抛出异常的代码
} catch (e?) {
  const message = e?.message ?? 'unknown error';
  console.log(message);
}

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/655b1f9dd2f5e1655d54ba79