初学者必须知道的 ECMAScript 2020 特性

前言

ECMAScript（简称 ES）是一种用于编写 Web 应用的脚本语言，也是 JavaScript 的规范标准之一。ES 2020 是 ECMAScript 的第 11 个版本，它在语言的发展方向和增加新特性方面有很大的提升和改进，其中包括了很多方便开发者编写高效、易维护和清晰的 JavaScript 代码的特性。

本文将介绍一些初学者必须知道的 ES 2020 特性。

1. 可选的链式调用

可选的链式调用主要用于处理 null 或 undefined 的对象属性，常常在深层嵌套的属性中使用。在之前的版本中，这种情况需要开发者手动判断每一个嵌套的属性是否存在，而在 ES 2020 中，可选的链式调用就可以很方便地做到这一点。

示例：

// www.javascriptcn.com code example
let obj = {
    name: 'Tom',
    age: 20,
    contact: {
        email: 'tom@gmail.com',
        phone: '123456'
    }
};

// 之前的写法
if (obj && obj.contact && obj.contact.email) {
    console.log(obj.contact.email);
}

// 新的写法
console.log(obj?.contact?.email);

2. 动态导入模块

ES 2020 支持异步加载模块，即动态导入模块。开发者可以使用 import() 方法动态地加载模块，而不是使用 import 语句静态地导入模块。这样可以提高应用程序的性能和灵活性，尤其是在 Web 应用程序中。

示例：

async function loadModule(modulePath) {
    const module = await import(modulePath);
    module();
}

loadModule('./myModule.js');

此示例将异步加载 myModule.js 模块，并在加载后调用 module() 函数。

3. BigInt 类型

ES 2020 引入了一种新的 Number 类型，即 BigInt，可以处理超大整数值。在之前的版本中，JavaScript 中的整数值是有最大值限制的，当值超出这个限制时，就会变成浮点数。而在 ES 2020 中，开发者可以使用 BigInt 类型存储和操作超大整数值，这可以有效地解决这个问题。

示例：

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

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

console.log(max + 1); // 9007199254740992
console.log(bigIntMax + 1n); // 9007199254740992n

可以看到，在使用普通整数值时，当值超出 Number.MAX_SAFE_INTEGER 时，就会变成浮点数。而使用 BigInt 类型值时，则可以正确地处理超大整数值。

4. Promise.allSettled

在之前的版本中，Promise.all 方法可以将多个 Promise 对象封装成一个 Promise 对象，但在其中一个 Promise 对象被 reject 后，整个 Promise.all 链也会被 reject，这不方便开发者处理不同 Promise 对象的状态。

ES 2020 引入了 Promise.allSettled 方法，可以处理多个 Promise 对象，无论是否被 reject，都能正确地处理每个 Promise 的状态。此方法返回一个数组，其中包含了每个 Promise 对象的状态。

示例：

// www.javascriptcn.com code example
const promises = [Promise.resolve(1), Promise.reject(Error('Oops!')), Promise.resolve(3)];

Promise.allSettled(promises).then(results => {
    results.forEach(result => {
        if (result.status === 'fulfilled') {
            console.log('Result:', result.value);
        } else {
            console.error('Error:', result.reason);
        }
    });
});

// Output:
// Result: 1
// Error: Error: Oops!
// Result: 3

5. 块级作用域变量的 try...catch

在 ES 2020 中，块级作用域变量可以使用 try...catch 语句进行捕获和处理，这可以使得开发者更容易调试程序和处理错误。

示例：

try {
    let x = 1 / 0;
    // ...
} catch {
    console.log('An error occurred.');
}

此示例将捕获除零错误，并打印出错误信息。

结语

本文介绍了一些初学者必须知道的 ES 2020 特性，包括可选的链式调用、动态导入模块、BigInt 类型、Promise.allSettled 和块级作用域变量的 try...catch 语句。这些新特性将有助于提高开发者编写高效、易维护和清晰的 JavaScript 代码的能力。

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