前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >ES10新特性(一)

ES10新特性(一)

作者头像
ConardLi
发布2019-05-23 22:34:00
9550
发布2019-05-23 22:34:00
举报
文章被收录于专栏:code秘密花园code秘密花园

ES10 还只是一个草案。但是除了 Object.fromEntries 之外,Chrome 的大多数功能都已经实现了,为什么不早点开始探索呢?当所有浏览器都开始支持它时,你将走在前面,这只是时间问题。

BigInt -任意精度整数

BigInt 是第七种 原始类型。

BigInt 是一个任意精度的整数。这意味着变量现在可以 表示²⁵³ 数字,而不仅仅是9007199254740992。

代码语言:javascript
复制
const b = 1n;  // 追加 n 以创建 BigInt

在过去,不支持大于 9007199254740992 的整数值。如果超过,该值将锁定为 MAXSAFEINTEGER + 1:

代码语言:javascript
复制
const limit = Number.MAX_SAFE_INTEGER;⇨ 9007199254740991limit + 1;⇨ 9007199254740992limit + 2;⇨ 9007199254740992 <--- MAX_SAFE_INTEGER + 1 exceededconst larger = 9007199254740991n;⇨ 9007199254740991nconst integer = BigInt(9007199254740991); // initialize with number⇨ 9007199254740991nconst same = BigInt("9007199254740991"); // initialize with "string"⇨ 9007199254740991n

typeof

代码语言:javascript
复制
typeof 10;⇨ 'number'typeof 10n;⇨ 'bigint'

等于运算符可用于两种类型之间比较:

代码语言:javascript
复制
10n === BigInt(10);⇨ true10n == 10;⇨ true

数学运算符只能在自己的类型中工作:

代码语言:javascript
复制
200n / 10n⇨ 20n200n / 20⇨ Uncaught TypeError:   Cannot mix BigInt and other types, use explicit conversions <

-运算符可以操作, + 不可用

代码语言:javascript
复制
-100n⇨ -100n+100n⇨ Uncaught TypeError:  Cannot convert a BigInt value to a number

当你读到这篇文章的时候,matchAll 可能已经在 Chrome C73 中正式实现了——如果不是,它仍然值得一看。特别是如果你是一个正则表达式(regex)爱好者。

string.prototype.matchAll()

如果您运行谷歌搜索JavaScript string match all,第一个结果将是这样的:如何编写正则表达式“match all”?

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

首先,让我们看看旧规范是如何工作的。

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

代码语言:javascript
复制
let string = 'Hello';let matches = string.match('l');console.log(matches[0]); // "l"

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

在“hello”中搜索 "l" 只返回 "l"。

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

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

代码语言:javascript
复制
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”];

很好,我们使用 < ES10 方式得到了多个匹配,它一直起作用。

那么为什么要使用全新的 matchAll 方法呢? 在我们更详细地回答这个问题之前,让我们先来看看 捕获组。如果不出意外,你可能会学到一些关于正则表达式的新知识。

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

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

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

字符串标本匹配:

代码语言:javascript
复制
black*raven lime*parrot white*seagull

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

代码语言:javascript
复制
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 循环。

输出如下:

代码语言:javascript
复制
black*raven at 0 with 'black*raven lime*parrot white*seagull'blackravenlime*parrot at 11 with 'black*raven lime*parrot white*seagull'limeparrotwhite*seagull at 23 with 'black*raven lime*parrot white*seagull'whiteseagull

但奇怪的是:

如果你从这个正则表达式中删除 /g,你将永远在第一个结果上创建一个无限循环。这在过去是一个巨大的痛苦。想象一下,从某个数据库接收正则表达式时,你不确定它的末尾是否有 /g,你得先检查一下。

使用 .matchAll() 的好理由

  • 在与捕获组一起使用时,它可以更加优雅,捕获组只是使用 () 提取模式的正则表达式的一部分。
  • 它返回一个迭代器而不是一个数组,迭代器本身是有用的。
  • 迭代器可以使用扩展运算符 (…) 转换为数组。
  • 它避免了带有 /g 标志的正则表达式,当从数据库或外部源检索未知正则表达式并与陈旧的RegEx 对象一起使用时,它非常有用。
  • 使用 RegEx 对象创建的正则表达式不能使用点 (.) 操作符链接。

- 高级: RegEx 对象更改跟踪最后匹配位置的内部 .lastindex 属性,这在复杂的情况下会造成严重破坏。

.matchAll() 是如何工作的?

让我们尝试匹配单词 hello 中字母 e 和 l 的所有实例, 因为返回了迭代器,所以可以使用 for…of 循环遍历它:

代码语言:javascript
复制
// Match all occurrences of the letters: "e" or "l" let iterator = "hello".matchAll(/[el]/);for (const match of iterator)    console.log(match);

这一次你可以跳过 /g, .matchall 方法不需要它,结果如下:

代码语言:javascript
复制
[ 'e', index: 1, input: 'hello' ] // Iteration 1[ 'l', index: 2, input: 'hello' ] // Iteration 2[ 'l', index: 3, input: 'hello' ] // Iteration 3

使用 .matchAll() 捕获组示例:

.matchAll 具有上面列出的所有好处。它是一个迭代器,可以用 for…of 循环遍历它,这就是整个语法的不同。

代码语言:javascript
复制
const string = 'black*raven lime*parrot white*seagull';const regex = /(?<color>.*?)\*(?<bird>[a-z0-9]+)/;for (const match of string.matchAll(regex)) {    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);}

请注意已经没有 /g 标志,因为 .matchAll() 已经包含了它,打印如下:

代码语言:javascript
复制
black*raven at 0 with 'black*raven lime*parrot white*seagull'blackravenlime*parrot at 11 with 'black*raven lime*parrot white*seagull'limeparrotwhite*seagull at 23 with 'black*raven lime*parrot white*seagull'whiteseagull

也许在美学上它与原始正则表达式非常相似,执行while循环实现。但是如前所述,由于上面提到的许多原因,这是更好的方法,移除 /g 不会导致无限循环。

动态导入

现在可以将导入分配给变量:

代码语言:javascript
复制
element.addEventListener('click', async() => {  const module = await import(`./api-scripts/button-click.js`);  module.clickEvent();})

Array.flat()

扁平化多维数组:

代码语言:javascript
复制
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()

代码语言:javascript
复制
let array = [1, 2, 3, 4, 5];array.map(x => [x, x * 2]);

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

结果:

代码语言:javascript
复制
[Array(2), Array(2), Array(2), Array(2), Array(2)]0: (2) [1, 2]1: (2) [2, 4]2: (2) [3, 6]3: (2) [4, 8]4: (2) [5, 10]

使用 flatMap 方法:

代码语言:javascript
复制
array.flatMap(v => [v, v * 2]);[1, 2, 2, 4, 3, 6, 4, 8, 5, 10]

Object.fromEntries()

将键值对列表转换为对象:

代码语言:javascript
复制
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 }

String.trimStart() 与 String.trimEnd()

代码语言:javascript
复制
let greeting = "     Space around     ";greeting.trimEnd();   // "     Space around";greeting.trimStart(); // "Space around     ";
本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2019-03-05,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 code秘密花园 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • BigInt -任意精度整数
  • string.prototype.matchAll()
  • - 高级: RegEx 对象更改跟踪最后匹配位置的内部 .lastindex 属性,这在复杂的情况下会造成严重破坏。
  • 动态导入
  • Array.flat()
  • Array.flatMap()
  • Object.fromEntries()
  • String.trimStart() 与 String.trimEnd()
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档