盘点ES7、ES8、ES9、ES10的新特性

2020-02-10 投稿人 : www.hebeihongye.com.cn 围观 : 1341 次

2.ES7引入幂算子* *

指数算子,其计算结果与数学等价。Power ()

对power operator的支持:

ES8 New Feature

1.Async/Await

我们都知道使用Promise可以很好地解决回调到地狱的问题,但是如果处理流程更加复杂,那么整段代码就会充满Then,语义含义不明显,代码不能很好地代表执行过程。还有比承诺更优雅的异步方式吗?

如果有这样的使用场景:您需要先请求链接A,然后在返回信息后请求链接到链接B的另一个资源。下面的代码显示提取用于实现这样的需求。fetch在窗口对象中定义,并返回一个Promise对象。

虽然上面的代码可以实现这个要求,但是它的语义并不明显,并且代码不能很好地代表执行过程。因此,ES8引入了async/wait,这是JavaScript异步编程的一个主要改进,提供了使用同步代码异步访问资源而不阻塞主线程的能力,并使代码逻辑更加清晰。

通过上面的代码,您会发现整个异步处理逻辑是通过使用同步代码来实现的,并且它还支持尝试捕捉异常。这就像写同步代码,所以它与人们的线性思维非常一致。应该强调的是,wait不能与async分开使用。等待后必须跟一个承诺对象。如果不是,它将自动包装为Promise对象。

根据MDN定义,async是一个异步执行的函数,并隐式返回Promise作为结果。

在上面的代码中,我们可以看到调用异步声明的foo函数返回一个Promise对象,它相当于下面的代码:

Async/Await support:

2。Object.values()、Object.entries()

ES5引入了Object.keys方法,并返回一个数组,该数组的成员是参数对象本身(不包括继承)的所有可枚举属性的键名。ES8引入了与对象键匹配的对象值和对象条目,作为遍历对象的辅助手段.回收利用。

Object.values方法返回一个数组,该数组的成员是参数对象本身的所有可枚举属性的键值(不包括继承)。

应该注意的是,如果属性名是数字,它会根据数值从小到大遍历,所以返回的顺序是B、C和a。

Object . entries()方法返回参数对象本身所有可枚举属性的键值对数组(不包括继承)。这个特性将在ES10的对象中稍后提到。

Object.values()与Object.entries()兼容。以下示例是Object.values ():

3。字符串填充

String将两个实例函数String.prototype.padStart和String.prototype.padEnd添加到ES8,允许在原始字符串的开头或结尾添加空字符串或其他字符串。让我们首先看看用法语法:

targetLength(必需):当前字符串需要填充的目标长度。如果该值小于当前字符串的长度,则返回当前字符串本身。

padString(可选):填充字符串。如果字符串太长,以致填充字符串的长度超过目标长度,则仅保留最左边的部分,其他部分将被截断。此参数的默认值为“”。

有时当我们处理日期和金额时,我们经常需要格式化它们。此功能很有用:

字符串填充支持:

4 . object . GetOwnPropertyDescriptor()

ES5 Object . GetOwnPropertyDescriptor()方法返回对象属性的描述符。ES8引入了对象。方法,该方法返回指定对象的所有自身属性(非继承属性)的描述对象。

得到如下结果:

引入此方法的目的主要是为了解决Object.assign()无法正确复制get属性和set属性的问题。让我们看一个例子:

返回以下结果:

在上面的代码中,源对象的foo属性值是一个赋值函数,Object.assign方法将该属性复制到target1对象,导致该属性值变得未定义。这是因为Object.assign方法总是复制属性值,而不复制赋值方法或其后面的取值方法。

此时,object.getownpropertydescriptors()方法和Object.defineProperties()方法可以实现正确的复制。

返回以下结果:

object . getownpropertysdescriptors():

ES9 new feature

1 . for of

for方法可以用Symbol.iterator接口遍历同步迭代器数据,但不能遍历异步迭代器。ES9中新添加的aawait可用于使用Symbol.asyncIterator方法遍历数据结构,即异步迭代器,并在遍历到下一个成员之前等待前一个成员的状态发生变化,这相当于异步函数内部的感知。现在我们有三个异步任务。我们如何依次实现产出结果?

得到下面的结果:

上面的代码证明FOR方法不能遍历异步迭代器,结果不是我们所期望的,所以for await开始发挥作用!

当使用for await of traversal时,它会在遍历到下一个成员之前等待前一个Promise对象的状态发生变化。对

异步迭代器的支持:

2 . objectrestspread

es6添加的最有趣的特性之一是spread运算符。您不仅可以用cancat()和slice()方法替换cancat()和slice()方法,使数组的操作(复制和合并)更简单,还可以在数组必须作为函数参数分解时使用spread运算符。

ES9通过向对象文本添加扩展属性来进一步扩展该语法。他可以将一个对象的属性复制到另一个对象。参考下面代码:

的情况,他可以将输入对象的所有数据添加到输出对象中。应该注意的是,如果存在相同的属性名,只有最后一个才会生效。

在上面的例子中,输入对象中的值被修改,输出没有改变,这表明扩展操作符复制了一个对象(像这个对象j2={.obj1})仅实现对象的浅拷贝。值得注意的是,如果属性值是一个对象,该对象的引用将被复制:

copy1.x和copy2.x指向同一对象的引用,因此它们严格相等。

让我们再看一遍Object rest的例子:

当对象键值不确定时,将所需的键分配给变量,并使用一个变量来收敛其他可选的键数据,这在以前是不可能的。请注意,rest属性必须始终出现在对象的末尾,否则将引发错误。

休息与传播是相容的。以下示例为“扩展”:

3。promise . prototype . finally()

promise . prototype . finally()方法返回一个承诺。在承诺执行结束时,无论结果是实现还是拒绝,最后指定的回调函数都将在它们()和catch()之后执行。

无论操作是否成功,当操作完成后需要清理时,finally()方法会派上用场。这提供了一种方法来指定在执行承诺后,无论结果是实现还是拒绝,都需要执行的代码,从而避免了同一语句需要在then()和catch()中写入一次的情况。支持

Promise . prototype . finally():

4。新的正则表达式特性

ES9为正则表达式添加了四个新特性,进一步提高了JavaScript的字符串处理能力。这些特性如下:

s (dotAll)标志

名称捕获组

Lookback行断言

Unicode属性转义

s (dotAll)标志

正则表达式,点(。)是一个特殊字符,表示任何单个字符,但有两个例外。一个是四字节UTF-16字符,可以用U修饰符来解决。另一个是行终止符,如换行字符(\n)或回车符(\r)。这可以通过ES9的s(dotAll)标志将s添加到原始正则表达式中来表示,以指示:

。我们如何判断当前正则表达式中是否使用了dotAll模式?

(2)命名捕获组

在某些正则表达式模式中,与数字匹配可能会令人困惑。例如,使用正则表达式/(\d{4})-(\d{2})-(\d{2})/来匹配日期。因为美国英语中的日期表示不同于英国英语中的日期表示,所以很难区分哪个组表示日期,哪个组表示:

ES9的月份。引入了命名捕获组,以允许每个组匹配并指定一个名称,这便于读取代码和引用。

在上面的代码中,“命名捕获组”在括号内,“问号尖括号组名称”(?),然后可以在exec方法返回的结果的groups属性上引用组名。

命名捕获组也可以用在replace()方法中,例如,将日期转换为美国的毫米-DD-YYY格式:

(3)后行断言

JavaScript语言正则表达式,只支持前行断言,不支持后行断言,前行断言可以简单地理解为“先满足一个条件,然后确定后一个条件是否满足”,如下例所示:

但是有时我们想在你好之前确定世界,这段代码没有实现。ES9支持以下断言:

(?这是你第一次能够找到这样做的方法。)是首先断言,然后组合=(等于),(不相等),\1(捕获匹配)。

(4)Unicode属性escape

ES2018引入了一个新的类符号\p{.和.},它允许正则表达式匹配符合Unicode属性的所有字符。例如,您可以使用{Number}来匹配所有的Unicode数字,例如,假设您想要匹配Unicode字符?字符串:

同样,您可以使用字母来匹配所有的Unicode单词字符:

也有一个负的Unicode属性转义模板.}

除了字母和数字,Unicode属性转义还可以使用其他属性。

支持上述功能

ES10新功能

1。多维数组是一种常见的数据格式,尤其是在检索数据时。均衡多维数组是一个常见的要求。通常我们可以做到,但不够优雅。

flat()方法递归遍历指定深度的数组,并将遍历子数组中的所有元素和元素作为新数组返回。

接下来让我们看两个例子:

上面的两个例子显示扁平参数没有设置,默认值是1,这意味着只有第一个级别是扁平的。当平面参数大于或等于2时,返回值是[1,2,3,4,5,6]。支持

Array . prototype . flat:

2 . array.prototype.flatmap()

使用flag方法,自然会有Array . prototype . flat map方法,它首先使用映射函数映射每个元素,然后将结果压缩到新数组中。从方法的名称中还可以看出,它包含两部分功能:一部分是map,另一部分是flat(深度为1)。

flatMap实际上是地图和平面操作的组合,因此它只能对一个图层进行分级。对

Array.prototype.flatmap的支持:

3 . object . from entries()

object . from entries这个新的应用编程接口实现了与Object.entries相反的操作,这使得基于对象的条目获取对象变得很容易。

ES2017引入了Object.entries,它可以将对象转换成数组,以便对象可以使用数组原型中的许多内置方法,如映射、过滤、还原。例如,我们希望在以下对象obj中提取值大于21的所有键值对。如何操作?

数组arr是在上面的例子中获得的。如果您想再次将其转换为对象,您需要手动编写一些代码来处理它。但是,使用Object.fromEntries(),很容易实现

Object . FrOmEntries():

4的支持。字符串. Trimsstart和字符串. Trimond

删除开头和结尾的空格。以前,我们使用正则表达式来实现它。现在ES10增加了两个新功能,让它变得更简单!

trimStart()方法删除字符串开头的空格。trimLeft()是此方法的别名。

trimEnd()方法删除字符串右端的空白字符。trimRight是trimmend的别名。

String.trimStart和String.trimEnd之间的兼容性是一致的。下图以trimStart为例:

5 . string . prototype . match all

如果一个正则表达式在一个字符串中有多个匹配项,它现在通常与g修饰符或y修饰符一起使用,并在循环中一个接一个地取出。

值得注意的是,如果没有修饰符/g。exec()只返回第一个匹配项。现在通过ES9的字符串.原型.匹配所有方法,可以一次检索所有匹配。

在上面的代码中,因为string.matchAll(正则表达式)返回一个遍历器,所以可以使用.循环的。支持

String . prototype . Matcheall:

6 .尝试.捕捉

在ES10中,try-catch语句中的参数成为可选选项。以前,当我们编写catch语句时,我们必须传递一个异常参数。这意味着,即使我们在catch中根本不需要这个异常参数,我们也必须在

err中传递它,在ES10中可以省略这个参数:

try…catch支持:

7。BigInt

JavaScript所有数字都保存为64位浮点数,这给值的表示带来了两个限制。一是数值的精度只能达到53个二进制数字(相当于16个十进制数字),对于大于这个范围的整数,JavaScript无法精确表达,这使得JavaScript不适于科学和金融领域的精确计算。第二个是大于或等于2的幂1024,这是JavaScript无法表达的,将返回无穷大。

ES10现在引入了一个新的数据类型BigInt(大整数)来解决这个问题。BigInt仅用于表示整数。位数没有限制。任意位数的整数都可以精确表示。

创建BigInt类型值也很简单,只需在数字后加上n。例如,123变成123n。您也可以使用全局方法BigInt(值)转换,输入参数的值是一个数字或数字字符串。

如果包含BigInt,JavaScript中的原始类型将从6更改为7。

布尔

Null

Undefined

Number

String

Symbol(ECMAScript 2015中新增)

BigInt(ECMAScript 2019中新增)支持

BigInt:

8。符号。原型。描述

我们知道符号的描述只存储在内部的[[描述中]],并不直接公开。我们只能在调用Symbol的ToString():

Symbol . prototype . description support:

9 . function . prototype . to String()

2019,Function.toString()时读取此属性。以前执行此方法时,结果字符串会被清除空白。现在,获得的字符串看起来像原始源代码:

Function.prototype.toString()支持:

reference

re learn JAVAScript ES(6-10)完整版本语法百科

ECMAScript 6入门

MDN document

ES2019新功能您知道吗?

ES2018新特性每个JS开发人员都需要知道

JavaScript ES7 ES8 ES9新特性

作者简介:

在波浪中航行:硕士学位,专注于前端。个人公开号码:“前端工匠”致力于创造一系列适合初级工程师快速吸收的优秀文章。回到搜狐看更多