5 лучших функций ES6 в JavaScript

Введение

ECMAScript 2015 (или ES6) — это шестая и последняя редакция JavaScript, определяющая стандарт реализации JavaScript для современных веб-приложений.

ES6 — это усовершенствованный способ написания кода JavaScript, который повышает производительность веб-приложений и делает их более масштабируемыми.

Кодировщикам это позволяет писать меньше и делать больше, тем самым делая код более читабельным и современным.

В этой статье давайте рассмотрим 5 основных функций, представленных в ES6.

Пусть и Конст:

В JavaScript пользователи могут объявлять переменные с помощью трех ключевых слов: var, let и const. В то время как var является старейшим ключевым словом, используемым для создания привязки памяти в JavaScript, let и const были введены в ES6.

Проблема с var заключается в том, что она не имеет блочной области видимости и может вызвать множество ошибок в коде.

В приведенном выше примере, поскольку var имеет область действия функции, она все еще существует за пределами блока цикла, что означает, что код вне цикла будет иметь доступ к переменной i.

Чтобы решить эту проблему, в ES6 были введены ключевые слова let и const.

let и const имеют область действия блока, то есть они доступны только внутри определенного блока.

const очень похож на ключевое слово let, за исключением того, что после объявления его значение не может быть обновлено. При этом будет выдана ошибка неперехваченного типа.

Еще одна важная вещь, которую следует помнить, это то, что переменные, объявленные с помощью var, будут подняты, то есть к ним можно будет получить доступ до объявления. С другой стороны, поскольку let и const имеют блочную область видимости, к ним нельзя получить доступ до объявления.

Стрелочные функции

Следующим большим обновлением ES6 стали стрелочные функции, которые существенно упростили синтаксис для объявления функций.

Традиционные функции

Это же выражение можно записать так, используя стрелочную функцию

Со стрелочными функциями вам больше не нужно писать функцию и ключевые слова возврата при ее объявлении.

Тем не менее, есть несколько вещей, о которых следует помнить в отношении стрелочных функций.

У них нет собственной привязки к ключевым словам this или super, и, следовательно, их не следует использовать в качестве методов.
Их не следует использовать с методами call, apply и bind.
Их нельзя использовать в качестве конструкторов.
Они не размещены, и поэтому должны быть объявлены перед вызовом

Присвоение деструктуризации

Это выражение, позволяющее извлекать значения из массивов или свойства объектов в переменные. Для этого нужно взять структуру данных (массив или объект), разбить ее на более мелкие части с помощью присваивания и сохранить в переменной. Ниже приведен пример, демонстрирующий деструктурирование.

Как видите, он берет каждую переменную в левой части и присваивает ее одному и тому же элементу с тем же индексом в правой части. В этом случае переменные a и b будут принимать первое и второе значение массива.

Деструктуризация сделала процесс распаковки данных из массива/объекта чрезвычайно простым и читабельным.

Деструктуризация также упрощает процесс извлечения значений вложенного массива.

Как вы можете видеть выше, для извлечения элементов вложенного массива необходимо использовать синтаксис деструктурирования вложенного массива.

Оператор Rest Parameter & Spread

В JavaScript операторы остаточных параметров и спредов имеют одинаковый синтаксис (…), хотя с точки зрения функциональности они противоречат друг другу.

Оператор Spread расширяет итерируемый объект, например массив, где требуется несколько аргументов.

Он также расширяет литералы объектов, добавляя пары ключ-значение к создаваемому объекту.

Оператор rest, с другой стороны, собирает несколько элементов и сохраняет их в один элемент.

Это особенно полезно, когда нам нужно передать аргументы в функции, но мы не уверены, сколько их нужно передать.

Вспомогательные функции массива

И последнее, но не менее важное: методы массивов, представленные в ES6, чрезвычайно полезны для работы с массивами.

Работая веб-разработчиком, каждый должен ежедневно работать с массивами и манипулировать ими, будь то простой массив или сложный вложенный массив. Это стало намного проще с помощью вспомогательных функций/методов массива, что устраняет необходимость ручной работы с циклом for.

ES6 предлагает множество новых методов обработки массивов, помогающих манипулировать данными.

Вот 3 наиболее часто используемые вспомогательные функции массива:

для каждого()

По сути, метод forEach выполняет функцию обратного вызова для каждого элемента массива.

Примечание: метод forEach не работает с пустыми массивами.

В отличие от map() и reduce(), он всегда возвращает неопределенное значение и не является цепочкой.

Синтаксис:

Пример:

карта()

Map — один из самых важных вспомогательных методов массива. Он возвращает новый массив с результатами вызова предоставленной функции обратного вызова для каждого элемента массива. Также важно отметить, что карта не изменяет исходный массив.

Пример

фильтр()

Filter — еще один отличный вспомогательный метод массива, который помогает нам фильтровать массив с заданным условием. Он возвращает совершенно новый массив с элементами, прошедшими проверку, предоставленную функцией обратного вызова. Как и карта, он не изменяет исходный массив.

Синтаксис