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: