20多个小事例带你重温ES10新特性(小结)

ES10 虽然没有像 ES6 那么多新特性,但 ES10 仍然有一些有用的特性。文本通过简单示例来介绍了 ES10 新出来的特性。通过这种方式,咱们就可以快速理解,而不需要看太多的官方解释。

ES10 新特性主要如下:

数组方法:flat和flatMap

Object.fromEntries

字符串方法:trimStart 和 trimEnd

Symbol 的 description 属性

try { } catch {} // catch 的参数可以省略了

JSON ⊂ ECMAScript (让 ECMAScript 兼容所有 JSON 支持的文本)

格式良好的 JSON.stringify()

稳定的 Array.prototype.sort()

修正后的 Function.toString

BigInt 是第七种 原始类型

动态导入

标准化 globalThis 对象

1. Array.flat() && Array.flatMap

Array.flat() 方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

Array.flatMap() 方法首先使用映射函数映射每个元素,然后将结果压缩成一个新数组。它与 map 和 深度值1的 flat 几乎相同,但 flatMap 通常在合并成一种方法的效率稍微高一些。

事例一:

Array.flat()

let multi = [1,2,3,[4,5,6,[7,8,9,[10,11,12]]]]; multi.flat(); // [1,2,3,4,5,6,Array(4)] multi.flat().flat(); // [1,2,3,4,5,6,7,8,9,Array(3)] multi.flat().flat().flat(); // [1,2,3,4,5,6,7,8,9,10,11,12] multi.flat(Infinity); // [1,2,3,4,5,6,7,8,9,10,11,12]

Array.flatMap()

let array = [1, 2, 3, 4, 5]; array.map(x => [x, x * 2]);

array 现在的结果:

[Array(2), Array(2), Array(2)] 0: (2)[1, 2] 1: (2)[2, 4] 2: (2)[3, 6]

使用 flatMap 方式:

array.flatMap(v => [v, v * 2]); [1, 2, 2, 4, 3, 6, 4, 8, 5, 10]

综合示例:

20多个小事例带你重温ES10新特性(小结)

2.Object.fromEntries()

Object.fromEntries() 方法把键值对列表转换为一个对象。

事例一:

let obj = { apple : 10, orange : 20, banana : 30 }; let entries = Object.entries(obj); entries; (3) [Array(2), Array(2), Array(2)] 0: (2) ["apple", 10] 1: (2) ["orange", 20] 2: (2) ["banana", 30] let fromEntries = Object.fromEntries(entries); { apple: 10, orange: 20, banana: 30 }

事例二:

20多个小事例带你重温ES10新特性(小结)

3.String.protype.matchAll

早期的一个问题是,如何编写正则表达式“match all”?

最佳的答案将建议 String.match 与正则表达式和 /g 一起使用或者带有 /g 的 RegExp.exec 或者带有 /g 的 RegExp.test 。

咱们先看看旧规范是如何工作的。

带字符串参数的 String.match 仅返回第一个匹配:

let string = 'Hello'; let matches = string.match('l'); console.log(matches[0]); // "l"

结果是单个 "l"(注意:匹配存储在 matches[0] 中而不是 matches)

将 string.match 与 regex 参数一起使用也是如此:

使用正则表达式 /l/ 找到字符 串“hello” 中的 “l” 字符:

let string = "Hello"; let matches = string.match(/l/); console.log(matches[0]); // "l"

添加 /g 混合

let string = "Hello"; let ret = string.match(/l/g); // (2) [“l”, “l”];

那么为什么要使用全新的 matchAll 方法呢? 在解疑这个问题之前,先来看看 捕获组。

正则表达式捕获组

在 regex 中捕获组只是从 () 括号中提取一个模式,可以使用 /regex/.exec(string) 和string.match 捕捉组。

常规捕获组是通过将模式包装在 (pattern) 中创建的,但是要在结果对象上创建 groups 属性,它是: (?<name>pattern)。

要创建一个新的组名,只需在括号内附加 ?<name>,结果中,分组 (pattern) 匹配将成为 group.name,并附加到 match 对象,以下是一个实例:

字符串标本匹配:

这里创建了 match.groups.color 和 match.groups.bird :

const string = 'black*raven lime*parrot white*seagull'; const regex = /(?<color>.*?)\*(?<bird>[a-z0-9]+)/g; while (match = regex.exec(string)) { let value = match[0]; let index = match.index; let input = match.input; console.log(`${value} at ${index} with '${input}'`); console.log(match.groups.color); console.log(match.groups.bird); }

需要多次调用 regex.exec 方法来遍历整个搜索结果集。 在每次迭代期间调用.exec 时,将显示下一个结果(它不会立即返回所有匹配项),因此使用 while 循环。

输出如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/78b977f1c6b78a505df637ee1c709f1d.html