ES6 в действии: Назначение деструктурирования объектов и массивов

ES6 в действии: Назначение деструктурирования объектов и массивов

От автора: назначение деструктурирования — звучит, как что-то очень сложное. Это напоминает мне объектно-ориентированные термины, такие как инкапсуляция и полиморфизм. Я убежден, что они были выбраны специально для того, чтобы простые концепции казались запредельно сложными!

По сути, назначение деструктурирования ECMAScript 6 (ES2015) позволяет извлекать отдельные элементы из массивов или объектов и помещать их в переменные с использованием сокращенного синтаксиса. Те, кто пришел из PHP, возможно, сталкивались с функцией list(), которая извлекает массивы в переменные за одну операцию. В ES6 объекты и массивы могут отдавать элементы иным способом.

Предположим, у нас есть массив:

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

В ES5 мы можем извлечь эти значения по индексу:

Деструктурирование ES6 позволяет использовать более простую и менее подверженную ошибкам альтернативу:

Вы можете игнорировать определенные значения, например.

или использовать оператор (…) для извлечения оставшихся элементов:

Деструктурирование также работает с объектами, например.

В этом примере имена переменных one, two и three соответствуют именам свойств объектов. Мы также можем назначать свойства переменным с любым именем, например.

Более сложными вложенными объектами также могут быть ссылки, например.

Это кажется сложным, но помните, что во всех назначениях деструктурирования:

левая часть назначения это цель деструктурирования — шаблон, который определяет назначаемые переменные

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

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

Вы должны либо объявить переменные, например:

либо использовать круглые скобки, если переменные уже объявлены, например.

Вы также должны быть осторожными при смешивании объявленных и необъявленных переменных, например.

Это основные принципы деструктурирования. Так когда это может нам пригодиться? Я рад, что вы спросили …

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Простое объявление

Переменные могут быть объявлены без явного определения каждого значения, например.

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

Обмен значений переменных

Для обмена значений переменных в ES5 требуется временная третья переменная, но с деструктурированием это делается намного проще:

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

Параметры функции по умолчанию

Предположим, что у нас была функция для вывода объекта meta:

В ES5 необходимо парсировать этот объект, чтобы обеспечить соответствующие значения по умолчанию, например.

В ES6 мы можем присвоить значение по умолчанию любому параметру, например.

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

Я не уверен, что это легче читать, но это значительно короче.

Возврат из функции нескольких значений

Функции могут возвращать только одно значение, но это может быть сложный объект или многомерный массив. Назначение деструктурирования делает это более практичным, например.

Итерация for-of

Рассмотрим массив информации о книге:

for-of ES6 похож на for-in, за исключением того, что он извлекает каждое значение, а не индекс / ключ. Например.

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

Обработка регулярных выражений

Функции регулярных выражений, такие как match, возвращают массив совпадающих элементов, которые могут стать источником назначения деструктурирования:

Поддержка назначения деструктурирования

Назначение деструктурирования может не решить все вопросы, но это поможет вам сэкономить немало усилий! В настоящее время поддержка назначения деструктурирования довольно хороша. Оно доступно в Node и во всех основных браузерах, за исключением Internet Explorer. Если вам необходимо поддерживать старые браузеры, рекомендуется использовать компилятор, такой как Babel или Traceur, который переводит назначение деструктурирования ES6 в эквивалент ES5.

Автор: Craig Buckler

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Курс по ES 6 (EcmaScript 6.0)

Прямо сейчас посмотрите курс по EcmaScript 6.0

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree