Что нового в ES 2017

От автора: описание важных новых функций ES 2017 JavaScript. Отступы строк, завершающие запятые. SharedArrayBuffer, Atomics и другие объекты. Примеры кода.

Давайте рассмотрим самые важные обновления ES 2017 JavaScript.

Процесс обновления

JavaScript (ECMAScript) — это постоянно развивающийся стандарт, реализуемый многими поставщиками на нескольких платформах. ES6 (ECMAScript 2015) был крупным релизом, которому потребовалось шесть лет для завершения. Был разработан новый годовой цикл релизов, чтобы упростить процесс и быстро добавлять новые функции.

В организации со скромным названием Технический комитет 39 (TC39) участвуют различные стороны, включая поставщиков браузеров, которые определяют продвижение предложений по JavaScript по определенной последовательности этапов:
Этап 0: strawman —

Первоначальное представление идей для новых или улучшенных функций ECMAScript.

Этап 1: предложение —

Формальный документ заявки, поддержанный хотя бы одним членом TC39, который включает примеры API, семантику языка, алгоритмы, потенциальные сложности, полифиллы и демонстрации.

Этап 2: черновик —

Исходная версия спецификации функции. Требуются две экспериментальные реализации функции, хотя может быть в транспиллере, таком как Babel.

Этап 3: кандидат —

Спецификация предложения пересматривается, и получаются отзывы от поставщиков браузеров.

Этап 4: окончательный —

Предложение готово для включения в ECMAScript. Функцию следует считать стандартом только после достижения этой стадии. Однако на реализацию в браузерах и других платформах, например, Node.js, может потребоваться больше времени.

Если ES2015 был очень большим, то ES2016 был намеренно сделан крошечным, чтобы отладить процесс стандартизации. Были добавлены две новые функции:

Что нового в ES2017

Набор функций для ES2017 (или ES8 в старых терминах) считается первой большой поправкой к спецификации ECMAScript. Он предоставляет следующее…

Асинхронные функции

В отличие от большинства других языков JavaScript по умолчанию асинхронен. Команды, которые могут занять какое-то время, не останавливают выполнение. Это включает такие операции, как запрос URL-адреса, чтение файла или обновление базы данных. Должна быть передана функция обратного вызова, которая выполняется, когда результат этой операции известен.

Это может привести к аду обратных вызовов, когда последовательность вложенных асинхронных функций должна выполняться по порядку. Например:

function doSomething() { doSomething1((response1) => { doSomething2(response1, (response2) => { doSomething3(response2, (response3) => { // etc... }; }); });
}

В ES2015 (ES6) были введены Promises, которые предоставили более чистый способ выразить ту же функциональность. После того, как функции были промисифицированы, они могут быть выполнены с использованием:

function doSomething() { doSomething1() .then(doSomething2) .then(doSomething3)
}

Асинхронные функции ES2017 расширяются Promises, чтобы сделать асинхронные вызовы еще более чистыми:

async function doSomething() { const response1 = await doSomething1(), response2 = await doSomething2(response1), response3 = await doSomething3(response2);
}

await выполняет каждый вызов так, как будто он синхронный, но не задерживает ни один поток обработки JavaScript.

Асинхронные функции поддерживаются во всех современных браузерах (кроме IE или Opera Mini) и Node.js 7.6+. Они изменят способ написания JavaScript. Обратным вызовам, Promises и асинхронным функциям можно посвятить целую статью. К счастью, у нас таковая имеется! Посмотрите Управление потоком в современном JavaScript.

Object.values ()

Object.values () — это быстрый и более декларативный способ извлечения массива значений из пар имя-значение внутри объекта. Например:

const myObject = { a: 1, b: 'Two', c: [3,3,3]
} const values = Object.values(myObject);
// [ 1, 'Two', [3,3,3] ]

Вам больше не нужно писать цикл for … of снова! Object.values поддерживается во всех современных браузерах (кроме IE и Opera Mini) и Node.js 7.0+.

Object.entries()

Object.entries() возвращает массив из объекта, содержащего пары имя-значение. Каждое значение в возвращаемом массиве представляет собой подматрицу, содержащую имя (индекс 0) и значение (индекс 1). Например:

const myObject = { a: 1, b: 'Two', c: [3,3,3]
} const entries = Object.entries(myObject);
/*
[ [ 'a', 1 ], [ 'b', 'Two' ], [ 'c', [3,3,3] ]
]
*/

Это обеспечивает другой способ перебора свойств объекта. Его также можно использовать для определения Map:

const map = new Map(Object.entries({ a: 1, b: 2, c: 3
}));

Object.values поддерживается в большинстве современных браузеров (кроме IE, Opera Mini и iOS Safari) и Node.js 7.0+.

Object.getOwnPropertyDescriptors()

Метод Object.getOwnPropertyDescriptors() возвращает другой объект, содержащий все дескрипторы свойств (.value, .writable, .get, .set, .configurable, .enumerable).

Свойства непосредственно присутствуют в объекте, а не в цепочке прототипов объекта. Он похож на Object.getOwnPropertyDescriptor(object, property) — за исключением того, что возвращаются все свойства, а не только одно. Например:

const myObject = { prop1: 'hello', prop2: 'world'
}; const descriptors = Object.getOwnPropertyDescriptors(myObject); console.log(descriptors.prop1.writable); // true
console.log(descriptors.prop2.value); // 'world'

Отступы строк padStart() и padEnd()

Функция отступа строк была неоднозначной в JavaScript. Популярную библиотеку left-pad убрали из npm после того, как она привлекла внимание юристов, представляющих одноименное приложение для обмена мгновенными сообщениями. К сожалению, она использовалось как зависимость в тысячах проектов, и Интернет сломался. npm впоследствии изменили рабочие процедуры, и left-pad была возвращена.

В ES2017 добавлена собственная функция отступа строк, поэтому нет необходимости использовать сторонний модуль. .padStart() и .padEnd() добавляют символы в начало или конец строки, соответственно, до тех пор, пока они не достигнут желаемой длины. Оба принимают минимальную длину и необязательную строку «fill» (пробел по умолчанию) в качестве параметров. Примеры:

'abc'.padStart(5); // ' abc'
'abc'.padStart(5,'-'); // '--abc'
'abc'.padStart(10, '123'); // '1231231abc'
'abc'.padStart(1); // 'abc' 'abc'.padEnd(5); // 'abc '
'abc'.padEnd(5,'-'); // 'abc--'
'abc'.padEnd(10, '123'); // 'abc1231231'
'abc'.padEnd(1); // 'abc'

.padStart () и .padEnd () поддерживаются во всех современных браузерах (кроме IE) и Node.js 8.0+.

Разрешены завершающие запятые

Небольшое обновление ES2017: завершающие запятые больше не вызывают синтаксическую ошибку в определениях объектов, объявлениях массивов, списках параметров функций и т. д.:

// ES2017 is happy!
const a = [1, 2, 3,]; const b = { a: 1, b: 2, c: 3,
}; function c(one,two,three,) {};

Завершающие запятые включены во всех браузерах и Node.js. Однако на момент написания статьи завершающие запятые в параметрах функций поддерживаются только в Chrome 58+ и Firefox 52+.

SharedArrayBuffer и Atomics

Объект SharedArrayBuffer используется для представления буфера исходных двоичных данных фиксированной длины, который может использоваться совместно с веб-рабочими. Объект Atomics обеспечивал предсказуемый способ чтения и записи в ячейки памяти, определенные SharedArrayBuffer.

Хотя оба объекта были реализованы в Chrome и Firefox, они были отключены в январе 2018 года в результате реакции на уязвимость Spectre.

Полную спецификацию ECMAScript 2017 можно найти на сайте ECMA International. Вы жаждете большего? В ES2018 анонсированы новые функции!

Автор: Craig Buckler

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.