5个实用的JavaScript新特性攻略

JavaScript是一种非常流行的编程语言，随着时代的发展，JavaScript也在不断发展，新的特性和语法不断涌现。在本篇攻略中，我们将探讨5个实用的JavaScript新特性，帮助你更好地掌握JavaScript的使用。

1. 可选链运算符

可选链运算符（Optional Chaining Operator）是ES2020新特性之一，它允许我们在访问对象属性或方法时，不需要进行繁琐的判空操作。如果属性或方法不存在，它将会返回undefined而不是产生错误。

下面是可选链运算符的示例代码：

const user = {
  name: 'Jack',
  address: {
    city: 'Beijing'
  }
};

console.log(user.address?.city); // 输出 'Beijing'
console.log(user.address?.country); // 输出 undefined

在上面的代码中，我们使用?.来访问user对象的address属性和city属性，由于address属性存在，因此它输出了'Beijing'。而当我们访问user对象的address属性和country属性时，由于country属性不存在，因此它输出了undefined。

2. Promise.allSettled

Promise.allSettled是ES2020新特性之一，它可以接收多个Promise实例，并且在所有Promise实例都已经settled（fulfilled或rejected）之后返回一个数组。这个数组包含每个Promise实例的settled状态和它对应的数据（或错误）。

下面是Promise.allSettled的示例代码：

const promise1 = Promise.resolve(1);
const promise2 = Promise.reject('error');
const promise3 = Promise.resolve('hello');

Promise.allSettled([promise1, promise2, promise3])
  .then(results => {
    console.log(results);
  });

在上面的代码中，我们定义了三个Promise实例：promise1、promise2、promise3。其中promise2是一个rejected状态的Promise实例。当我们将这三个Promise实例传入Promise.allSettled中时，它会等待所有Promise实例settled之后返回一个数组，它的结果如下：

[
  {status: "fulfilled", value: 1},
  {status: "rejected", reason: "error"},
  {status: "fulfilled", value: "hello"}
]

3. 可迭代对象的新方法

ES6引入了可迭代协议，任何对象只要实现了可迭代协议，就可以使用for...of循环进行遍历。JavaScript也在不断地扩展可迭代对象的新方法，方便我们对数据进行操作。

下面是可迭代对象的新方法的示例代码：

const arr = ['a', 'b', 'c'];

console.log(arr.includes('a')); // 输出 true

const set = new Set([1, 2, 3]);

console.log(set.has(2)); // 输出 true

function* gen() {
  yield 1;
  yield 2;
  yield 3;
}
const g = gen();

console.log(g.next()); // {value: 1, done: false}
console.log(g.next()); // {value: 2, done: false}
console.log(g.next()); // {value: 3, done: false}
console.log(g.next()); // {value: undefined, done: true}

在上面的代码中，我们使用了数组、Set和生成器三个可迭代对象的新方法：includes、has和生成器的next方法。

4. 数组的flat和flatMap方法

数组是JavaScript中最常用的数据结构之一，它也在不断扩展新的方法。其中，flat方法可以将一个多维数组“扁平化”，而flatMap方法可以对每个元素执行一个函数，并且可以将函数执行结果“扁平化”成一个新数组。

下面是数组的flat和flatMap方法的示例代码：

const arr1 = [1, 2, [3, 4]];
const arr2 = [1, 2, [3, 4, [5, 6]]];

console.log(arr1.flat()); // 输出 [1, 2, 3, 4]
console.log(arr2.flat(2)); // 输出 [1, 2, 3, 4, 5, 6]

const arr3 = [1, 2, 3];

console.log(arr3.flatMap(x => [x * 2])); // 输出 [2, 4, 6]

在上面的代码中，我们使用了数组的flat和flatMap方法，对多维数组进行“扁平化”操作，并且使用flatMap方法对每个元素执行了一个函数。

5. import()动态导入模块

ES6引入了import和export语句，方便我们模块化代码。而ES2020引入了import()方法，它可以动态地导入模块，这样可以更好地控制代码的加载和执行顺序。

下面是import()动态导入模块的示例代码：

async function loadModule() {
  const calculator = await import('./calculator.js');
  const result = calculator.add(2, 3);
  console.log(result);
}

loadModule();

在上面的代码中，我们使用了import()方法动态地导入了calculator.js模块，然后使用await关键字等待模块加载完成。在模块加载完成后，我们调用其中的add方法计算了2+3的结果，并且输出了结果5。