ES2017指南

ECMAScript是JavaScript所基于的标准,并且通常缩写为ES。发现有关ECMAScript的所有信息,以及ES2017(又称为ES8)中添加的功能

ECMAScript 2017,ECMA-262标准的第8版(也通常称为ES2017或者ES8), was finalized in June 2017.

与ES6相比,ES8是一个很小的JavaScript版本,但仍引入了非常有用的功能:

字符串填充

字符串填充的目的是为了在字符串中添加字符, 所以达到特定长度

ES2017引入了两个String方法:padStart()padEnd()

padStart(targetLength [, padString])
padEnd(targetLength [, padString])

用法示例:

padStart()
'test'.padStart(4) '测试'
'test'.padStart(5) ' 测试'
'test'.padStart(8) ' 测试'
'test'.padStart(8,'abcd') 'abcdtest'
padEnd()
'test'.padEnd(4) '测试'
'test'.padEnd(5) '测试 '
'test'.padEnd(8) '测试 '
'test'.padEnd(8,'abcd') 'testabcd'

Object.values()

此方法返回一个包含所有对象自己的属性值的数组。

用法:

const person = { name: 'Fred', age: 87 }
Object.values(person) // ['Fred', 87]

Object.values()也适用于数组:

const people = ['Fred', 'Tony']
Object.values(people) // ['Fred', 'Tony']

Object.entries()

此方法返回一个包含所有对象自身属性的数组,作为[key, value]对。

用法:

const person = { name: 'Fred', age: 87 }
Object.entries(person) // [['name', 'Fred'], ['age', 87]]

Object.entries()也适用于数组:

const people = ['Fred', 'Tony']
Object.entries(people) // [['0', 'Fred'], ['1', 'Tony']]

getOwnPropertyDescriptors()

此方法返回对象的所有自己的(非继承)属性描述符。

JavaScript中的任何对象都有一组属性,并且每个属性都有一个描述符。

描述符是属性的一组属性,由以下子集组成:

  • 价值:财产的价值
  • 可写的:true可以更改属性
  • 得到:属性的getter函数,在读取属性时调用
  • :属性的setter函数,在将属性设置为值时调用
  • 可配置的:如果为false,则不能删除该属性,也不能更改任何属性,但其值除外
  • 数不清的:如果该属性是可枚举的,则为true

Object.getOwnPropertyDescriptors(obj)接受一个对象,并返回带有描述符集的对象。

这有什么用处?

ES6给了我们Object.assign(),它从一个或多个对象复制所有可枚举的自身属性,并返回一个新对象。

但是,这有一个问题,因为它不能正确复制具有非默认属性的属性。

例如,如果某个对象只有一个setter,则无法使用Object.assign()

例如与

const person1 = {
    set name(newName) {
        console.log(newName)
    }
}

这是行不通的:

const person2 = {}
Object.assign(person2, person1)

但这将起作用:

const person3 = {}
Object.defineProperties(person3,
  Object.getOwnPropertyDescriptors(person1))

您可以通过简单的控制台测试看到:

person1.name = 'x'
"x"

person2.name = ‘x’

person3.name = ‘x’ “x”

person2错过了二传手,它没有被复制。

同样的限制也适用于具有以下特征的浅层克隆对象:Object.create()

尾随逗号

此功能允许在函数声明和函数调用中使用逗号结尾:

const doSomething = (var1, var2,) => {
  //...
}

doSomething(‘test2’, ‘test2’,)

这种变化将鼓励开发人员停止丑陋的“逗号开头”习惯。

异步功能

查看有关的专用帖子异步/等待

ES2017引入了异步功能,这是此ECMAScript版本中引入的最重要的更改。

异步功能是promise和生成器的组合,可减少promise的样板,以及链接promise的“请勿打破链条”限制。

为什么它们有用

这是对诺言的更高层次的抽象。

当在ES6中引入Promises时,它们旨在解决异步代码的问题,并且确实做到了,但是在将ES6和ES2017分开的2年中,很明显承诺不可能是最终的解决方案。介绍了解决著名的承诺回调地狱问题,但是他们自己引入了复杂性以及语法复杂性。它们是很好的原语,可以围绕这些原语向开发人员提供更好的语法:异步功能

一个简单的例子

利用异步功能的代码可以写成

function doSomethingAsync() {
    return new Promise((resolve) => {
        setTimeout(() => resolve('I did something'), 3000)
    })
}

async function doSomething() { console.log(await doSomethingAsync()) }

console.log(‘Before’) doSomething() console.log(‘After’)

上面的代码会将以下内容打印到浏览器控制台:

Before
After
I did something //after 3s

Multiple async functions in series

Async functions can be chained very easily, and the syntax is much more readable than with plain promises:

function promiseToDoSomething() {
    return new Promise((resolve)=>{
        setTimeout(() => resolve('I did something'), 10000)
    })
}

async function watchOverSomeoneDoingSomething() { const something = await promiseToDoSomething() return something + ’ and I watched’ }

async function watchOverSomeoneWatchingSomeoneDoingSomething() { const something = await watchOverSomeoneDoingSomething() return something + ’ and I watched as well’ }

watchOverSomeoneWatchingSomeoneDoingSomething().then((res) => { console.log(res) })

Shared Memory and Atomics

WebWorkers are used to create multithreaded programs in the browser.

They offer a messaging protocol via events. Since ES2017, you can create a shared memory array between web workers and their creator, using a SharedArrayBuffer.

Since it’s unknown how much time writing to a shared memory portion takes to propagate, Atomics are a way to enforce that when reading a value, any kind of writing operation is completed.

Any more detail on this can be found in the spec proposal, which has since been implemented.


More js tutorials: