6 непопулярных, но очень удобных возможностей ES6

Статья про 6 непопулярных, но очень удобных возможностей ES6. Как известно, стандарт Ecmascript 6 опубликовали в июне 2015. Но так как многое уже имплементировано в современный браузерах, почему-бы не начать использовать это прямо сейчас?

Поскольку jsFiddle и аналоги ES6 не поддерживают, буду использовать es6fiddle для примеров. К сожалению, не все в нем можно показать из-за багов. При отсутствии ссылок на es6fiddle рекомендую копировать сниппеты кода в консоль современного браузера и выполнять их — для наглядности.

Сообщество JavaScript-разработчиков с радостью встречает новые API, обновление синтаксиса и интересные фичи, ведь все это делает жизнь легче, а программирование интереснее. ES6 несет с собой большую кучу всего нового, но сегодня не об этом, сегодня мы рассмотрим шесть маленьких, возможно не очень заметных, но удобных нововведений.

1. Переменные ключи прямо в литерале объекта

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

Всего лишь нужно поставить вокруг ключа квадратные скобки, именно они делают всю магию.

2. Функции-стрелочки

Сначала они могут сбить с толку, но на самом деле это полезное нововведение в синтаксисе, что позволяет писать лаконичные анонимные функции.

Никаких function ли return, иногда даже скобки не нужны.

3. find и findIndex

Array.prototype.indexOf позволяет разработчику получить индекс какого конкретного элемента, а вот чтобы найти какой-то неизвестный объект, но который удовлетворяет определенные критерии нужно было использовать циклы. Теперь не нужно: просто используйте find чтобы найти сам элемент, и findIndex чтобы найти его индекс. Оба метода принимают параметром функцию, которая в свою очередь принимает объект и возвращает true / false, в зависимости от того, соответствует ли объект критериям.

4. Оператор распаковки ...

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

Очень удобным является то, что он работает с итераторами (NodeList, arguments) и позволяет конвертировать их в настоящие массивы, без использования Array.from или похожих хаков.

5. Литералы шаблонов

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

Но теперь не нужно, ES6 поддерживает встроенные литералы для шаблонов с использованием обратных кавычек:

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

6. Параметры по умолчанию

Параметры по умолчанию доступны в большинстве серверных языков (Python или PHP), а теперь они доступны и в JavaScript.

Переводим таблицу Excel в HTML с сохранением функционала, используя Javascript... В этом уроке мы разберем, как перевести таблицу Excel в HTML, с сохранением интерактивных элементов и формул. В итоговую верстку HTML можно будет внос...
Создаем анимированные иконки с помощью Snap.svg... Анимированные элементы стали неотъемлемой частью настольных и мобильных сайтов. Анимация SVG набирает популярность, и в этой статье мы покажем, как со...
Делаем калькулятор с расчетом в реальном времени на JavaScript... Кстати, вы обновили Wordpress до версии 4.9? Очень крутое обновление. О нем я еще напишу, но что самое ценное - редактор WP начинает походить на IDE. ...

Опубликовано в 17:20, 13 декабря 2017 | Обновлено в 17:20, 13 декабря 2017 | Просмотров: 35