从 ES9 到 ES11，详解 ECMAScript 的最新进展及未来趋势

ECMAScript，简称 ES，是一种基于 JavaScript 的脚本语言标准。自从 1997 年第一版发布以来，ECMAScript 已经经历了多次更新和迭代。其中，ES9 到 ES11 是最近三个版本，也是最为关注的版本。本文将详细介绍 ES9 到 ES11 的新特性和未来趋势，并提供一些示例代码和指导意义。

ES9

ES9（也称为 ECMAScript 2018）是在 2018 年发布的。它引入了以下新特性：

Async Iteration

在 ES9 中，我们可以使用 for-await-of 语法来迭代异步生成器中的值。例如：

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

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

输出结果为：

1
2
3

Rest/Spread Properties

ES9 引入了使用 ... 语法来操作对象和数组的 rest 和 spread 属性。例如：

const obj1 = { a: 1, b: 2, c: 3 };
const { a, ...rest } = obj1;
console.log(a); // 1
console.log(rest); // { b: 2, c: 3 }

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
console.log(arr2); // [1, 2, 3, 4, 5]

Promise.prototype.finally()

ES9 引入了 Promise.prototype.finally() 方法，它可以在 Promise 执行结束后执行一些清理工作，无论 Promise 是成功还是失败。例如：

Promise.resolve(1)
  .then(() => {
    throw new Error('error');
  })
  .catch(() => {})
  .finally(() => {
    console.log('finally');
  });

输出结果为：

finally

ES10

ES10（也称为 ECMAScript 2019）是在 2019 年发布的。它引入了以下新特性：

Array.prototype.flat()

ES10 引入了 Array.prototype.flat() 方法，它可以将多维数组转换为一维数组。例如：

const arr1 = [1, [2, [3]]];
const arr2 = arr1.flat();
console.log(arr2); // [1, 2, [3]]

Array.prototype.flatMap()

ES10 引入了 Array.prototype.flatMap() 方法，它可以在 map() 之后直接将结果展开一层。例如：

const arr1 = [1, 2, 3];
const arr2 = arr1.flatMap(num => [num * 2]);
console.log(arr2); // [2, 4, 6]

String.prototype.trimStart() 和 String.prototype.trimEnd()

ES10 引入了 String.prototype.trimStart() 和 String.prototype.trimEnd() 方法，它们可以分别去除字符串开头和结尾的空格。例如：

const str1 = '  hello world  ';
const str2 = str1.trimStart();
const str3 = str1.trimEnd();
console.log(str2); // 'hello world  '
console.log(str3); // '  hello world'

ES11

ES11（也称为 ECMAScript 2020）是在 2020 年发布的。它引入了以下新特性：

Optional Chaining

ES11 引入了 ?. 语法，它可以简化访问嵌套对象时的判断。例如：

const obj1 = { a: { b: { c: 1 } } };
const num1 = obj1?.a?.b?.c;
console.log(num1); // 1

const obj2 = null;
const num2 = obj2?.a?.b?.c;
console.log(num2); // undefined

Nullish Coalescing

ES11 引入了 ?? 语法，它可以简化判断一个值是否为 null 或 undefined。例如：

const num1 = null ?? 1;
console.log(num1); // 1

const num2 = undefined ?? 2;
console.log(num2); // 2

const num3 = 0 ?? 3;
console.log(num3); // 0

Promise.allSettled()

ES11 引入了 Promise.allSettled() 方法，它可以等待所有 Promise 完成后返回结果，不管 Promise 成功还是失败。例如：

const promise1 = Promise.resolve(1);
const promise2 = Promise.reject(new Error('error'));
const promise3 = Promise.resolve(3);

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

输出结果为：

[
  { status: 'fulfilled', value: 1 },
  { status: 'rejected', reason: Error: error },
  { status: 'fulfilled', value: 3 }
]

未来趋势

ECMAScript 的未来趋势是向更加简洁、易用、安全的方向发展，同时也会更加注重性能和可维护性。以下是一些可能的未来特性：

Record 和 Tuple 类型

ECMAScript 可能引入 Record 和 Tuple 类型，它们可以更好地支持键值对和元组操作。

空值合并运算符

ECMAScript 可能引入 ??= 运算符，它可以简化给变量赋默认值的操作。

链式操作符

ECMAScript 可能引入链式操作符，它可以简化对链式调用的处理。

结论

本文详细介绍了 ECMAScript 从 ES9 到 ES11 的新特性和未来趋势。这些新特性和未来趋势可以帮助我们更加高效、简洁地编写 JavaScript 代码。同时，也提醒我们需要不断学习和掌握新的技术，以便在前端开发中不断提高自己的技能水平。

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