JavaScript 2021 (ES12) 的必备功能：提高代码的可读性和效率

一年多来，我一直在使用 ECMAScript 2021 的新功能，这要归功于 Babel。几乎所有这些功能都很实用，但有三个功能特别引人注目，它们为我节省了大量时间，使我的代码更具可读性。让我们深入了解一下：

逻辑赋值运算符

在 JavaScript 中，赋值操作符 (=) 用于将值分配给变量。但是，ES12 引入了逻辑赋值运算符，它结合了逻辑运算符和赋值运算符。

例如，考虑以下代码：

if (user) {
  username = user.name;
}

使用逻辑赋值运算符，我们可以将此代码重写为：

username ||= user.name;

这等价于：

if (!username) {
  username = user.name;
}

逻辑赋值运算符使代码更简洁、更具可读性。

Promise.any()

Promise.all() 方法允许我们等待所有 Promise 解决。ES12 引入了 Promise.any() 方法，它与 Promise.all() 相反。

Promise.any() 等待任何给定的 Promise 解决。当任何一个 Promise 得到解决时，它将解决，而不管其他 Promise 的状态。这在需要在多个请求中处理第一个可用响应的情况下非常有用。

例如：

const promises = [
  fetch('api/user'),
  fetch('api/posts'),
  fetch('api/comments'),
];

Promise.any(promises)
  .then((response) => {
    // 处理第一个可用响应
  })
  .catch((error) => {
    // 处理错误
  });

可选链式

可选链式使我们可以安全地访问嵌套对象和数组的属性，即使这些属性不存在也不会引发错误。

ES12 之前，如果我们想要访问嵌套对象属性，并且该属性可能不存在，我们需要使用条件语句来检查属性是否存在。这可能会导致冗长且不易读的代码。

可选链式使用问号 (?) 操作符来安全地访问属性。如果属性存在，它将返回该属性的值。否则，它将返回 undefined，而不会引发错误。

例如：

// ES12 之前
const user = {
  name: 'John',
  address: {
    street: 'Main Street',
  },
};

const street = user.address ? user.address.street : 'Unknown';

// ES12
const street = user?.address?.street;