Es12 与 Es2021：剖析新一轮的 ES 标准发布-JavaScript中文网-JavaScript教程资源分享门户

ES（EcmaScript）是一种基于 Javascript 的脚本语言。自1997年第一次发布以来，ES已经成为了 Web 开发中最重要的一种技术。每一次 ES 的发布，都代表着 Web 开发界面向更高级的语法和更好的性能迈进了一步。

在本篇文章中，我们将来探讨 Es12（ES2019）和 Es2021 的一些新特性。

Es12（ES2019）

1. Array.flat 和 Array.flatMap

在 ES6 中，我们引入了 Array.reduce 方法，用于数组的归纳计算。在 ES12 中，我们再次扩展了 reduce 方法，加入了 flat 和 flatMap 方法。这两个方法同样适用于数组，可以将数组展开成一维，并且可以把展开后的数组打平成新的一维数组。

示例代码：

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

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

2. String.trimStart 和 String.trimEnd

在 ES12 中，我们增加了 String.trimStart 和 String.trimEnd 方法，用于移除字符串首尾的空格，这个方法是 String.trim 方法的语法糖。

示例代码：

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

3. Object.fromEntries

在 ES12 中，我们新增了一个 Object.fromEntries 方法，它可以将一个包含键值对的对象转换成一个 Map 对象，或者一个二维数组。这个方法可以使我们在处理数据时更加灵活。

示例代码：

const obj = { foo: 'bar', baz: 42 };
const entries = Object.entries(obj); // [['foo', 'bar'], ['baz', 42]]
const map = new Map(entries); // Map { 'foo' => 'bar', 'baz' => 42 }

const arr = [['foo', 'bar'], ['baz', 42]];
const obj2 = Object.fromEntries(arr); // { foo: 'bar', baz: 42 }

Es2021

1. String.replaceAll

在 ES2021 中，我们新增了一个 String.replaceAll 方法，可以替换所有匹配到的字符串，而不仅仅是第一个匹配到的字符串。

示例代码：

const str = 'hello world, hello world';
console.log(str.replaceAll('hello', 'hi')); // 'hi world, hi world'

2. Promise.any

在 ES2021 中，我们新增了一个 Promise.any 方法。与 Promise.all 不同，Promise.any 只要有一个 Promise 成功就会 resolve。如果所有 Promise 都失败，则 Promise.any 将会 reject。

示例代码：

const promises = [
  Promise.reject("error1"),
  Promise.resolve("success"),
  Promise.reject("error2")
];

Promise.any(promises).then(result => console.log(result)); // "success"

3. Logical Assignment Operators

在 ES2021 中，我们引入了三个 Logical Assignment Operators，即 ||=,&&=,??=，用于在变量赋值的同时进行逻辑判断。

示例代码：

let a = 0;
a ||= 1; // equivalent to: a || (a = 1)
console.log(a); // 1

let b;
b ??= 2; // equivalent to: b === null || b === undefined ? b = 2 : b
console.log(b); // 2

总结

本文介绍了 Es12 和 Es2021 的一些新特性，我们可以看到，ES 的持续发展为我们带来了更好的编程体验和更高的性能。在实际开发中，我们可以根据自己的项目需要选择合适的 ES 版本，并且灵活的运用新特性，从而提升代码质量和效率。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6536fec57d4982a6ebf49efc