ES12 中 JavaScript 新特性装卸实践

ES12 是 JavaScript 的最新版本，引入了一系列新特性，为前端开发提供了更多工具和资源。本文将介绍几个 ES12 新特性的实践，并提供示例代码，帮助读者更好地理解和应用这些新特性。

BigInt 类型

BigInt 类型是 ES12 中引入的新类型，它可以表示比 Number 类型更大的整数。BigInt 类型的表示方式是在数字后面加上 "n"，如 1234567890123456789012345678901234567890n。需要注意的是，在使用加、减、乘等操作符时，必须使用 BigInt 类型对应的操作符。

示例代码：

const max = Number.MAX_SAFE_INTEGER;
console.log(max); // 9007199254740991

const anotherMax = BigInt(Number.MAX_SAFE_INTEGER);
console.log(anotherMax); // 9007199254740991n

const sum = anotherMax + 1n;
console.log(sum); // 9007199254740992n

const newSum = sum * 2n;
console.log(newSum); // 18014398509481984n

Nullish 合并操作符

Nullish 合并操作符是为了解决 JavaScript 中布尔类型转换的问题而引入的。在 JavaScript 中，0、""、false、null、undefined、NaN 等值在布尔类型中都会被当作 false，而其他值则被当作 true。使用 Nullish 合并操作符 ?? 可以在判断变量是否为 null 或 undefined 时保留其原来的值。

示例代码：

const obj = {
  x: 0,
  y: "",
  z: null,
  w: undefined
};

console.log(obj.x ?? 1); // 0
console.log(obj.y ?? 1); // ""
console.log(obj.z ?? 1); // 1
console.log(obj.w ?? 1); // 1
console.log(obj.a ?? 1); // 1

Promise.allSettled 方法

Promise.allSettled 方法是 Promise 类型的一个新方法，它可以同时处理多个 Promise 对象，等待它们全部执行完毕后返回所有 Promise 对象的状态，不管它们是成功还是失败。

示例代码：

const promise1 = Promise.resolve(1);
const promise2 = Promise.reject("Error");
const promise3 = Promise.resolve("Done");

Promise.allSettled([promise1, promise2, promise3])
  .then(results => console.log(results))
  .catch(error => console.error(error));
// Output: [{ status: "fulfilled", value: 1 }, { status: "rejected", reason: "Error" }, { status: "fulfilled", value: "Done" }]

可选的 catch 绑定

ES12 中允许在 Promise.then 方法的链式调用中省略 catch 方法，直接使用 try/catch 来处理错误。

示例代码：

async function getData() {
  try {
    const response = await fetch("https://example.com/data");
    const data = await response.json();
    return data;
  } catch {
    console.error("Failed to get data");
  }
}

getData();

总结

本文介绍了 ES12 中的几个新特性：BigInt 类型、Nullish 合并操作符、Promise.allSettled 方法和可选的 catch 绑定，并提供了相应的实践示例。这些新特性可以提高前端开发的效率和代码质量，帮助开发者更好地应对项目中的挑战。

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