天天看点

[译] 是的,ES2017 (ES8)来了

<b>本文讲的是[译] 是的,ES2017 (ES8)来了,</b>

<b></b>

校对者:

ES8 或者说是 ES2017 已经在今年6月底的时候被 TC39 正式发布。似乎我们在最近的一年里就已经谈论了很多有关 ECMA 的事情。现在的 ES 标准每年发布一次。我们都知道 ES6 是在2015年发布的,ES7 是在2016年发布的,但是估计会有很少数人知道 ES5 是在何时发布的。答案是2009年,是在 JavaScript 逐渐变的流行之前发布的。

JavaScript,作为一门处于高速发展期的开发语言,正在变的越来越完善、稳定。我们必须拥抱这些变化,并且我们需要把ES8加入到我们的技术栈中。

[译] 是的,ES2017 (ES8)来了

在 String 对象中,ES8 增加了两个新的函数: padStart 和 padEnd 。正如其名,这俩函数的作用就是在字符串的头部和尾部增加新的字符串,并且返回一个具有指定长度的新的字符串。你可以使用指定的字符、字符串或者使用函数提供的默认值-空格来填充源字符串。具体的函数申明如下:

正如你所看到的,这俩函数的第一个参数(必输)是 <code>targetLength</code> ,这个参数指的是设定这俩函数最后返回的字符串的长度。第二个参数 <code>padString</code> 是可选参数,代表你想要填充的内容,默认值是空格。具体代码示例如下:

目前浏览器的支持情况如下(信息来自 MDN ):

[译] 是的,ES2017 (ES8)来了

在 Object 中,ES8 也新增了两个新的函数,分别是 <code>Object.values</code> 函数和 <code>Object.entries</code>函数。<code>Object.values</code> 函数将会返回一个数组,该数组的内容是函数参数(一个对象)可遍历属性的属性值。数组中得到的属性值的顺序与你在对参数对象使用 <code>for in</code> 语句时获取到的属性值的顺序一致。函数声明如下:

参数 <code>obj</code> 就是源对象,它可以是一个对象或者一个数组(因为数组可以看作是数组下标为 key ,数组元素为 value 的特殊对象)。具体的代码示例如下:

目前浏览器对于 <code>Object.values</code> 函数的支持情况如下(信息来自 MDN ):

[译] 是的,ES2017 (ES8)来了

介绍完 <code>Object.values</code> 函数,接下来继续介绍 <code>Object.entries</code> 函数。 <code>Object.entries</code> 函数与 <code>Object.values</code> 函数类似,也是返回一个数组,只不过这个数组是一个以源对象(参数)的可枚举属性的键值对为数组 <code>[key, value]</code> 的 n 行 2 列的数组。它的返回顺序与<code>Object.values</code> 函数类似。它的函数声明如下:

示例代码如下:

目前浏览器对于 <code>Object.entries</code> 函数的支持情况如下(信息来自 MDN ):

[译] 是的,ES2017 (ES8)来了

Object 中还有一个新成员,那就是 <code>Object.getOwnPropertyDescriptors</code> 函数。该函数返回指定对象(参数)的所有自身属性描述符。所谓自身属性描述符就是在对象自身内定义,不是通过原型链继承来的属性。函数声明如下:

<code>obj</code> 参数即为源对象,该函数返回的每个描述符对象可能会有的 key 值分别是:<code>configurable</code>、<code>enumerable</code>、<code>writable</code>、<code>get</code>、<code>set</code>和<code>value</code>。示例代码如下:

描述符数据非常重要,尤其是在装饰器上。该函数的浏览器支持情况如下(信息来自 MDN ):

[译] 是的,ES2017 (ES8)来了

此处结尾逗号指的是在函数参数列表中最后一个参数之后的逗号以及函数调用时最后一个参数之后的逗号。ES8 允许在函数定义或者函数调用时,最后一个参数之后存在一个结尾逗号而不报 <code>SyntaxError</code> 的错误。示例代码如下:

函数声明时
函数调用时

ES8的这项新特性受启发于对象或者数组中最后一项内容之后的逗号,如 <code>[10, 20, 30,]</code> 和<code>{ x: 1, }</code> 。

由 <code>async</code> 关键字定义的函数声明定义了一个可以异步执行的函数,它返回一个<code>AsyncFunction</code> 类型的对象。异步函数的内在运行机制和 <code>Generator</code> 函数非常类似,但是不能转化为 <code>Generator</code> 函数。

上述代码中, <code>sayHello</code> 函数的调用将会导致在2秒之后打印 <code>Hello, es8</code> 。继续来看一段代码:

输出将会变成:

之所以会打印上述内容,那是因为异步函数不会阻塞程序的继续执行。

译者注:

异步函数的浏览器支持情况如下(信息来自 MDN ):

[译] 是的,ES2017 (ES8)来了

当内存被共享时,多个线程可以并发读、写内存中相同的数据。原子操作可以确保那些被读、写的值都是可预期的,即新的事务是在旧的事务结束之后启动的,旧的事务在结束之前并不会被中断。这部分主要介绍了 ES8 中新的构造函数 <code>SharedArrayBuffer</code> 以及拥有许多静态方法的命名空间对象 <code>Atomic</code> 。

<code>Atomic</code> 对象类似于 <code>Math</code> 对象,拥有许多静态方法,所以我们不能把它当做构造函数。<code>Atomic</code> 对象有如下常用的静态方法:

add /sub - 为某个指定的value值在某个特定的位置增加或者减去某个值

and / or /xor - 进行位操作

load - 获取特定位置的值

该部分的浏览器兼容情况如下(信息来自 MDN ):

[译] 是的,ES2017 (ES8)来了

使用 ES6 中规定的模版字符串,我们可以做如下事情:

[译] 是的,ES2017 (ES8)来了

JavaScript 正处于高速发展中,时常会被更新。我们必须准备好接受、拥抱 JavaScript 的新特性。最后,上述这些特性被 TC39 委员会所确认以及被一些核心开发人员所实现。甚至许多新特性现在已经成为了 TypeScript、浏览器以及一些语法糖的一部分,所以我们现在就可以尝试使用它们,积极拥抱新特性。

[译] 是的,ES2017 (ES8)来了

<b>原文发布时间为:2017年7月13日</b>

<b>本文来自云栖社区合作伙伴掘金,了解相关信息可以关注掘金网站。</b>

继续阅读