Деструктуризация
Материал на этой странице устарел, поэтому скрыт из оглавления сайта.
Более новая информация по этой теме находится на странице 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Как мы увидим далее, деструктуризации особенно удобны при чтении объектных параметров функций.
Деструктуризация — Основы 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 есть две чаще всего используемые структуры данных – это Object и Array .
- Объекты позволяют нам создавать одну сущность, которая хранит элементы данных по ключам.
- Массивы позволяют нам собирать элементы данных в упорядоченный список.
Но когда мы передаём их в функцию, то ей может понадобиться не объект/массив целиком, а элементы по отдельности.
Деструктурирующее присваивание – это специальный синтаксис, который позволяет нам «распаковать» массивы или объекты в несколько переменных, так как иногда они более удобны.
Деструктуризация также прекрасно работает со сложными функциями, которые имеют много параметров, значений по умолчанию и так далее. Скоро мы увидим это.
Деструктуризация массива
Вот пример деструктуризации массива на переменные:
// у нас есть массив с именем и фамилией let arr = ["Ilya", "Kantor"]; // деструктурирующее присваивание // записывает firstName = arr[0] // и surname = arr[1] let [firstName, surname] = arr; alert(firstName); // Ilya alert(surname); // KantorТеперь мы можем использовать переменные вместо элементов массива.
Отлично смотрится в сочетании со split или другими методами, возвращающими массив:
let [firstName, surname] = "Ilya Kantor".split(' '); alert(firstName); // Ilya alert(surname); // KantorКак вы можете видеть, синтаксис прост. Однако есть несколько странных моментов. Давайте посмотрим больше примеров, чтобы лучше понять это.
«Деструктуризация» не означает «разрушение».
«Деструктурирующее присваивание» не уничтожает массив. Оно вообще ничего не делает с правой частью присваивания, его задача – только скопировать нужные значения в переменные.
Это просто короткий вариант записи:
// let [firstName, surname] = arr; let firstName = arr[0]; let surname = arr[1];Пропускайте элементы, используя запятые
Нежелательные элементы массива также могут быть отброшены с помощью дополнительной запятой:
// второй элемент не нужен let [firstName, , title] = ["Julius", "Caesar", "Consul", "of the Roman Republic"]; alert( title ); // ConsulВ примере выше второй элемент массива пропускается, а третий присваивается переменной title , оставшиеся элементы массива также пропускаются (так как для них нет переменных).
Работает с любым перебираемым объектом с правой стороны
…На самом деле мы можем использовать любой перебираемый объект, не только массивы:
let [a, b, c] = "abc"; let [one, two, three] = new Set([1, 2, 3]);Присваивайте чему угодно с левой стороны
Мы можем использовать что угодно «присваивающее» с левой стороны.
Например, можно присвоить свойству объекта:
let user = <>; [user.name, user.surname] = "Ilya Kantor".split(' '); alert(user.name); // Ilya alert(user.surname); // KantorЦикл с .entries()
В предыдущей главе мы видели метод Object.entries(obj).
Мы можем использовать его с деструктуризацией для цикличного перебора ключей и значений объекта:
let user = < name: "John", age: 30 >; // цикл по ключам и значениям for (let [key, value] of Object.entries(user)) < alert(`$:$`); // name:John, затем age:30 >…то же самое для map:
let user = new Map(); user.set("name", "John"); user.set("age", "30"); // Map перебирает как пары [ключ, значение], что очень удобно для деструктурирования for (let [key, value] of user) < alert(`$:$`); // name:John, затем age:30 >Трюк обмена переменных
Существует хорошо известный трюк для обмена значений двух переменных с использованием деструктурирующего присваивания:
let guest = "Jane"; let admin = "Pete"; // Давайте поменяем местами значения: сделаем guest = "Pete", а admin = "Jane" [guest, admin] = [admin, guest]; alert(`$ $`); // Pete Jane (успешно заменено!)Здесь мы создаём временный массив из двух переменных и немедленно деструктурируем его в порядке замены.
Таким образом, мы можем поменять местами даже более двух переменных.
Остаточные параметры «…»
Обычно, если массив длиннее, чем список слева, «лишние» элементы опускаются.
Например, здесь берутся только первые два элемента, а остальные просто игнорируются:
let [name1, name2] = ["Julius", "Caesar", "Consul", "of the Roman Republic"]; alert(name1); // Julius alert(name2); // Caesar // Дальнейшие элементы нигде не присваиваютсяЕсли мы хотим не просто получить первые значения, но и собрать все остальные, то мы можем добавить ещё один параметр, который получает остальные значения, используя оператор «остаточные параметры» – троеточие ( «. » ):
let [name1, name2, . rest] = ["Julius", "Caesar", "Consul", "of the Roman Republic"]; // rest это массив элементов, начиная с 3-го alert(rest[0]); // Consul alert(rest[1]); // of the Roman Republic alert(rest.length); // 2Переменная rest является массивом из оставшихся элементов.
Вместо rest можно использовать любое другое название переменной, просто убедитесь, что перед переменной есть три точки и она стоит на последнем месте в деструктурирующем присваивании.
let [name1, name2, . titles] = ["Julius", "Caesar", "Consul", "of the Roman Republic"]; // теперь titles = ["Consul", "of the Roman Republic"]Значения по умолчанию
Если в массиве меньше значений, чем в присваивании, то ошибки не будет. Отсутствующие значения считаются неопределёнными:
let [firstName, surname] = []; alert(firstName); // undefined alert(surname); // undefinedЕсли мы хотим, чтобы значение «по умолчанию» заменило отсутствующее, мы можем указать его с помощью = :
// значения по умолчанию let [name = "Guest", surname = "Anonymous"] = ["Julius"]; alert(name); // Julius (из массива) alert(surname); // Anonymous (значение по умолчанию)Значения по умолчанию могут быть гораздо более сложными выражениями или даже функциями. Они выполняются, только если значения отсутствуют.
Например, здесь мы используем функцию prompt для указания двух значений по умолчанию.
// prompt запустится только для surname let [name = prompt('name?'), surname = prompt('surname?')] = ["Julius"]; alert(name); // Julius (из массива) alert(surname); // результат promptОбратите внимание, prompt будет запущен только для пропущенного значения ( surname ).
Деструктуризация объекта
Деструктурирующее присваивание также работает с объектами.
У нас есть существующий объект с правой стороны, который мы хотим разделить на переменные. Левая сторона содержит «шаблон» для соответствующих свойств. В простом случае это список названий переменных в <. >.
let options = < title: "Menu", width: 100, height: 200 >; let = options; alert(title); // Menu alert(width); // 100 alert(height); // 200Свойства options.title , options.width и options.height присваиваются соответствующим переменным.
Порядок не имеет значения. Вот так – тоже работает:
// изменён порядок в let let =
Шаблон с левой стороны может быть более сложным и определять соответствие между свойствами и переменными.
Если мы хотим присвоить свойство объекта переменной с другим названием, например, свойство options.width присвоить переменной w , то мы можем использовать двоеточие:
let options = < title: "Menu", width: 100, height: 200 >; // < sourceProperty: targetVariable >let = options; // width -> w // height -> h // title -> title alert(title); // Menu alert(w); // 100 alert(h); // 200Двоеточие показывает «что : куда идёт». В примере выше свойство width сохраняется в переменную w , свойство height сохраняется в h , а title присваивается одноимённой переменной.
Для потенциально отсутствующих свойств мы можем установить значения по умолчанию, используя «=» , как здесь:
let options = < title: "Menu" >; let = options; alert(title); // Menu alert(width); // 100 alert(height); // 200Как и в случае с массивами, значениями по умолчанию могут быть любые выражения или даже функции. Они выполнятся, если значения отсутствуют.
В коде ниже prompt запросит width , но не title :
let options = < title: "Menu" >; let = options; alert(title); // Menu alert(width); // (результат prompt)Мы также можем совмещать : и = :
let options = < title: "Menu" >; let = options; alert(title); // Menu alert(w); // 100 alert(h); // 200Если у нас есть большой объект с множеством свойств, можно взять только то, что нужно:
let options = < title: "Menu", width: 100, height: 200 >; // взять только title, игнорировать остальное let < title >= options; alert(title); // MenuОстаток объекта «…»
Что если в объекте больше свойств, чем у нас переменных? Можем ли мы взять необходимые нам, а остальные присвоить куда-нибудь?
Можно использовать троеточие, как и для массивов. В некоторых старых браузерах (IE) это не поддерживается, используйте Babel для полифила.
let options = < title: "Menu", height: 200, width: 100 >; // title = свойство с именем title // rest = объект с остальными свойствами let = options; // сейчас title="Menu", rest= alert(rest.height); // 200 alert(rest.width); // 100Обратите внимание на let
В примерах выше переменные были объявлены в присваивании: let = . Конечно, мы могли бы использовать существующие переменные и не указывать let , но тут есть подвох.
Вот так не будет работать:
let title, width, height; // ошибка будет в этой строке = ;Проблема в том, что JavaScript обрабатывает <. >в основном потоке кода (не внутри другого выражения) как блок кода. Такие блоки кода могут быть использованы для группировки операторов, например:
Так что здесь JavaScript считает, что видит блок кода, отсюда и ошибка. На самом-то деле у нас деструктуризация.
Чтобы показать JavaScript, что это не блок кода, мы можем заключить выражение в скобки (. ) :
let title, width, height; // сейчас всё работает ( = ); alert( title ); // MenuВложенная деструктуризация
Если объект или массив содержит другие вложенные объекты или массивы, то мы можем использовать более сложные шаблоны с левой стороны, чтобы извлечь более глубокие свойства.
В приведённом ниже коде options хранит другой объект в свойстве size и массив в свойстве items . Шаблон в левой части присваивания имеет такую же структуру, чтобы извлечь данные из них:
let options = < size: < width: 100, height: 200 >, items: ["Cake", "Donut"], extra: true >; // деструктуризация разбита на несколько строк для ясности let < size: < // положим size сюда width, height >, items: [item1, item2], // добавим элементы к items title = "Menu" // отсутствует в объекте (используется значение по умолчанию) > = options; alert(title); // Menu alert(width); // 100 alert(height); // 200 alert(item1); // Cake alert(item2); // DonutВесь объект options , кроме свойства extra , которое в левой части отсутствует, присваивается в соответствующие переменные:
В итоге у нас есть width , height , item1 , item2 и title со значением по умолчанию.
Заметим, что переменные для size и items отсутствуют, так как мы взяли сразу их содержимое.
Умные параметры функций
Есть ситуации, когда функция имеет много параметров, большинство из которых не обязательны. Это особенно верно для пользовательских интерфейсов. Представьте себе функцию, которая создаёт меню. Она может иметь ширину, высоту, заголовок, список элементов и так далее.
Вот так – плохой способ писать подобные функции:
function showMenu(title = "Untitled", width = 200, height = 100, items = []) < // . >В реальной жизни проблема заключается в том, как запомнить порядок всех аргументов. Обычно IDE пытаются помочь нам, особенно если код хорошо документирован, но всё же… Другая проблема заключается в том, как вызвать функцию, когда большинство параметров передавать не надо, и значения по умолчанию вполне подходят.
Разве что вот так?
// undefined там, где подходят значения по умолчанию showMenu("My Menu", undefined, undefined, ["Item1", "Item2"])Это выглядит ужасно. И становится нечитаемым, когда мы имеем дело с большим количеством параметров.
На помощь приходит деструктуризация!
Мы можем передать параметры как объект, и функция немедленно деструктурирует его в переменные:
// мы передаём объект в функцию let options = < title: "My menu", items: ["Item1", "Item2"] >; // . и она немедленно извлекает свойства в переменные function showMenu() < // title, items – взято из options, // width, height – используются значения по умолчанию alert( `$$ $` ); // My Menu 200 100 alert( items ); // Item1, Item2 > showMenu(options);Мы также можем использовать более сложное деструктурирование с вложенными объектами и двоеточием:
let options = < title: "My menu", items: ["Item1", "Item2"] >; function showMenu(< title = "Untitled", width: w = 100, // width присваиваем в w height: h = 200, // height присваиваем в h items: [item1, item2] // первый элемент items присваивается в item1, второй в item2 >) < alert( `$$ $` ); // My Menu 100 200 alert( item1 ); // Item1 alert( item2 ); // Item2 > showMenu(options);Полный синтаксис – такой же, как для деструктурирующего присваивания:
function(< incomingProperty: varName = defaultValue . >)Тогда для объекта с параметрами будет создана переменная varName для свойства с именем incomingProperty по умолчанию равная defaultValue .
Пожалуйста, обратите внимание, что такое деструктурирование подразумевает, что в showMenu() будет обязательно передан аргумент. Если нам нужны все значения по умолчанию, то нам следует передать пустой объект:
showMenu(<>); // ок, все значения - по умолчанию showMenu(); // так была бы ошибкаМы можем исправить это, сделав <> значением по умолчанию для всего объекта параметров:
function showMenu( < title = "Menu", width = 100, height = 200 >= <>) < alert( `$$ $` ); > showMenu(); // Menu 100 200В приведённом выше коде весь объект аргументов по умолчанию равен <> , поэтому всегда есть что-то, что можно деструктурировать.
Итого
- Деструктуризация позволяет разбивать объект или массив на переменные при присвоении.
- Полный синтаксис для объекта:
let = objectlet [item1 = default, item2, . rest] = arrayДеструктурирующее присваивание массива в ES6
Деструктурирующее присваивание в JavaScript — упрощённый метод извлечения нескольких свойств из массива путём взятия структуры и её деконструкции на отдельные составные части посредством присваивания с использованием синтаксиса, который похож на литералы массива.
Она создаёт шаблон, описывающий ожидаемые значения и выполняет присваивание. При деструктурирующем присваивание массива используются позиции.
Синтаксис с деструктурирующим присваиванием массива:
let [first, second, third] = ["Laide", "Gabriel", "Jets"];Синтаксис без деструктуризации:
let first = "laide",
second = "Gabriel",
third = "Jets";Вы не можете использовать числа при деструктуризации, Это вызовет ошибку, потому что числа не могут быть именами переменных.
Это выражение вызовет ошибку синтаксиса:
let [1, 2, 3] = ["Laide", "Ola", "Jets"];Деструктурирующее присваивание сделало извлечение данных из массива простым и читаемым. Представьте, что вы пытаетесь извлечь данные из массива с пятью или шестью уровнями вложенности? Это было бы утомительно. Вы используете литерал массива в левой части присваивания.
let thing = ["Table", "Chair", "Fan"];
let [a, b, c] = thing;Он берёт каждую перемеренную в литерале массива левой части и сопоставляет её с элементом с тем же индексом в правом массиве.
console.log(a); // Output: Table
console.log(b); //Output: Chair
console.log(c); //Output: FanПри деструктурирующем присваивании, объявление и присваивание могут выполняться отдельно.
let first, second;
[first, second] = ["Male", "Female"];Если количество переменных, переданных литералами деструктурирующего присваивания массива, превышает количество элементов в массиве, то переменные не сопоставленные ни с одним элементом массива получают значение undefined .
let things = ["Table", "Chair", "Fan", "Rug"];
let [a, b, c, d, e] = things;
console.log(c); //Output: Fan
console.log(d); //Output: Rug
console.log(e); //Output: undefinedЕсли количество переменных, переданных в литералах деструктурирующего присваивания массива, меньше, чем количество элементов в массиве, элементы без переменных, которые должны быть сопоставлены, просто остаются. Это не вызовет ошибку.
let things = ["Table", "Chair", "Fan", "Rug"];
let [a, b, c] = things;
console.log(c); // Output: FanДеструктурирующеё присваивание возвращаемого массива
Дструктурирующеё присваивание может работать с функцией возвращающей массив. Это работает со всеми итераторами.
function runners()
return ["Sandra", "Ola", "Chi"];
>
let [a, b, c] = runners();
console.log(a); //Output: Sandra
console.log(b); //Output: Ola
console.log(c); //Output: ChiЗначение по умолчанию
Деструктурирующее присваивание позволяет присвоить переменной значение по умолчанию, если у переменной нет значения или undefined . Это похоже на резервирование, когда ничего не присвоено.
let a, b;
[a = 40, b = 4] = [];
console.log(a); //Output: 40
console.log(b); //Output: 4
[a = 40, b = 4] = [1, 23];
console.log(a); //Output: 1
console.log(b); //Output: 23Значения по умолчанию также могут относиться к другим переменным, включая одну или несколько переменных в том же литерале массива.
let [first = "Cotlin", second = first] = [];
console.log(first); //Output: Cotlin
console.log(second); //Output: Cotlin
let [first = "Cotlin", second = first] = ["Koku"];
console.log(first); //Output: Koku
console.log(second); //Output: Koku
let [first = "Cotlin", second = first] = ["Koku", "Lydia"];
console.log(first); //Output: Koku
console.log(second); //Output: LydiaИгнорирование значений
Деструктурирующее присваивание позволяет сопоставить переменную с интересующим вас элементом. Вы можете игнорировать или пропускать другие элементы в массиве используя запятые.
let a, b;
[a, , b] = ["Lordy", "Crown", "Roses"];
console.log(a); //Output: Lordy
console.log(b); //Output: RosesОстаточный параметр и «spread» синтаксис
Новый оператор . добавленный в ES6 можно использовать при деструктурирующем присваивании. Если оператор . расположен в левой части при деструктурирующем присваивании — это Остаточный параметр . Остаточный параметр используется для сопоставления всех оставшихся элементов в массиве, которые не были сопоставлены с самой остаточной переменной. Это похоже на сбор всего, что осталось. Остаточная переменная всегда должна быть последней, в противном случае выдаётся ошибка SyntaxError
let planets = ["Mercury", "Earth", "Venus", "Mars", "Pluto", "Saturn"];
let [first, , third, . others] = planets;
console.log(first); //Output: Mercury
console.log(third); //Output: Venus
console.log(others); //Output: ["Mars", "Pluto", "Saturn"]Если в при деструктурирующем присваивании в правой части используется оператор . — это spread синтаксис . Он берёт все элементы массива, которым не сопоставлена никакая переменная, с затем сопоставляет их с остаточной переменной.
let planets = ["Mercury", "Earth", "Venus", "Mars", "Pluto", "Saturn"];
let [first, second, . rest] = ["Mercury", "Earth", . planets, "Saturn"];
console.log(first); //Output: Mercury
console.log(second); //Output: Earth
console.log(rest); //Output: ["Venus", "Mars", "Pluto", "Saturn"]Когда у вас больше переменных в левой части, он сопоставляет отдельные элементы массива равным образом с переменными.
let planets = ["Mercury", "Earth", "Venus", "Mars", "Pluto", "Saturn"];
let [first, second, . rest] = ["Mercury", . planets];
console.log(first); //Output: Mercury
console.log(second); //Output: Mercury
console.log(rest); //Output: ["Earth", "Venus", "Mars", "Pluto", "Saturn"]
let planets = ["Mercury", "Earth", "Venus", "Mars", "Pluto", "Saturn"];
let [first, second, third, fourth . rest] = ["Mercury", "Earth", . planets];
console.log(first); //Output: Mercury
console.log(second); //Output: Earth
console.log(third); //Output: Mercury
console.log(fourth); //Output: Earth
console.log(rest); //Output: ["Venus", "Mars", "Pluto", "Saturn"]Обмен или перестановка переменных
Одно деструктурирующее присваивание выражения может использоваться для обмена значений двух переменных.
let a, b;
[a, b] = ["Male", "Female"];
[a, b] = [b, a];
console.log(a); //Output: Female
console.log(b); //Output: MaleДеструктурирующем присваивание вложенного массива
Вы можете выполнять вложенное деструктурирующее присваивание с массивами. Соответствующие элементы должны быть в том же порядке, что и элементы деструктурируемого массива.
var numbers = [8, [1, 2, 3], 10, 12];
var [a, [d, e, f]] = numbers;
console.log(a); // Output: 8
console.log(d); // Output: 1
console.log(e); // Output: 2Множественная деструктурирующее присваивание массива
Вы можете деструктурировать массив более одного раза в одном фрагменте кода.
var places = ["first", "second", "third", "fourth"];
var [a, b, , d] = [f, . rest] = places;
console.log(a); //Output: first
console.log(d); //Output: fourth
console.log(f); //Output: first
console.log(rest); //Output: ["second", "third", "fourth"]Заключение
Вы можете скопировать и вставить фрагменты кода на сайт Babel, чтобы увидеть, как он выглядел бы без деструктурирующего присваивания. Вы написали бы намного больше строк кода, но деструктуризация всё упрощает.