ES 9/10 中所有新特性列表及教程-JavaScript中文网-JavaScript教程资源分享门户

ECMAScript是JavaScript的标准规范，它的版本也逐渐增加。其中，ES 9和ES 10的相继发布，也给前端开发者带来了不少好处。本篇文章就来详细介绍ES 9和ES 10中的所有新特性以及代码示例，帮助前端开发者更好地学习和应用。

ES 9 新特性

异步迭代

在ES 9中，引入了异步迭代的特性，让事情更进一步。有for-await-of语句，可以遍历异步迭代器中的结果：

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

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

Promise.finally()

ES 9引入了Promise.finally()方法，它接受一个回调，不管前面的Promise是resolve还是reject，它都会执行：

Promise.resolve(1)
.then(() => {/* Success! */})
.catch(() => {/* Error! */})
.finally(() => {/* This will be executed */});

Rest/Spread 属性

ES 9中还引入了Rest/Spread的属性，用于方便操作对象和数组。例如，使用...操作符从一个对象或者数组中获取剩余属性或元素，或者将一些新的属性或元素传入：

// Rest operator
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 }; // z = { a: 3, b: 4 }

// Spread operator
let spread1 = [1, 2, 3];
let spread2 = [4, 5, 6];
let spread3 = [...spread1, ...spread2]; // [1, 2, 3, 4, 5, 6]

RegExp 更新

ES 9中也更新了RegExp，增加了s修饰符，它可以匹配包括换行符在内的任意字符：

const regex = /foo.bar/s;
regex.test('foo\nbar'); // true

Unicode 正则表达式

ES 9中还增加了Unicode相关的正则表达式特性，例如正则表达式可以\p{}来匹配unicode属性：

console.log(/\p{Emoji_Presentation}/u.test('👍')); //true
console.log(/\p{Script=Hiragana}/u.test('あ')); //true

ES 10 新特性

Array.flat()

Array.flat() 方法可以用于平坦化嵌套数组，将多维数组转化为一维数组：

let arr = [[1,2,3], [4,5,6], [7,8,9]];
let flatArr = arr.flat(); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

Array.flatMap()

Array.flatMap() 方法可以先对数组进行映射，然后将所有结果压缩成一个新的数组：

let arr = [1, 2, 3];
let flatMapArr = arr.flatMap(x => [x, x * 2]); // [1, 2, 2, 4, 3, 6]

String.trimStart() / String.trimEnd()

String.trimStart()和String.trimEnd() 方法用于去掉字符串首尾的空格：

let str = '  hello world  ';
str.trimStart(); // 'hello world  '
str.trimEnd(); // '  hello world'

Object.fromEntries()

Object.fromEntries() 方法将列表转换为对象：

let entries = [['name', 'Cindy'], ['age', 20]];
let obj = Object.fromEntries(entries); // {name: "Cindy", age: 20}

try-catch 中使用迭代器

在 ES10 中，我们可以在 try-catch 中使用迭代器。现在，如果我们循环一个迭代器时抛出异常，可以使用捕捉机制。

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

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

BigInt

BigInt 是一种新的基本数据类型，是ES10最重要的新特性之一，用于表示大于2^53-1的整数：

const a = 2n ** 53n;
const b = 12345678901234567890n;

总结

ES 9和ES 10带来的新特性让JavaScript更具吸引力，提供了更多可选的编程工具。通过本文的介绍，相信您已经对ES 9和ES 10中的新特性有了一个全面的了解。这些新特性可以帮助我们写出更高效，更可维护的代码。

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