Деструктуризация что это простыми словами

Деструктуризация

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Более новая информация по этой теме находится на странице https://learn.javascript.ru/destructuring-assignment.

Деструктуризация (destructuring assignment) – это особый синтаксис присваивания, при котором можно присвоить массив или объект сразу нескольким переменным, разбив его на части.

Массив

Пример деструктуризации массива:

'use strict'; let [firstName, lastName] = ["Илья", "Кантор"]; alert(firstName); // Илья alert(lastName); // Кантор

При таком присвоении первое значение массива пойдёт в переменную firstName , второе – в lastName , а последующие (если есть) – будут отброшены.

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

'use strict'; // первый и второй элементы не нужны let [, , title] = "Юлий Цезарь Император Рима".split(" "); alert(title); // Император

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

Оператор «spread»

Если мы хотим получить и последующие значения массива, но не уверены в их числе – можно добавить ещё один параметр, который получит «всё остальное», при помощи оператора «. » («spread», троеточие):

'use strict'; let [firstName, lastName, . rest] = "Юлий Цезарь Император Рима".split(" "); alert(firstName); // Юлий alert(lastName); // Цезарь alert(rest); // Император,Рима (массив из 2х элементов)

Значением rest будет массив из оставшихся элементов массива. Вместо rest можно использовать и другое имя переменной, оператор здесь – троеточие. Оно должно стоять только последним элементом в списке слева.

Значения по умолчанию

Если значений в массиве меньше, чем переменных – ошибки не будет, просто присвоится undefined :

'use strict'; let [firstName, lastName] = []; alert(firstName); // undefined

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

'use strict'; // значения по умолчанию let [firstName="Гость", lastName="Анонимный"] = []; alert(firstName); // Гость alert(lastName); // Анонимный

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

'use strict'; function defaultLastName() < return Date.now() + '-visitor'; >// lastName получит значение, соответствующее текущей дате: let [firstName, lastName=defaultLastName()] = ["Вася"]; alert(firstName); // Вася alert(lastName); // 1436. -visitor

Заметим, что вызов функции defaultLastName() для генерации значения по умолчанию будет осуществлён только при необходимости, то есть если значения нет в массиве.

Деструктуризация объекта

Деструктуризацию можно использовать и с объектами. При этом мы указываем, какие свойства в какие переменные должны «идти».

Объект справа – уже существующий, который мы хотим разбить на переменные. А слева – список переменных, в которые нужно соответствующие свойства записать.

'use strict'; let options = < title: "Меню", width: 100, height: 200 >; let = options; alert(title); // Меню alert(width); // 100 alert(height); // 200

Как видно, свойства options.title , options.width и options.height автоматически присвоились соответствующим переменным.

Если хочется присвоить свойство объекта в переменную с другим именем, например, чтобы свойство options.width пошло в переменную w , то можно указать соответствие через двоеточие, вот так:

'use strict'; let options = < title: "Меню", width: 100, height: 200 >; let = options; alert(title); // Меню alert(w); // 100 alert(h); // 200

В примере выше свойство width отправилось в переменную w , свойство height – в переменную h , а title – в переменную с тем же названием.

Если каких-то свойств в объекте нет, можно указать значение по умолчанию через знак равенства = , вот так;

'use strict'; let options = < title: "Меню" >; let = options; alert(title); // Меню alert(width); // 100 alert(height); // 200

Можно и сочетать одновременно двоеточие и равенство:

'use strict'; let options = < title: "Меню" >; let = options; alert(title); // Меню alert(w); // 100 alert(h); // 200

А что, если в объекте больше значений, чем переменных? Можно ли куда-то присвоить «остаток», аналогично массивам?

Такой возможности в текущем стандарте нет. Она планируется в будущем стандарте, и выглядеть она будет примерно так:

'use strict'; let options = < title: "Меню", width: 100, height: 200 >; let = options; // title = "Меню" // size = < width: 100, height: 200>(остаток)

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

Деструктуризация без объявления

В примерах выше переменные объявлялись прямо перед присваиванием: let = . Конечно, можно и без let , использовать уже существующие переменные.

Однако, здесь есть небольшой «подвох». В JavaScript, если в основном потоке кода (не внутри другого выражения) встречается <. >, то это воспринимается как блок.

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

'use strict'; < // вспомогательные переменные, локальные для блока let a = 5; // поработали с ними alert(a); // 5 // больше эти переменные не нужны >alert(a); // ошибка нет такой переменной

Конечно, это бывает удобно, но в данном случае это создаст проблему при деструктуризации:

let a, b; = ; // будет ошибка, оно посчитает, что - блок

Чтобы избежать интерпретации как блока, нужно обернуть всё присваивание в скобки:

let a, b; ( = ); // внутри выражения это уже не блок

Вложенные деструктуризации

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

Деструктуризации можно как угодно сочетать и вкладывать друг в друга.

В коде ниже options содержит подобъект и подмассив. В деструктуризации ниже сохраняется та же структура:

'use strict'; let options = < size: < width: 100, height: 200 >, items: ["Пончик", "Пирожное"] > let < title="Меню", size: , items: [item1, item2] > = options; // Меню 100 200 Пончик Пирожное alert(title); // Меню alert(width); // 100 alert(height); // 200 alert(item1); // Пончик alert(item2); // Пирожное

Как видно, весь объект options корректно разбит на переменные.

Итого

• Деструктуризация позволяет разбивать объект или массив на переменные при присвоении.
• Синтаксис:

let = object

Здесь двоеточие : задаёт отображение свойства prop в переменную varName , а равенство =default задаёт выражение, которое будет использовано, если значение отсутствует (не указано или undefined ). Для массивов имеет значение порядок, поэтому нельзя использовать : , но значение по умолчанию – можно:

let [var1 = default, var2, . rest] = array

Как мы увидим далее, деструктуризации особенно удобны при чтении объектных параметров функций.

Значение слова «деструктуризация»

Привет! Меня зовут Лампобот, я компьютерная программа, которая помогает делать Карту слов. Я отлично умею считать, но пока плохо понимаю, как устроен ваш мир. Помоги мне разобраться!

Спасибо! Я стал чуточку лучше понимать мир эмоций.

Вопрос: под спудом — это что-то нейтральное, положительное или отрицательное?

Нейтральное
Положительное
Отрицательное

Синонимы к слову «деструктуризация&raquo

Предложения со словом «деструктуризация&raquo

• Исключим из рассмотрения ситуации абсолютных катастроф, при которых происходит полная деструктуризация того или иного уровня феноменологической стратификации систем.

Понятия, связанные со словом «деструктуризация»

Модель жизнеспособной системы (англ. viable system model, VSM) является моделью организационной структуры любого жизнеспособного организма или автономной системы. Жизнеспособной системой является любая система, способная поддерживать своё отдельное существование в определенной среде. Одна из основных особенностей жизнеспособных систем в том, что они могут адаптироваться к изменяющимся условиям окружающей среды.

Каузальная ориентация (англ. causality orientations theory) — тип мотивационной подсистемы в сочетании с соответствующими когнитивными, аффективными и другими психологическими характеристиками. Может быть внутренней (интернальной), внешней (экстернальной) или безличной. Термин сформулирован в рамках теории самодетерминации личности Ричарда М. Райана и Эдварда Л. Деси. Теория каузальной ориентации (или причинно-личностной ориентации) является одной из пяти мини-теорий самодетерминации личности.

Индивидуальные человеко-машинные системы (ИЧМС) — слабопредсказуемые системы, глубокое знание устройства не позволяет точно определить их функции, это сложные системы кибернетики.

Воплощённое познание (англ. Embodied cognition) — теория, подразумевающая, что разум нужно рассматривать в его взаимосвязях с физическим телом, которое в свою очередь взаимодействует с окружающей средой.

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

Деструктуризация — Основы Ruby

Destructuring – синтаксический сахар для разложения составных данных на элементы. Удобная возможность языка, которая повышает читабельность кода и немного сокращает его количество. Пример:

data = ['hexlet', 'online courses', topics: ['php', 'js']] name, description, topics = data puts name # "hexlet" puts description # "online courses" puts topics # # Обычный способ # name = data[0] либо data.first # description = data[1] # topics = data[2] либо data.last

Имена переменных name и description могут быть любыми, на деструктуризацию это не влияет. Стоит запомнить, что для деструктуризации вложенных массивов нам нужно знать либо количество элементов в массиве, либо пропустить их, чтобы не получить исключение. Пример:

data = ['hexlet', 'online courses', ['php', 'js']] # для доступа ко вложенному массиву используются круглые скобки name, description, (first_topic, second_topic) = data # учли количество элементов # _ – используется, когда значение не важно _, _, (first_topic, _) = data # так же все элементы учтены # * – указывает, что нам не важны все значения *, (_, second_topic) = data # пропустили элементы в первом массиве, во вложенном количество учтено # данный пример вызовет исключение: не учли количество элементов name, description, (first_topic) = data # Error

Часто деструктуризацию используют для отделения первого (или первых) элемента от остальных. Для этого используется splat-оператор – * .

data = ['hexlet', 'online courses', ['php', 'js']] name, *rest = data puts rest # ["online courses", ["php", "js"]] # В любом месте name, *rest, topic = data puts rest # ["online courses"]

Деструктуризация, к сожалению, не работает для хешей. Однако можно немного схитрить и получить похожую функциональность:

data =  name: 'hexlet', description: 'online courses', topic: 'programming' > # values_at возвращает массив из значений для указанных ключей name, description = data.values_at(:name, :description)

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

# разложен первый аргумент # обязательны скобки def process((name, *rest)) # логика end

Открыть доступ

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

• 130 курсов, 2000+ часов теории
• 1000 практических заданий в браузере
• 360 000 студентов

Наши выпускники работают в компаниях:

Деструктуризация в JavaScript

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

Что такое деструктуризация?

Само понятие деструктуризация (деструктурирующее присваивание) обозначает способ получения данных из массива или объекта путем использования специального синтаксиса. В чем его главная идея? Облегчить труд рядового разработчика и повысить скорость самой разработки путем написания меньшего кода. Давайте посмотрим сперва на саму проблему, решим ее стандартным способом, а затем воспользуемся деструктуризацией.

Деструктуризация массивов

Предположим что у нас есть массив простых строк.

 const array = ["one", "two", "three"] 

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

 console.log(array[0]) // ‘one’ 

Теперь воспользуемся деструктуризацией для решения этой же задачи. Для этого достаточно указать в квадратных скобках (по количеству элементов массива) переменные которые будут автоматически производить нам действие обращения по индексу

 const array = ["one", "two", "three"] const [one, two, three] = array console.log(one) // ‘one’ 

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

 const array = ["one", "two", "three"] const [, , three] = array console.log(three) // «three» 

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

 const array = [«one», «two», «three»] const [one, two, three, four] = array console.log(four) // undefined const [one, two, three, four = ‘four'] = array console.log(four) // ‘four’ 

Деструктуризация объектов

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

 const person = < name: «Vova», age: 24, hobbies: < sport: [‘boxing’, ‘swimming] >> 

Для получения возраста достаточно воспользоваться точечной нотацией.

 const age = person.age; console.log(age) // 24 

Теперь используем деструктуризацию.

 const < age >= person console.log(age) // 24 

Помимо синтаксиса деструктуризация имеет ряд преимуществ:

1. Быстрое присваивание переменными других названий — достаточно указать новое название переменной после двоеточия.

 const < name: firstName >= person console.log(firstName) // «Vova» 

2. Присваивание значений по умолчанию, по аналогии с массивом — просто добавив после знака равно нужное значение.

 const < street = "123" >= person // Такого поля нет в объекте console.log(street) // "123" 

3. Деструктуризация вложенных элементов (объектов, массивов)

 const < name, age, hobbies: < sport >> = person; console.log(sport[0]) // ‘boxing’ 

Заключение

Сегодня мы рассмотрели на практике использование деструктурирующего присваивания и погрузились в нюансы работы и «фишки», которые вы можете использовать на практике. Надеюсь, что данный материал был вам полезен. Учитесь, думайте, пишите код. Удачного кодинга, друзья!

Подписывайтесь на наш канал в Telegram и на YouTube для получения самой последней и актуальной информации.