Резюме — обновлено в апреле 2022 г.

Вавилон

Одним из самых больших изменений по сравнению с ES5 является то, что JavaScript ES7 не может быть компилирован непосредственно в браузерах. Нам нужно использовать транспилер под названием Babel.js для создания совместимого JavaScript, который могут читать старые браузеры.

Babel позволяет вам использовать функции и синтаксис ES6 в вашем проекте, а затем переводит их в ES5, чтобы вы могли использовать их в рабочей среде.

Читайте: Как использовать Babel после создания проекта.

Самые важные обновления ES2017

ES7 — Object.entires() и Object.values()

Object.values( ) позволяет нам вернуть массив всех значений нашего объекта, а Object.entries( ) возвращает массив, содержащий как ключи, так и значения.

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

const family = { отец: «Джон Смит»,
мать: «Марта Смит»,
дочь: «Сара Кент»,
}
console.log(Object.values( семья));
console.log(Object.entries(family));
// ["отец", "Джон Смит"]
// ["мать", "Марта Смит"]
// ["дочь", "Сара Смит"]

ES7 — асинхронно и ожидание

Оператор .await( ) ожидает Promise внутри асинхронной функции. Взгляните на новый способ написания этого кода.

Это обновление ES8 предлагает альтернативу обратным вызовам и обещаниям и использует гораздо более удобный синтаксис. Функция Async позволяет нам определить асинхронную функцию и вернуть обещание.

function resolveAfter2Seconds() {
return new Promise(resolve =› {
setTimeout(() =› {
resolve('resolved');
}, 2000);
});
}

async function asyncCall() {
console.log('вызов');
const result =await resolveAfter2Seconds();
console.log(result); }

асинхронный вызов();

  • Делаем асинхронную функцию с ключевым словом async
  • Это вернет обещание
  • Если мы укажем вернуть non-promise, он вернет значение, завернутое в промис.
  • Ключевое слово await работает только внутри асинхронной функции.

ES7 — последнее обновление: async/await

Async/await помогает писать полностью синхронный код при выполнении асинхронных задач.

await используется для ожидания разрешения или отклонения обещания и может использоваться только внутри асинхронной функции.

// Меню
var menu = [‘Гамбургер’, ‘Куриный суп’, ‘Паста’];

// Следующая функция возвращает обещание, которое выполняется, если клиент
// заказывает что-то из меню:
function order_food(order ) {
let обещание = новое обещание((разрешить, отклонить) =› {
if(menu.includes(order)) {
resolve();
}else {
reject('Этого пункта нет в меню.');< br /> }
});
возврат обещание;
}

// Следующая функция возвращает обещание, которое выполняется, если покупатель
// заплатит за еду 20 или больше:
function make_payment (payment) {
let promise = new Promise((resolve, reject) =› {
if(payment ›= 20) {
resolve();
}else {
reject('Ваш заказ стоит 20.');
}
});
обещание возврата;
}

// await можно использовать только внутри асинхронной функции
асинхронная функция eat(order, payment){
// ожидание разрешения промисов
try{< br /> ожидание order_food(заказ);
console.log("Заказ получен покупателем.");
console.log("Получить оплату.");< br /> await make_payment(payment);
console.log("Платеж получен.");
}
// Отлов ошибок или отклоненных обещаний
catch (ошибка){
console.log (ошибка)
}
}

// Клиент размещает свой заказ и указывает сумму к оплате
// Поэкспериментируйте с этими параметрами, чтобы полностью понять, что происходит.
eat(“Hamburger”, 20);