玩转 ECMAScript 2019：全面梳理 ES10 新特性

随着前端技术的发展，ECMAScript（以下简称 ES）也在不断更新，以满足开发者的需求，帮助开发者更加高效地编写代码。ES10 是 ES 的最新版本，它新增了一些重要的特性，这篇文章就来详细介绍。

1. Array.flat 和 Array.flatMap

在 ES10 中，Array 对象新增了两个方法：flat() 和 flatMap()。它们的作用都是对数组进行操作，具体来说：

• flat() 方法将嵌套的数组扁平化，返回一个新的数组。
• flatMap() 方法首先对数组中的每个元素执行一个映射函数，然后将结果扁平化成一个新数组。

下面是一个示例代码：

const arr = [1, 2, [3, 4, [5, 6]]];
const flattenedArr = arr.flat(2); // [1, 2, 3, 4, 5, 6]

const arr2 = [1, 2, 3];
const mappedArr = arr2.flatMap(x => [x * 2]); // [2, 4, 6]

2. Object.fromEntries

这个新的静态方法非常有用，它允许我们将键值对数组转换为对象。具体来说，它可以将一个由键值对组成的数组转换成一个对象，并且可以链式使用。下面是一个示例代码：

const entries = [['name', 'Tina'], ['age', 26], ['city', 'Shanghai']];
const person = Object.fromEntries(entries);
console.log(person); // { name: "Tina", age: 26, city: "Shanghai" }

const newPerson = Object.fromEntries(entries).city.toUpperCase();
console.log(newPerson); // "SHANGHAI"

3. String.trimStart 和 String.trimEnd

在 ES10 中，String 对象新增了两个方法：trimStart() 和 trimEnd()，用来删除字符串开头和结尾的空格。下面是一个示例代码：

const str = '   hello world!   ';
console.log(str.trimStart()); // 'hello world!   '
console.log(str.trimEnd()); // '   hello world!'

4. catch 绑定

在以前的版本中，使用 catch 捕获异常时需要先声明一个变量，例如：

try {
  // 执行一些可能会抛出异常的代码
} catch (e) {
  // 处理异常
}

在 ES10 中，可以省略掉 catch 的参数，将异常直接绑定到一个变量，例如：

try {
  // 执行一些可能会抛出异常的代码
} catch {
  // 处理异常，异常会被绑定到一个变量中
}

5. Array.sort 稳定化

在 ES10 之前，Array.sort() 的排序算法不一定是稳定的。在 ES10 中，排序算法已经被修改为稳定的，因此排序结果不会出现意外。下面是一个示例代码：

const arr = [{ name: '张三', age: 30 }, { name: '李四', age: 20 }, { name: '王五', age: 30 }];
arr.sort((a, b) => a.age - b.age);
console.log(arr);
// 输出 [{"name":"李四","age":20},{"name":"张三","age":30},{"name":"王五","age":30}]

6. 其他特性

除了以上提到的特性，ES10 还新增了一些其他的特性，例如：

• Symbol.prototype.description: 允许访问 Symbol 实例的描述信息。
• 动态 import: 允许在运行时动态 import 模块，不需要在脚本的头部进行声明。

总结

ES10 新增的特性使得我们能够更加高效地编写代码，提高开发效率。在学习过程中，我们一定要理解这些特性的语法和用途，这样才能发挥它们的优势。

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