Резюме — обновлено в апреле 2022 г.
Вавилон
Одним из самых больших изменений по сравнению с ES5 является то, что JavaScript ES7 не может быть компилирован непосредственно в браузерах. Нам нужно использовать транспилер под названием Babel.js
для создания совместимого JavaScript, который могут читать старые браузеры.
Babel позволяет вам использовать функции и синтаксис ES6 в вашем проекте, а затем переводит их в ES5, чтобы вы могли использовать их в рабочей среде.
Читайте: Как использовать Babel после создания проекта.
Самые важные обновления ES2017
- ES7 — Object.entires() и Object.values():
Object.values( )
Object.entries( )
- ES7 — Асинхронно и с ожиданием:
.await( )
- ES7 — последнее обновление: async/await:
async await
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);