ES6 существует уже некоторое время, значительно улучшив способ написания JavaScript за счет упрощения языка и предоставления новых полезных функций. Вот шесть функций, которые я часто использую в своей повседневной работе.
Конст и пусть
Переменная, объявленная с использованием «var», может быть переназначена, что делает код неясным и подверженным ошибкам.
var veggie = 'Broccoli'; veggie = 10; console.log(veggie); // 10
Для борьбы с этим в ES6 введена «const».
const veggie = 'Broccoli'; veggie = 10; // TypeError: invalid assignment to const `veggie'
ES6 также представил «let». При использовании «var» область видимости «i» не привязана к фигурным скобкам (блоку). Это часто было причиной путаницы и ошибок.
for(var i = 0; i<10; i++) { console.log(i) } console.log(i) // 10
Путаница, связанная с областью видимости и переменными, была устранена с помощью «let» и «const» с использованием области видимости блока. «Let» отличается от «const», поскольку мы можем переназначить его с новым значением, что делает его идеальным, например, для циклов for (или циклов for-of). В приведенном выше примере, переписанном с использованием let, возникает следующая ошибка, поскольку область видимости ограничена блоком.
for (let i = 0; i < 10; i++) { // console.log(i) } console.log(i) // ReferenceError: i is not defined
Строки шаблона
Старый способ смешивания строк и переменных в JavaScript быстро стал беспорядочным.
var someVariable = 'World'; var someText = 'Hello ' + someVariable; console.log(someText); // Hello World
Тот же пример с использованием строк шаблона ES6.
const someVariable = 'World'; const someText = `Hello ${someVariable}`; console.log(someText); // Hello World
Стрелочные функции
Стрелочные функции являются сокращением для function()
с той разницей, что «this» не привязано к самой функции, а скорее к охватывающей области.
const object = { name: 'Rick Deckard', arrowGetName: () => this.name, regularGetName: function() {return this.name} } console.log(object.arrowGetName()); // console.log(object.regularGetName()); // Rick Deckard
У стрелочной функции более короткий синтаксис. Итак, вместо того, чтобы писать:
function add(params) { return params + 1; } add(1); // 2
Теперь мы можем написать:
const add = (params) => params + 1 add(1); // 2
Разрушение объектов
Старый способ создания переменных свойств внутри объекта быстро стал уродливым и повторяющимся.
var person = {first: 'Brad', last: 'Pitt', profession: 'actor'}; var first = person.first; var last = person.last; var profession = person.profession; console.log(first); // Brad
Вместо создания нескольких переменных мы теперь можем преобразовать их в одну строку, уменьшив объем кода, который мы пишем.
const person = {first: 'Brad', last: 'Pitt', profession: 'actor'}; const {first, last, profession} = person; console.log(first); // Brad
Асинхронный / ожидание
Эволюция обработки ответов на запросы GET - это путь от «ада обратных вызовов» к обещаниям и новейшей функции ES7 async / await. Целью каждой итерации было улучшение читабельности кода. Поскольку запрос GET является асинхронным (то есть JavaScript не ждет ответа перед выполнением другого кода), цель async / await - сделать код более синхронным, поскольку его легче читать.
«Ад обратного звонка». Псевдокод, показывающий, как обратные вызовы были вложены для обработки нескольких ответов на запросы.
function fetchUsers() { const url = 'https://jsonplaceholder.typicode.com/users'; request(url, function(response) { return response.json(); }, function(json) { console.log(json); }); }
Обещания сделали вещи немного чище, но нам по-прежнему приходилось использовать уродливые обратные вызовы для обработки наших ответов.
function fetchUsers() { const url = 'https://jsonplaceholder.typicode.com/users'; fetch(url) .then((response) => response.json()) .then((json) => console.log(json)); }
Функция async / await в ES7 заставляет код выглядеть синхронным (выполняется построчно). Ключевое слово async необходимо использовать перед объявлением функции. Затем мы можем использовать «await», чтобы заставить код ждать ответа, прежде чем перейти к следующей строке. Это так просто.
async fetchUsers() { const url = 'https://jsonplaceholder.typicode.com/users'; const response = await fetch(url); const json = await response.json(); console.log(json); }
Модули
ES6 имеет встроенную поддержку модулей. Модули в JavaScript ранее были возможны только с использованием сторонних библиотек, таких как CommonJS и AMD (определение асинхронного модуля). Существует множество вариантов импорта / экспорта модуля, я рассмотрю самые распространенные.
В ES6 есть два вида экспорта: именованный экспорт и один экспорт по умолчанию. Используйте экспорт по умолчанию, когда вам нужно экспортировать только одну переменную или функцию.
const movies = ['Blade Runner', 'Matrix', 'Star Trek']; // Export it like this export default movies; // ['Blade Runner', 'Matrix', 'Star Trek'] // And import it like this (You can use any variable) import movieCollection from './movies';
Используйте именованный экспорт, когда вам нужно выполнить несколько операций экспорта из одного файла. У вас может быть файл помощников со многими функциями, которые вы, например, хотите экспортировать. Чтобы импортировать их, нам нужно знать имена переменных / функций, которые мы хотим импортировать.
export function handleScroll() { // Do stuff } export function formatTime() { // Do stuff } export function getUsers() { // Do stuff }
У нас есть несколько различных вариантов импорта именованных экспортов.
// Import everything as methods of an object import * as helpers from './helpers'; // And use it like this helpers.handleScroll(); helpers.formatTime(); helpers.getUsers(); // Cherry pick only the things we need import {formatTime} from './helpers'; formatTime();
Вот несколько хороших функций ES6 +, которые я использую в своей повседневной работе. Надеюсь, они вам тоже пригодятся.