Давайте посмотрим на наиболее важные обновления JavaScript, которые пришли с ES2017, а также кратко рассмотрим, как на самом деле происходит этот процесс обновления.
Процесс обновления
JavaScript (ECMAScript) — это постоянно развивающийся стандарт, реализуемый многими поставщиками на разных платформах. ES6 (ECMAScript 2015) был крупным выпуском, для завершения которого потребовалось шесть лет. Был разработан новый годовой процесс выпуска, чтобы упростить процесс и быстро добавить новые функции.
Скромно названный Технический комитет 39 (TC39) состоит из сторон, включая поставщиков браузеров, которые встречаются, чтобы продвигать предложения JavaScript по строгому пути развития:
Этап 0: соломенный
Первоначальная подача идей для новых или улучшенных функций ECMAScript.
Этап 1: предложение —
Официальный документ предложения, защищенный по крайней мере одним членом TC39, который включает примеры API, семантику языка, алгоритмы, потенциальные препятствия, полифиллы и демонстрации.
Этап 2: черновик —
Начальная версия спецификации функции. Требуются две экспериментальные реализации этой функции, хотя одна может быть в транспортере, таком как Babel.
Этап 3: кандидат —
Спецификация предложения пересматривается, и отзывы собираются от поставщиков.
Этап 4: закончен —
Предложение готово для включения в ECMAScript. Функция должна рассматриваться как стандартная только после достижения этой стадии. Однако доставка может занять больше времени в браузерах и средах выполнения, таких как Node.js.
Если ES2015 был слишком большим, ES2016 был преднамеренно крошечным, чтобы доказать процесс стандартизации. Были добавлены две новые функции:
- Метод array
.includes()который возвращает true или false, когда значение содержится в массиве, и - Оператор
a ** bстепеньa ** b, который идентиченMath.pow(a, b).
Что нового в 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 и Async. К счастью, у нас есть один! Обратитесь к управлению потоком в современном 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 loop! 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] ] ] */
Это обеспечивает другой способ перебора свойств объекта. Он также может быть использован для определения карты :
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. Популярная библиотека левой панели была взята из npm после того, как привлекла внимание юристов, представляющих одноименные приложения для обмена мгновенными сообщениями. К сожалению, это использовалось в качестве зависимости в тысячах проектов, и интернет сломался. Впоследствии npm изменил порядок работы, и левый блокнот не был опубликован.
В 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 были объявлены!