ES2020 究竟新增了哪些优秀特性？-JavaScript中文网-JavaScript教程资源分享门户

随着前端技术的不断发展，JavaScript 也不断地迭代更新，不断地提高着前端开发的效率和功能。而最近发布的 ES2020 标准也为前端开发者带来了不少的新特性。那么，ES2020 究竟新增了哪些优秀特性呢？本文将会为大家一一介绍。

1. 可选链

问题背景

在实际开发中，我们经常需要进行对象的深度遍历，以获取对象中的某个属性。但是，如果对象的某一层级不存在，JavaScript 引擎在运行时便会给出 Cannot read property 'xxx' of undefined 这样的错误。

解决方案

可选链这个新特性，就是为了解决这个问题而新增的。我们可以使用 ?. 来判断是否存在某一个属性。如果该属性不存在，那么程序便不会抛出异常，而是返回 undefined。

示例代码

-- -------------------- ---- -------
----- --- - -
  -- -
    -- -
      -- -
    -
  -
--

------------------------- -- -
------------------------- -- ---------

2. 空值合并运算符

问题背景

在实际开发中，我们经常需要对某个变量的值进行判断，如果该值为 null 或 undefined，那么就设置一个默认值。但是，传统的条件语句带来的代码冗余，往往让我们感到头痛。

解决方案

空值合并运算符这个新特性，就是为了解决这个问题而新增的。我们可以使用 ?? 来设置一个默认值。如果该变量的值为 null 或 undefined，那么运算符左侧表达式的结果将会被忽略，直接返回右侧表达式的值。

示例代码

const a = null;
const b = undefined;
const c = 0;

console.log(a ?? 'default value'); // 'default value'
console.log(b ?? 'default value'); // 'default value'
console.log(c ?? 'default value'); // 0

3. Promise.allSettled

问题背景

在前端开发中，我们经常会同时触发多个异步请求，然后对它们的结果进行处理。在过去，我们通常使用 Promise.all 这个方法来达到这个目的。但是，如果某一个异步请求失败了，那么 Promise.all 方法就会直接返回一个错误，导致其他异步请求的结果无法获取。

解决方案

Promise.allSettled 这个新特性，就是为了解决这个问题而新增的。它会等待所有异步请求都完成，无论是成功还是失败，都会返回结果。结果以数组的形式返回，每一个元素都是一个对象，对象的 status 属性表明了该异步请求的成功或失败状态，而 value 属性和 reason 属性则分别表示该异步请求的结果或错误信息。

示例代码

-- -------------------- ---- -------
----- -------- - -
  -------------------
  ------------------------
  ------------------
--

----------------------------
  ------------- -- -
    ---------------------
  ---
-- -- ------- ------------ ------ - -- - ------- ----------- ------- ------- -- - ------- ------------ ------ - --

4. 动态导入

问题背景

在前端开发中，我们常常需要进行代码的分块加载，以提高页面的加载速度。而目前，我们通常使用 import() 这种方式来进行动态加载。但是，这种方式需要使用 Promise，并且在某些情况下会导致代码的冗余。

解决方案

动态导入这个新特性，就是为了解决这个问题而新增的。我们可以使用 import() 函数来异步加载一个 JavaScript 模块，并将其作为一个模块对象来处理。我们可以将 import() 函数的返回值，放置在 await 或 then 包装的异步上下文中进行处理。

示例代码

// 动态导入 ES 模块
const module = await import('./module.mjs');
console.log(module);

// 动态导入 CommonJS 模块
const module = await import('./module.cjs');
console.log(module);

5. BigInt

问题背景

在前端开发中，我们常常需要进行大数计算，例如计算斐波那契数列。但是，在过去，JavaScript 对于大数的支持很是不足，往往需要借助一些第三方库才能实现。

解决方案

BigInt 这个新特性，就是为了解决这个问题而新增的。BigInt 是一种新的基本数据类型，它可以存放任意大小的整数。我们可以使用 n 后缀来表示一个 BigInt 类型的数据。

示例代码

const a = 100000000000000000000000000000000000000000000000000n;
const b = 100000000000000000000000000000000000000000000000000n;

console.log(a + b); // 200000000000000000000000000000000000000000000000000n

总结

ES2020 带来的这些新特性，都非常的实用。我们在实际开发中，可以针对具体的问题，选择用什么样的新特性来进行解决。但是，在使用这些新特性的时候，也需要注意代码的兼容性问题，以免造成一些不必要的错误。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64eab4c0f6b2d6eab3584d89