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

• Заполнение строк
• Объект.значения()
• Объект.записи()
• получить описатель свойств()
  • Чем это полезно?
• Завершающие запятые
• Асинхронные функции
  • Почему они полезны
  • Краткий пример
  • Несколько асинхронных функций последовательно
• Разделяемая память и атомарная

ECMAScript 2017, издание 8 стандарта ECMA-262 (также обычно называемого ES2017 или ES8 ), была завершена в июне 2017 года.

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

• Заполнение строк
• Объект.значения()
• Объект.записи()
• Объект.получитьpropertydescriptor()
• Конечные запятые в списках параметров функций и вызовах
• Асинхронные функции
• Разделяемая память и атомарная

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

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

ES2017 вводит два строковых метода: padStart() и Конец прокладки() .

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

Пример использования:

Объект.значения()

Этот метод возвращает массив, содержащий все значения собственных свойств объекта.

Использование:

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

Object.values() также работает с массивами:

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

Объект.записи()

Этот метод возвращает массив, содержащий все собственные свойства объекта, в виде массива [ключ, значение] пары.

Использование:

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']]

получить описатель свойств()

Этот метод возвращает все собственные (не унаследованные) дескрипторы свойств объекта.

Любой объект в JavaScript имеет набор свойств, и каждое из этих свойств имеет дескриптор.

Дескриптор – это набор атрибутов свойства, и он состоит из подмножества следующих:

• значение : значение свойства
• доступно для записи : true свойство может быть изменено
• get : функция получения для свойства, вызываемая при чтении свойства
• set : функция настройки для свойства, вызываемая, когда для свойства установлено значение
• настраиваемый : если значение равно false, свойство не может быть удалено или какой-либо атрибут не может быть изменен, кроме его значения
• перечислимый : значение true, если свойство является перечислимым

Object.getownpropertydescriptor(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"

человек 2 пропускает сеттер, он не был скопирован.

То же самое ограничение касается неглубокого клонирования объектов с помощью 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

Несколько асинхронных функций последовательно

Асинхронные функции могут быть объединены в цепочку очень легко, а синтаксис гораздо более удобочитаем, чем при использовании простых обещаний:

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)
})

Разделяемая память и атомарная

Веб-работники используются для создания многопоточных программ в браузере.

Они предлагают протокол обмена сообщениями через события. Начиная с ES2017, вы можете создать массив общей памяти между веб-работниками и их создателем, используя Общий буфер массивов .

Поскольку неизвестно, сколько времени требуется для распространения записи в разделяемую память, Атомика – это способ обеспечить, чтобы при чтении значения выполнялась любая операция записи.

Более подробную информацию об этом можно найти в предложении спецификации , которое с тех пор было реализовано.

Оригинал: “https://flaviocopes.com/es2017/”