Drcus | 王亚振

Drcus | 王亚振

随便写,记录点东西

ES2020 特性前瞻

发布于:  

ES2020 特性前瞻

可选链操作符(Optional Chaining Operator)

样本数据:

const user = {
    name: "drcus",
    age: 25,
    address: {
        city: "Shang Hai",
        prop1: {
            prop2: {
                value: "ok"
            }
        }
    }
}
  • 可选链操作符之前
if (user && user.address) {
    console.log(user.address.city)
}
  • 可选链操作符之后
console.log(user?.address?.city);

空值合并操作符(Nullish coalescing operator)

空值合并操作符允许您检查 nullish 值而不是 falsey 值。 Nullish 值是指 nullundefined 的值。 而 falsey 值是诸如空字符串、数字0、 undefinednullfalseNaN 等等的值。 这对你来说可能听起来没什么不同,但是在现实中,这意味着很多。

const darkModePreference1 = true;
const darkModePreference2 = false;
const darkModePreference3 = undefined;
const darkModePreference4 = null;
const getUserDarkModePreference = (darkModePreference) => {
  return darkModePreference ?? true;
};
getUserDarkModePreference(darkModePreference1);
// true
getUserDarkModePreference(darkModePreference2);
// false
getUserDarkModePreference(darkModePreference3);
// true
getUserDarkModePreference(darkModePreference4);
// true

动态Import(Dynamic Import)

这个特性将帮助您的应用程序更加高效的执行, 动态 import 允许您将 JS 文件作为原生应用用程序中的模块动态导入。 在 ES2020之前,不管是否使用模块,都应该导入模块。

例如,假设我们需要添加一个功能来下载 pdf 格式的文件。

让我们看看如何在 动态 import 之前和之后实现这一点。

const exportPdfButton = document.querySelector('.exportPdfBtn');
exportPdfButton.addEventListener('click', () => {
  import('./export-as-pdf.js')
    .then(module => {
      module.exportAsPdf()
    })
    .catch(err => {
      // handle the error if the module fails to load
    })
})

Promise.allSettled

如果你有一个场景,在所有 Promise 都完成之后必须执行一个任务,那么你可能使用 Promise.all() 方法。 但是这个方法有一个缺点。 当你的任何一个 Promise 被 Rejected 时,Promise 方法就会抛出一个错误。 这意味着您的代码不会等到所有的 Promise 都完成。

这可能不是你想要的。 如果你想要这样的东西: “我不在乎他们的结果。 只需全部运行” ,那么你可以使用新的 Promise.allSettled() 方法。 这种方法只有在你的所有 Promise 都 settled ーー 要么 Resolved ,要么 Rejected ーー 时才会 Resolved

const PromiseArray = [
  Promise.resolve(100),
  Promise.reject(null),
  Promise.resolve("Data release"),
  Promise.reject(new Error("Something went wrong")),
];
Promise.allSettled(PromiseArray)
  .then((res) => {
    console.log(res);
  })
  .catch((err) => console.log(err));
//[
//  {status: "fulfilled", value: 100},
//  {status: "rejected", reason: null},
//  {status: "fulfilled", value: "Data release"},
//  {status: "rejected", reason: Error: Something went wrong ...}
//]

尽管有些 Promise 被 rejected 了,Promise.allSettled 返回了所有的 Promise 的结果。

globalThis

globalThis 包含对全局对象的引用,与环境无关。 在浏览器中,全局对象是 window 对象。 在 Node 环境中,全局对象是 global 或者 Web workers 中的 self

BigInt

允许您使用大于 Javascript 中允许的最大值的数字。 这个数字是 pow(2,53)-1 。 尽管这不能向后兼容,因为传统的数字系统(IEEE 754)不能支持这种大小的数字。

String.matchall

matchAll() 是一个与正则表达式相关的方法。 此方法返回与正则表达式匹配的字符串的所有结果的迭代器,包括捕获组。 这个方法已经被添加到 String 原型中。


掘金作者-图雀社区

~^_^~ 一片小花园 ?

赏赐