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

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

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

Более новая информация по этой теме находится на странице 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

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

Деструктуризация массивов и объектов в JavaScript — в чем разница?

Деструктурирующее присваивание в JavaScript — это изящный способ извлечения значений из массивов и объектов, при котором в полной мере реализуется принцип DRY (англ. Don’t repeat yourself — «Не повторяйся»).

Цель этой статьи — продемонстрировать, как именно работают деструктурирующие присваивания массивов и объектов в JavaScript.

Поэтому без лишних слов предлагаю приступить к деструктуризации массивов.

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

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

Например, без использования синтаксиса деструктуризации массива значение элемента массива копируется в новую переменную следующим образом:

const profile = ["Oluwatobi", "Sofela", "codesweetly.com"]; const firstName = profile[0]; const lastName = profile[1]; const website = profile[2]; console.log(firstName); // "Oluwatobi" console.log(lastName); // "Sofela" console.log(website); // "codesweetly.com"

Обратите внимание, что в приведенном выше фрагменте много повторяющегося кода, что не удовлетворяет принципу DRY.

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

const profile = ["Oluwatobi", "Sofela", "codesweetly.com"]; const [firstName, lastName, website] = profile; console.log(firstName); // "Oluwatobi" console.log(lastName); // "Sofela" console.log(website); // "codesweetly.com"

Посмотрите, как мы, словно по волшебству, очистили наш код, поместив три новые переменные (то есть firstName , lastName и website ) в объект, являющийся массивом ( [. ] ). Затем мы присвоили ему значения массива profile .

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

В результате JavaScript парсит массив profile и копирует его первое значение (» Oluwatobi «) в первую переменную деструктурирующего массива ( firstName ).

Аналогичным образом компьютер извлекает второе значение (» Sofela «) из массива profile во вторую переменную ( lastName ) деструктурирующего массива.

Наконец, JavaScript копирует третье значение из массива profile (» codesweetly.com «) в третью переменную ( website ) деструктурирующего массива.

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

Деструктуризация массива напрямую

JavaScript позволяет деструктурировать массив напрямую следующим образом:

const [firstName, lastName, website] = [ "Oluwatobi", "Sofela", "codesweetly.com" ]; console.log(firstName); // "Oluwatobi" console.log(lastName); // "Sofela" console.log(website); // "codesweetly.com"

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

Синтаксис деструктуризации массива при необходимости объявления переменных без инициализации

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

let firstName, lastName, website; [firstName, lastName, website] = ["Oluwatobi", "Sofela", "codesweetly.com"]; console.log(firstName); // "Oluwatobi" console.log(lastName); // "Sofela" console.log(website); // "codesweetly.com"

А что если понадобится присвоить » Oluwatobi » переменной firstName , а остальные элементы массива — другой переменной? Как это сделать? Давайте разберемся и с этим вопросом.

Использование деструктуризации массива для присваивания переменной остальной части литерала массива

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

const [firstName, . otherInfo] = ["Oluwatobi", "Sofela", "codesweetly.com"]; console.log(firstName); // "Oluwatobi" console.log(otherInfo); // ["Sofela", "codesweetly.com"]

Примечание: оператор остатка всегда следует указывать в качестве последнего элемента деструктурирующего массива, иначе возникнет синтаксическая ошибка ( SyntaxError ).

А теперь представим, что нам нужно извлечь только значение » codesweetly.com «. Обсудим способ, которым мы воспользуемся.

Использование деструктуризации массива для извлечения значений по любому индексу

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

const [, , website] = ["Oluwatobi", "Sofela", "codesweetly.com"]; console.log(website); // "codesweetly.com"

В коде выше мы использовали запятые для пропуска переменных в первой и второй позициях деструктурирующего массива.

Таким образом нам удалось связать переменную website с третьим значением из обычного массива, указанного справа от оператора присваивания (то есть » codesweetly.com «).

Однако иногда значение, которое требуется извлечь из массива, является undefined. В этом случае JavaScript предоставляет возможность установить в деструктурирующем массиве значения по умолчанию. Рассмотрим этот случай подробнее.

Как работают значения по умолчанию при использовании деструктурирующего присваивания массива

Установить значения по умолчанию может быть полезно на тот случай, если значение, которое требуется извлечь из массива, не существует (или имеет значение undefined).

Ниже показано, как в деструктурирующем массиве задаются значения по умолчанию:

const [firstName = "Tobi", website = "CodeSweetly"] = ["Oluwatobi"]; console.log(firstName); // "Oluwatobi" console.log(website); // "CodeSweetly"

В коде выше мы задали » Tobi » и » CodeSweetly » в качестве значений по умолчанию для переменных firstName и website .

Поэтому при попытке извлечь значение с индексом 1 из массива, указанного в правой части, компьютер по умолчанию выводит » CodeSweetly «, поскольку в массиве [» Oluwatobi «] существует значение только с нулевым индексом.

А что если нужно поменять значение переменной firstName на значение переменной website ? И в этом случае мы можем воспользоваться деструктуризацией массива. Давайте посмотрим как.

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

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

let firstName = "Oluwatobi"; let website = "CodeSweetly"; [firstName, website] = [website, firstName]; console.log(firstName); // "CodeSweetly" console.log(website); // "Oluwatobi"

В коде выше мы использовали прямую деструктуризацию массива для повторного присваивания переменным firstName и website значений литерала массива, указанного справа от оператора присваивания.

Таким образом значение переменной firstName изменится с » Oluwatobi » на » CodeSweetly «. В то же время значение переменной website изменится с » CodeSweetly » на » Oluwatobi «.

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

Использование деструктуризации массива для извлечения значений из массива в параметры функции

Ниже приводится пример использования деструктуризации массива для извлечения значения из массива в параметр функции:

// Define an array with two items: const profile = ["Oluwatobi", "Sofela"]; // Define a function with one destructuring array containing two parameters: function getUserBio([firstName, lastName]) < return `My name is $$.`; > // Invoke getUserBio while passing the profile array as an argument: getUserBio(profile); // The invocation above will return: "My name is Oluwatobi Sofela."

В коде выше мы использовали параметр, который деструктурирует массив для извлечения значений из массива profile в параметры firstName и lastName функции getUserBio .

Примечание: параметр, деструктурирующий массив, обычно называют деструктурирующим параметром.

Рассмотрим еще один пример:

// Define an array with two string values and one nested array: const profile = ["codesweetly.com", "Male", ["Oluwatobi", "Sofela"]]; // Define a function with two destructuring arrays containing a parameter each: function getUserBio([website, , [userName]]) < return `$runs $`; > // Invoke getUserBio while passing the profile array as an argument: getUserBio(profile); // The invocation above will return: "Oluwatobi runs codesweetly.com"

В коде выше мы использовали два параметра, деструктурирующих массив, для извлечения значений из массива profile в параметры website и userName функции getUserBio .

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

Рассмотрим этот подход подробнее.

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

Рассмотрим приведенную ниже функцию:

function getUserBio([firstName]) < console.log( "Do something else that does not need the destructuring parameter." ); return `My name is $.`; >

Теперь вызовем функцию getUserBio , не передавая никакого аргумента в ее деструктурирующий параметр:

getUserBio();

После вызова вышеуказанной функции getUserBio браузер выдаст ошибку вроде TypeError: undefined is not iterable (Ошибка типа: undefined невозможно итерировать).

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

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

function getUserBio([firstName] = []) < console.log( "Do something else that does not need the destructuring parameter." ); return `My name is $.`; >

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

Теперь снова вызовем функцию getUserBio , не передавая никакого аргумента в ее деструктурирующий параметр:

getUserBio();

Результатом выполнения функции будет следующее:

"Do something else that does not need the destructuring parameter." "My name is undefined."

Отметим, что необязательно использовать пустой массив в качестве аргумента по умолчанию для деструктурирующего параметра. Можно использовать любое другое значение, кроме null и undefined .

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

Что представляет собой деструктуризация объектов в JavaScript?

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

Например, без использования синтаксиса деструктуризации объекта значение из объекта копируется в новую переменную следующим образом:

const profile = < firstName: "Oluwatobi", lastName: "Sofela", website: "codesweetly.com" >; const firstName = profile.firstName; const lastName = profile.lastName; const website = profile.website; console.log(firstName); // "Oluwatobi" console.log(lastName); // "Sofela" console.log(website); // "codesweetly.com"

Обратите внимание, что в приведенном выше фрагменте много повторяющегося кода, что не удовлетворяет принципу DRY.

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

const profile = < firstName: "Oluwatobi", lastName: "Sofela", website: "codesweetly.com" >; const < firstName: firstName, lastName: lastName, website: website >= profile; console.log(firstName); // "Oluwatobi" console.log(lastName); // "Sofela" console.log(website); // "codesweetly.com"

Мы снова волшебным образом очистили наш код, поместив три новые переменные в объект свойств ( <. >) и присвоив им значения из объекта profile .

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

В результате JavaScript парсит объект profile и копирует его первое значение (» Oluwatobi «) в первую переменную деструктурирующего объекта ( firstName ).

Аналогичным образом компьютер извлекает второе значение (» Sofela «) из объекта profile и записывает его во вторую переменную ( lastName ) деструктурирующего объекта.

Наконец JavaScript копирует третье значение из объекта profile (» codesweetly.com «) в третью переменную ( website ) деструктурирующего объекта.

Отметим, что в < firstName: firstName, lastName: lastName, website: website >ключи являются ссылками на свойства объекта profile , при этом значения ключей представляют собой новые переменные.

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

const profile = < firstName: "Oluwatobi", lastName: "Sofela", website: "codesweetly.com" >; const < firstName, lastName, website >= profile; console.log(firstName); // "Oluwatobi" console.log(lastName); // "Sofela" console.log(website); // "codesweetly.com"

В коде выше мы сократили < firstName: firstName, age: age, gender: gender >до < firstName, age, gender >. Более подробно о сокращенной записи можно узнать здесь.

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

Однако можно присвоить значение свойства и переменной с другим именем. Давайте посмотрим как.

Использование деструктуризации объекта, когда имя свойства отличается от имени переменной

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

const profile = < firstName: "Oluwatobi", lastName: "Sofela", website: "codesweetly.com" >; const < firstName: forename, lastName: surname, website: onlineSite >= profile; console.log(forename); // "Oluwatobi" console.log(surname); // "Sofela" console.log(onlineSite); // "codesweetly.com" console.log(website); // "ReferenceError: website is not defined"

В приведенном выше коде компьютер успешно извлек значения из объекта profile в переменные с именами forename , surname и onlineSite , несмотря на то что свойства и переменные имеют разные имена.

const profile = < lastName: < familyName: "Sofela" >>; const < lastName: < familyName: surname >> = profile; console.log(surname); // "Sofela"

В приведенном выше коде компьютер успешно извлек значения из объекта profile в переменную с именем surname , несмотря на то что свойство и переменная имеют разные имена.

Примечание: const < lastName: < familyName: surname >> = profile — это эквивалент const surname = profile.lastName.familyName .

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

Деструктуризация объекта напрямую

JavaScript допускает прямую деструктуризацию объекта свойств следующим образом:

const < firstName, lastName, website >= < firstName: "Oluwatobi", lastName: "Sofela", website: "codesweetly.com" >; console.log(firstName); // "Oluwatobi" console.log(lastName); // "Sofela" console.log(website); // "codesweetly.com"

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

Синтаксис деструктуризации объекта при необходимости объявления переменных без инициализации

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

// Declare three variables: let firstName, lastName, website; // Extract values to the three variables above: ( < firstName, lastName, website >= < firstName: "Oluwatobi", lastName: "Sofela", website: "codesweetly.com" >); // Invoke the three variables: console.log(firstName); // "Oluwatobi" console.log(lastName); // "Sofela" console.log(website); // "codesweetly.com"

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

А что если понадобится присвоить значение » Oluwatobi » переменной firstName , а остальные значения из объекта — другой переменной? Как это сделать? Давайте разберемся и с этим вопросом.

Использование деструктуризации объекта для присваивания переменной остальной части объекта

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

const < firstName, . otherInfo >= < firstName: "Oluwatobi", lastName: "Sofela", website: "codesweetly.com" >; console.log(firstName); // "Oluwatobi" console.log(otherInfo); //

Примечание: оператор остатка всегда следует указывать в качестве последнего элемента деструктурирующего объекта, иначе возникнет синтаксическая ошибка ( SyntaxError ).

Однако иногда значение, которое требуется извлечь из объекта со свойствами, является undefined . В этом случае JavaScript предоставляет возможность установить в деструктурирующем объекте значения по умолчанию. Рассмотрим этот случай подробнее.

Как работают значения по умолчанию при использовании деструктурирующего присваивания объекта

Установить значения по умолчанию может быть полезно на тот случай, если значение, которое требуется извлечь из объекта, не существует (или имеет значение undefined ).

Ниже показано, как в деструктурирующем объекте со свойствами задаются значения по умолчанию:

const < firstName = "Tobi", website = "CodeSweetly" >= < firstName: "Oluwatobi" >; console.log(firstName); // "Oluwatobi" console.log(website); // "CodeSweetly"

В коде выше мы задали » Tobi » и » CodeSweetly » в качестве значений по умолчанию для переменных firstName и website .

Поэтому при попытке извлечь значение второго свойства объекта, указанного в правой части, компьютер по умолчанию выводит » CodeSweetly «, поскольку в < firstName: "Oluwatobi" >присутствует только одно свойство.

А что если нужно поменять значение переменной firstName на значение переменной website ? И в этом случае мы можем воспользоваться деструктуризацией объекта. Давайте посмотрим как.

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

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

let firstName = "Oluwatobi"; let website = "CodeSweetly"; ( < firstName, website >= ); console.log(firstName); // "CodeSweetly" console.log(website); // "Oluwatobi"

В коде выше мы использовали прямую деструктуризацию объекта для повторного присваивания переменным firstName и website значений литерала объекта, указанного справа от оператора присваивания.

Таким образом значение переменной firstName изменится с » Oluwatobi » на » CodeSweetly «. В то же время значение переменной website изменится с » CodeSweetly » на » Oluwatobi «.

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

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

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

// Define an object with two properties: const profile = < firstName: "Oluwatobi", lastName: "Sofela", >; // Define a function with one destructuring object containing two parameters: function getUserBio(< firstName, lastName >) < return `My name is $$.`; > // Invoke getUserBio while passing the profile object as an argument: getUserBio(profile); // The invocation above will return: "My name is Oluwatobi Sofela."

В коде выше мы использовали параметр, который деструктурирует объект для копирования значений из объекта profile в параметры firstName и lastName функции getUserBio .

Примечание: параметр, деструктурирующий объект, обычно называют деструктурирующим параметром.

Рассмотрим еще один пример:

// Define an object with three-parent properties: const profile = < website: "codesweetly.com", gender: "Male", fullName: < firstName: "Oluwatobi", lastName: "Sofela" >>; // Define a function with two destructuring objects containing a parameter each: function getUserBio( < website, fullName: < firstName: userName >>) < return `$runs $`; > // Invoke getUserBio while passing the profile object as an argument: getUserBio(profile); // The invocation above will return: "Oluwatobi runs codesweetly.com"

В коде выше мы использовали два деструктурирующих параметра для копирования значений из объекта profile в параметры website и userName функции getUserBio .

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

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

Рассмотрим этот подход подробнее.

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

Рассмотрим приведенную ниже функцию:

function getUserBio(< firstName >) < console.log( "Do something else that does not need the destructuring parameter." ); return `My name is $.`; >

Теперь вызовем функцию getUserBio , не передавая никакого аргумента в ее деструктурирующий параметр:

getUserBio();

После вызова вышеуказанной функции getUserBio браузер выдаст ошибку вроде TypeError: (destructured parameter) is undefined (Ошибка типа: (деструктурированный параметр) не определен).

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

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

function getUserBio( < firstName >= <>) < console.log( "Do something else that does not need the destructuring parameter." ); return `My name is $.`; >

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

Теперь снова вызовем функцию getUserBio , не передавая никакого аргумента в ее деструктурирующий параметр:

getUserBio();

Результатом выполнения функции будет следующее:

"Do something else that does not need the destructuring parameter." "My name is undefined."

Отметим, что необязательно использовать пустой объект в качестве аргумента по умолчанию для деструктурирующего параметра. Можно использовать любое другое значение, кроме null и undefined .

Резюме

Деструктуризация массивов и объектов выполняется схожим образом. Основное различие между двумя деструктурирующими присваиваниями заключается, собственно, в том, что при деструктуризации массива значения извлекаются из массива, а при деструктуризации объекта — из объекта JavaScript.

Заключение

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

Материал подготовлен в рамках курса «JavaScript Developer. Professional». Если вам интересно узнать подробнее о формате обучения и программе, познакомиться с преподавателем курса — приглашаем на день открытых дверей онлайн. Регистрация здесь.

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

• Блог компании OTUS
• JavaScript
• Программирование

Деструктуризация в 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 для получения самой последней и актуальной информации.

Деструктуризация — JS: Массивы

Деструктуризация (destructuring) – синтаксическая возможность «раскладывать» элементы массива (и не только) в отдельные константы или переменные. Деструктуризация относится к необязательным, но очень приятным возможностям языка. Рассмотрим ее на примерах.

Представьте, что у нас есть массив из двух элементов, которыми мы хотим оперировать в нашей программе. Самый простой вариант использования его элементов — постоянное обращение по индексу point[0] и point[1] .

const point = [3, 5]; console.log(`$point[0]>:$point[1]>`); // => 3:5 

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

const x = point[0]; const y = point[1]; console.log(`$x>:$y>`); // => 3:5 

Код стал значительно понятнее, хотя и длиннее. С помощью деструктуризации то же самое можно сделать короче:

const [x, y] = point; // Слева массив повторяет структуру правого массива // но вместо значений используются идентификаторы // они заполняются значениями, стоящими на тех же позициях в правом массиве // [x, y] = [3, 5] // x = 3, y = 5 console.log(`$x>:$y>`); // => 3:5 

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

// Извлекаем первый элемент // Остальные игнорируются const [x] = point; // Извлекаем второй элемент // Для этого просто не указываем первый const [, y] = point; // и даже так const [, secondElement, , fourthElement, fifthElement] = [1, 2, 3, 4, 5, 6]; console.log(secondElement); // => 2 console.log(fourthElement); // => 4 console.log(fifthElement); // => 5 

Мы извлекли из массива [1, 2, 3, 4, 5, 6] значения второго, четвертого и пятого элементов, сохранив их в константах secondElement , fourthElement и fifthElement . При этом на месте первого (нулевой индекс) и третьего (второй индекс) элементов мы сделали пропуски, не указав никаких переменных, потому что значения этих элементов в данном случае нам были не нужны.

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

const [firstElement, secondElement, thirdElement] = [1, 2]; console.log(firstElement); // => 1 console.log(secondElement); // => 2 console.log(thirdElement); // => undefined 

Исходный массив состоит всего из двух элементов, поэтому в thirdElement сохранилось undefined . Но в таких случаях можно подстраховаться и определить значение по умолчанию:

const [firstElement, secondElement, thirdElement = 3] = [1, 2]; console.log(firstElement); // => 1 console.log(secondElement); // => 2 console.log(thirdElement); // => 3 

В массиве [1, 2] нет соответствия для thirdElement , поэтому в константу thirdElement было записано значение по умолчанию 3 .

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

const [one, [two, three]] = [1, [2, 3]]; 

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

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

Разложение массива можно использовать не только как отдельную инструкцию в коде, но и в циклах:

const points = [ [4, 3], [0, -3] ]; for (const [x, y] of points)  console.log([x, y]); > // => [ 4, 3 ] // => [ 0, -3 ] 

В этом примере каждый элемент в цикле является массивом. Без деструктуризации цикл выглядит так:

for (const item of points)  console.log(item); > 

Внутри for переменная item — это массив, поэтому вместо нее можно подставить деструктуризацию [x, y] .

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

const swapValues = ([a, b]) => [b, a]; swapValues([1, 2]); // [2, 1] 

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

В JavaScript строки ведут себя подобно массивам и их также можно деструктурировать.

const [first, second, third] = 'two'; console.log(first); // => 't' 

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

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

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

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