Руководство ES2017

ECMAScript - это стандарт, на котором основан JavaScript, часто сокращенно ES. Узнайте все о ECMAScript и функциях, добавленных в ES2017, также известном как ES8

ECMAScript 2017, выпуск 8 стандарта ECMA-262 (также обычно называемыйES2017или жеES8), was finalized in June 2017.

По сравнению с ES6, ES8 представляет собой крошечный релиз для JavaScript, но все же предлагает очень полезные функции:

  • Заполнение строк
  • Object.values()
  • Object.entries()
  • Object.getOwnPropertyDescriptors()
  • Завершающие запятые в списках параметров функций и вызовах
  • Асинхронные функции
  • Общая память и атомики

Заполнение строк

Назначение строкового отступа -добавить символы в строку, так чтодостигает определенной длины.

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 свойство можно изменить
  • получать: функция получения свойства, вызываемая при чтении свойства
  • набор: функция установки для свойства, вызываемая, когда для свойства установлено значение
  • настраиваемый: если false, свойство нельзя удалить или изменить какой-либо атрибут, кроме его значения
  • перечислимый: true, если свойство перечислимое

Object.getOwnPropertyDescriptors(obj)принимает объект и возвращает объект с набором дескрипторов.

Чем это полезно?

ES6 дал намObject.assign(), который копирует все перечисляемые собственные свойства из одного или нескольких объектов и возвращает новый объект.

Однако с этим возникает проблема, поскольку он неправильно копирует свойства с атрибутами, отличными от атрибутов по умолчанию.

Если объект, например, имеет только сеттер, он неправильно копируется в новый объект, используя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.

Асинхронные функции представляют собой комбинацию обещаний и генераторов для сокращения шаблонов вокруг обещаний и ограничения «не разрывать цепочку» для объединения обещаний.

Почему они полезны

Это абстракция более высокого уровня по сравнению с обещаниями.

Когда промисы были представлены в ES6, они должны были решить проблему с асинхронным кодом, и они это сделали, но за 2 года, которые разделяли ES6 и ES2017, стало ясно, чтообещания не могут быть окончательным решением. Обещания были даны для решения знаменитыхобратный вызов адпроблема, но они сами по себе внесли сложность и сложность синтаксиса. Это были хорошие примитивы, вокруг которых разработчикам можно было предложить лучший синтаксис: введитеасинхронные функции.

Быстрый пример

Код, использующий асинхронные функции, можно записать как

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:

Tech Wiki Online!