Содержание статьи
JavaScript ES6 предлагает новый синтаксис и новые отличные функции, чтобы сделать ваш код более современным и более читабельным. Это позволяет писать меньше кода и делать больше. ES6 знакомит нас со многими замечательными функциями, такими как стрелки, шаблонные строки, уничтожение классов, модули… и т.д. Давайте посмотрим.
const и пусть
const это новое ключевое слово в ES6 для объявления переменных. const мощнее чем var. После использования переменная не может быть переназначена. Другими словами, это ан неизменная переменная за исключением случаев, когда он используется с объектами.
Это очень полезно для таргетинга на селекторы. Например, если у нас есть одна кнопка, которая запускает событие или если вы хотите выбрать элемент HTML в JavaScript, используйте const вместо var. Это происходит потому var является «поднятым». Это всегда лучше использовать const когда не нужно переназначать переменную.
В приведенном выше коде const не будут изменяться и не могут быть переназначены. Если вы попытаетесь придать ему новое значение, оно вернет вам ошибку.
let можно переназначить и получить новое значение. Это создает a переменная переменная.
let то же, что const в том, что оба являются заблокированной областью. Это означает, что переменная доступна только в пределах своей области видимости.
Функции стрелок
Функция стрелки действительно потрясающая, она делает ваш код более читабельным, структурированным и выглядит как современный код. Вместо этого:
Используй это:
Как видите, функция стрелок выглядит более читабельной и чистой! Вам больше не нужно будет использовать старый синтаксис.
Кроме того, вы можете использовать функцию со стрелкой map, filterи reduce встроенные функции.
Функция карты со стрелками выглядит более четкой и читабельной, чем map в ES5. С ES6 вы можете писать более короткий и умный код. Вы можете использовать то же из filter и reduce.
Литералы шаблона
Шаблонные литералы или шаблонные строчки – это очень круто. Нам не нужно использовать оператор плюс (+) для объединения строк или когда мы хотим использовать переменную внутри строки.
Старый синтаксис:
С новым синтаксисом ES6:
Так просто! Это действительно огромное различие между старым синтаксисом и ES6. Во время игры со строками литеральная строка ES6 выглядит более организованной и хорошо структурированной, чем ES5.
Параметры по умолчанию
Когда я работаю на PHP, я обычно использую параметры по умолчанию. Они позволяют определить параметр заранее.
Итак, если вы забудете написать параметр, он не вернет неопределенную ошибку, поскольку параметр уже определен по умолчанию. Итак, когда вы запускаете свою функцию с пропущенным параметром, она будет принимать значение параметра по умолчанию tи он не вернет ошибку!
Посмотрите на этот пример:
Функция выше возвращает undefined, поскольку мы забыли указать второй параметр age.
Но если мы использовали параметр по умолчанию, он не вернет значение undefined и использует свое значение, когда мы забудем назначить параметр!
Как видите, функция возвращает значение даже если мы пропустили второй параметр. Теперь с параметром по умолчанию мы можем заранее устранить ошибку.
Уничтожение массивов и объектов
Уничтожение облегчает присвоение значений массива или объекта новой переменной.
Старый синтаксис:
С синтаксисом ES6:
С ES5 мы должны назначить каждое значение каждой переменной. В ES6 мы просто помещаем наши значения в фигурные скобки, чтобы получить любое свойство объекта.
Примечание: если вы назначите переменную, не совпадающую с именем свойства, она вернет неопределенное значение. Например, если название имущества есть name и мы назначаем его a username переменная, он вернет неопределенный.
Мы всегда должны называть переменную так же, как имя свойства. Но если мы хотим переименовать переменную, мы можем использовать двоеточие : вместо этого.
Для массива мы используем тот же синтаксис, что и для объекта. Нам просто нужно заменить фигурные скобки квадратными.
Импорт и экспорт
Использование import и export в вашем приложении JavaScript делает его более мощным. Они позволяют создавать отдельные и повторно используемые компоненты.
Если вы знакомы с любым фреймворком JavaScript MVC, вы увидите, что они используют import и export работать с компонентами большую часть времени. Итак, как они действительно работают?
Это просто! export позволяет экспортировать модуль для использования в другом компоненте JavaScript. Мы используем import чтобы импортировать этот модуль, чтобы использовать его в нашем компоненте.
К примеру, у нас есть два файла. Первый назван detailComponent.js а второй назван homeComponent.js.
в detailComponent.js мы собираемся экспортировать detail функция.
И если мы хотим использовать эту функцию в homeComponent.js, мы просто используем import.
Если мы хотим импортировать более одного модуля, мы просто берём их в фигурные скобки.
Так круто, не правда ли?!
Обещания
Обещания – это новая функция ES6. Это метод написания асинхронного кода. Его можно использовать, например, когда мы хотим получить данные из API или когда у нас есть функция, для выполнения которой требуется время. Обещания облегчают решение проблемы, поэтому давайте создадим наше первое обещание!
Если вы зарегистрируете свою консоль, она вернет Promise. Итак, если мы хотим выполнить функцию после получения данных, мы будем использовать Promise. Обещание принимает два параметра: resolve и reject для обработки ожидаемой ошибки
Примечание: функция fetch сама возвращает Promise!
const url="https://jsonplaceholder.typicode.com/posts";const getData=(url)=>{return fetch(url);}getData(url).then(data=> data.json()).then(result=> console.log(result));Теперь, если вы зарегистрируете свою консоль, она вернет массив данных.
Параметр Rest и оператор Spread
Другие параметры используются для получения аргумента массива и возврата нового массива.
Оператор распространения имеет тот же синтаксис, что и параметр rest, но оператор расширения принимает сам массив, а не только аргументы. Мы можем использовать параметр Spread для получения значений массива вместо использования цикла for или любого другого метода.
const arr=['said',20,'JavaScript enthusiast','Hi','Said','How are you?'];
const Func=(...anArray)=>{
return anArray;
}
console.log(Func(arr));
//output ["said", 20, "JavaScript enthusiast", "Hi", "Said", "How are you?"Занятия
Классы представляют собой ядро объектно-ориентированного программирования (ООП). Они делают ваш код более безопасным и инкапсулированным. Использование классов предоставляет вашему коду хорошую структуру и поддерживает его ориентацию.
Чтобы создать класс, используйте class ключевое слово, за которым следует название класса с двумя фигурными скобками.
Теперь мы можем получить доступ к class методы и свойства с помощью new ключевое слово.
class myClass{
constructor(name,age){
this.name=name;
this.age=age;
}
}
const Home= new myClass("said",20);
console.log(Home.name)// saidЧтобы унаследовать от другого класса, используйте extends ключевое слово, за которым следует название класса, который вы хотите унаследовать.
Вы можете узнать больше о Классы здесь.
ES6 имеет другие удивительные функции – вы можете исследовать их здесь.
Вывод
Надеюсь, эта статья была вам полезна, и я надеюсь, что я смог представить вам некоторые функции ES6. Если да, подпишитесь на этот список рассылки, чтобы узнать больше о темах Front-end. Спасибо за ваше время.
Кстати, недавно я работал с сильной группой инженеров-программистов над одним из моих мобильных приложений. Организация была превосходной, и продукт был доставлен очень быстро, гораздо быстрее, чем другие фирмы и фрилансеры, с которыми я работал, и я думаю, что я могу честно рекомендовать их для других проектов. Отправьте мне электронное письмо, если хотите связаться — said@devsdata.com.