专栏首页京程一灯每日前端夜话(0x02):ECMAScript 2016,2017和2018中所有新功能的示例(下)

每日前端夜话(0x02):ECMAScript 2016,2017和2018中所有新功能的示例(下)

原文:https://medium.freecodecamp.org/here-are-examples-of-everything-new-in-ecmascript-2016-2017-and-2018-d52fa3b5a70e 翻译:疯狂的技术宅

每日前端夜话,陪你聊前端。每天晚上准时推送 前文链接:ECMAScript 2016,2017和2018中所有新功能的示例(上)

ECMAScript目前正在最终草案中,将于2018年6月或7月结束。下面介绍的所有功能都在第4阶段,并将成为ECMAScript 2018的一部分。

1.共享内存和Atomics

这是一个巨大的,非常先进的功能,是JS引擎的核心增强功能。

主要思想是为JavaScript提供某种多线程功能,以便JS开发者可以通过自己管理内存——而不是让JS引擎管理内存——来编写高性能的并发程序。

这是通过一种名为SharedArrayBuffer(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer)的新型全局对象完成的,该对象实质上将数据存储在共享内存空间中。因此,这些数据可以在主JS线程和Web工作线程之间共享。

到目前为止,如果我们想在主JS线程和Web工作者之间共享数据,就必须复制数据并使用postMessage将其发送到另一个线程。以后不会再这样了!

只需使用SharedArrayBuffer,主线程和多个Web工作线程都可以立即访问数据。

但是在线程之间共享内存会导致竞争条件。为了帮助避免竞争条件,引入了“Atomics”全局对象(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Atomics)。 Atomics提供了各种方法,使得线程在使用其数据时锁定共享内存。它还提供了安全地更新共享内存中数据的方法。

建议通过某个库使用此功能,但是现在没有基于此功能构建的库。 如果你有兴趣,我建议阅读:

  1. From Workers to Shared Memory— lucasfcosta (http://lucasfcosta.com/2017/04/30/JavaScript-From-Workers-to-Shared-Memory.html)
  2. A cartoon intro to SharedArrayBuffers Lin Clark (https://hacks.mozilla.org/category/code-cartoons/a-cartoon-intro-to-sharedarraybuffers/)
  3. Shared memory and atomics Dr. Axel Rauschmayer (http://2ality.com/2017/01/shared-array-buffer.html)

2.删除了标记模板文字限制

首先,我们需要澄清“标记模板文字”是什么,以便我们更好地理解这个功能。

在ES2015 +中,有一个称为标记模板文字的功能,允许开发人员自定义字符串的插值方式。 例如,在标准方式中,字符串被插入如下…

在标记的文字中,你可以编写一个函数来接收字符串文字的硬编码部分,例如['Hello','!'],或者替换变量,例如['Raja'],作为参数进入自定义函数(例如greet),并从该自定义函数返回您想要的任何内容。

下面的示例演示自定义“标记”函数greet,根据当前时间返回例如“Good Morning!” “Good afternoon!”之类的字符串。

显示自定义字符串插值的标记功能示例

现在我们讨论了“Tagged”函数是什么,许多人想要在不同的领域中使用此功能,例如在终端中使用命令行或HTTP请求来拼接URIs等等。

⚠️标记字符串字符的问题 问题是在ES2015和ES2016规范不允许使用转义字符,如“\u”(unicode),“\x”(十六进制),除非它们看起来完全像\u00A9\u{2F804}\xA9

因此,如果你有一个Tagged函数在内部使用其他领域的规则(如终端的规则),可能需要使用\ubla123abla这样的字符,它看起来一点也不像\u0049或\u {@F804}的样子,最后你将会得到一个语法错误。

不过在ES2018中,只需要Tagged函数返回一个具有“cooked”属性(赋值为“undefined”)和“raw”属性( 你想要的任何内容)的对象即可。

1function myTagFunc(str) { 
2     return { "cooked": "undefined", "raw": str.raw[0] }
3} 
4
5var str = myTagFunc `hi \ubla123abla`; //call myTagFunc
6str // { cooked: "undefined", raw: "hi \\unicode" }

3.正则表达式的“dotall”标志

目前在正则表达式中,虽然点(“.”)应该与单个字符匹配,但它不能与\n \r \f等新行字符匹配。

例如:

1//Before
2/first.second/.test('first\nsecond'); //false

这个功能使点运算符可以匹配任何单个字符。 为了确保不会破坏任何内容,我们需要在创建正则表达式时使用\s标志才能使其正常工作。

1//ECMAScript 2018
2/first.second/s.test('first\nsecond'); //true   Notice: /s ??

以下是提案文档中的全部API:(https://github.com/tc39/proposal-regexp-dotall-flag)

ECMAScript 2018 — Regex dotAll feature allows matching even \n via “.” via /s flag

4. 正则表达式命名组?

此增强功能带来了其他语言(如Python,Java等)具有的正则功能,称为“命名组”。能够允许开发者编写正则表达式,通过格式(?<name>...)提供不同部分的名称(标识符)来进行分组。 这样一来就可以使用该名称轻松得到需要的任何分组。

4.1基本命名组示例

在下面的示例中,我们使用(?<year>) (?<month>) and (?<day>)名称对日期正则的不同部分进行分组。 生成的对象将包含一个groups属性,在groups属性中存在相应值的year, monthday属性。

CMAScript 2018 — Regex named groups example

4.2在正则表达式内使用命名组

我们可以使用 \k<group name> 格式来反向引用正则表达式本身中的组。 以下示例显示了它的工作原理。

ECMAScript 2018 — Regex named groups back referencing via \k<group name>

4.3在String.prototype.replace中使用命名组

命名组功能现在被内置到String的 replace 实例方法中。 所以我们可以轻松地替换字符串中的单词。

例如,将“firstName,lastName” 更改为“lastName,firstName”。

ECMAScript 2018 — Using RegEx’s named groups feature in replace function

5. 对象的rest属性

Rest运算符 ...(三个点)允许我们在提取Object属性时丢弃一些属性。

5.1 使用rest来帮助仅提取所需的属性

(ECMAScript 2018 — Object destructuring via rest)

5.2 更酷的是,你可以删除不需要的项目!??

(ECMAScript 2018 — Object destructuring via rest)

6.对象的Spread属性

Spread属性看起来就像具有三个点的rest属性...但不同之处在于使用spread来创建(重构)新对象。

提示:展开运算符用于等号的右侧。 其余的用在等号的左侧。

ECMAScript 2018 — Object restructuring via spread

7. 正则 Lookbehind 断言

这是对正则表达式的一种增强,它允许我们确认某些字符在其他字符串之前

现在可以使用一个组 (?<=…)(问号,小于,等于)来判断前向断言。

此外,也可以使用 (?<!…) (问号,小于,感叹号)来查看否定断言。 基本上,只要-ve断言通过,就会匹配。

积极断言: 假设我们要确保#符号存在于 winning 之前(即: #winning),并希望正则表达式只返回字符串“winning”。应该这样写。

ECMAScript 2018 — (?<=…) for positive assertion

否定断言: 假设我们想要从具有€符号的行中提取数字,同时忽略带有$符号的数字。

(ECMAScript 2018 — (?<!…) for negative assertions)

8. RegEx Unicode Property Escapes

编写匹配各种unicode字符的正则表达式并不容易。 像 \w , \W , \d 等的东西只匹配英文字符和数字。 但是其他语言如印地语,希腊语等中的数字该怎么处理呢?

这就是Unicode Property Escapes的用武之地。实际上,Unicode为每个符号(字符)添加元数据属性,并使用它来分组或表征各种符号。

例如,Unicode数据库将所有印地语字符(हिन्दी)归为一个名为Script的属性,其值为Devanagari,另一个属性为Script_Extensions,其值为Devanagari。 所以我们可以搜索Script = Devanagari并获得所有印地语字符。

梵文可以用于各种印度语言,如马拉地语,印地语,梵语等。

从ECMAScript 2018开始,可以用\p来转义字符以及用{Script = Devanagari}来匹配所有这些印度字符。 也就是说,我们可以在RegEx中使用:\p{Script = Devanagari}来匹配所有梵文字符。

(ECMAScript 2018 — showing \p)

同样,Unicode数据库将Script_Extensions(和Script)属性下的所有希腊字符组合为希腊语。 所以我们可以使用Script_Extensions = GreekScript = Greek搜索所有希腊字符。

也就是说,我们可以在RegEx中使用:\p{Script = Greek}来匹配所有希腊字符。

(ECMAScript 2018 — showing \p)

此外,Unicode数据库在布尔属性EmojiEmoji_ComponentEmoji_PresentationEmoji_ModifierEmoji_Modifier_Base下存储各种类型的Emojis,其属性值为“true”。 因此,我们只需选择表情符号即可搜索所有表情符号。

也就是说,我们可以使用: \p{Emoji} ,\Emoji_Modifier 等来匹配各种表情符号。

以下示例将演示这一点。

(ECMAScript 2018 — showing how \p can be used for various emojis)

最后,我们可以使用转义字符大写“P”(\P)而不是小p(\p)来进行否定匹配。

参考文献:

  1. ECMAScript 2018提案(https://mathiasbynens.be/notes/es-unicode-property-escapes)
  2. https://mathiasbynens.be/notes/es-unicode-property-escapes

9. Promise.prototype.finally()

finally()是一个添加到Promise的新实例方法。 其主旨是允许在resolvereject后运行回调以帮助清理。 finally的回调被调用时而没有任何参数,同时任何情况下都会被执行。

来看看各种情形。

(ECMAScript 2018 — finally() in resolve case)

(ECMAScript 2018 — finally() in reject case)

(ECMASCript 2018 — finally() in Error thrown from Promise case)

(ECMAScript 2018 — Error thrown from within catch case)

10.异步迭代

这是一个非常有用的功能。 它允许我们轻松的创建异步代码循环!

此功能添加了一个新的“for-await-of”循环,允许我们在循环中调用返回promises(或带有一堆promise的Arrays)的异步函数。更酷的是循环会在在进行下一个循环之前等待每个Promise。

ECMAScript 2018 — Async Iterator via for-await-of)

就是以上这些!

如果你觉得这对你有帮助,请点击下面的大拇指?并转发 ⬇⬇⬇??

本文分享自微信公众号 - 京程一灯(jingchengyideng)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-11-29

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 小结ES6基本知识点(三):类与继承

    ES6初学者,通过阅读本文可对ES6知识点有个大体的概念,强烈建议阅读阮一峰大大的ES6入门。

    前端林子
  • 【ES6基础】const介绍

    在ES6之前,JavaScript被其他编程语言诟病没有定义常量的能力,甚至在大多数企业的开发文档中,对于常量的定义都使用var。一般经常会使用所有字母大写和下...

    前端达人
  • js的arguments分析

    执行结果中可以发现,argument和函数的参数列表中的变量是有关联的,这里假设函数的实参和形参个数是一样的。这个结果的背后到底是怎么回事,看了一下es5的ar...

    theanarkh
  • 【ES6基础】箭头函数(Arrow functions)

    ES6中,除了let和const新特性,箭头函数是使用频率最高的新特性了。如果你曾经了解如日中天的JavaScript衍生语言CoffeeScript, 就会清...

    前端达人
  • 【ES6基础】展开语法(Spread syntax)

    今天是元宵佳节,在此小编祝大家元宵佳节快乐!今天小编在这里给大家继续介绍ES6的语法糖——展开语法(Spread syntax)。

    前端达人
  • ES文件浏览器CVE-2019-6447漏洞分析

    ES文件浏览器在启动时创建了一个HTTP服务器,在本地打开了59777端口。攻击者通过构造指定的payload可以获取用户手机文件,安装apk等操作。

    FB客服
  • js的bind函数那些你可能没想过的点

    加上上一篇文章中说的情况,我们可以总结到,当我们对一个bind返回的函数进行操作时,实际上这种操作是对目标函数的操作,也就是调用bind的函数。下面我们看一下e...

    theanarkh
  • 【ES6基础】默认参数值

    今天的内容很简单,小编将会给大家介绍调用函数过程中,如果其中的参数缺失,如何设置默认值。

    前端达人
  • JavaScript-包装对象

    (2)这7种数据类型中,对象为“引用类型”,其他六种为“原始类型”(或叫“基本类型”)。

    WEBING
  • JavaScript ES2019 中的 8 项新功能

    JavaScript 一直在不断改进和添加更多新功能。TC39 已经完成,并批准了 ES2019 的 8 项新功能。这个过程包含了 5 个阶段:

    一墨编程学习

扫码关注云+社区

领取腾讯云代金券