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

Синтаксис:-

const rgb = [255, 200, 0]; 
// array destructuring
const [red, green, blue] = rgb 
console.log(`R: ${red}, G: ${green}, B: ${blue}`);

В приведенном выше примере мы присвоили элементы в массиве RGB трем локальным переменным: красной, зеленой и синей, используя деструктурирование массива.

Изучаете JavaScript? Итак, вы, возможно, сделали какой-то проект. Вы можете создать свой профиль Proof of Work и получить в 10 раз больше возможностей.

Пропуск элементов

const rgb = [255, 200, 0]; 
// skip the first two items
// assign the only third item ot the blue variable
const [, , blue] = rgb 
console.log(`B: ${blue}`);

Можно пропустить некоторые элементы, которые вы не хотите назначать локальным переменным, и назначать только те, которые вас интересуют. Мы использовали comma separation, чтобы опустить первые два элемента массива RGB, поскольку нам нужен был только третий элемент.

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

const color = ['#FFF', [255, 0, 255], 'rgb(255, 0, 255)']; 
// use nested destructuring to assign red, green and blue
const [hex, [red, green, blue]] = color; 
console.log(hex, red, green, blue);

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

Остальные предметы

const rainbow = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']; 
// Assing the first and third items to red and yellow
// Assign the remaining items to otherColors variable using the spread operator (...)
const [red,, yellow, ...otherColors] = rainbow; 
console.log(otherColors);

Новый синтаксис остальных параметров (… param), добавленный в ES6, можно использовать с деструктурированием для достижения этой цели. Это называется переменной остальных элементов. Обратите внимание, однако, что параметр rest, если он используется, всегда должен отображаться как последний элемент литерала массива деструктурирования, иначе будет выдана ошибка.

Закрытие двух массивов

const rainbow = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']; 
// Cloning with array destructuring and spread operator
const [...rainbowClone] = rainbow; 
console.log(rainbow === rainnowClone); // false
console.log(rainbowClone); 
// ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']

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

В приведенном выше примере любое изменение в массиве rainbowClone не будет отражено в массиве rainbow.

Смешанная деструктуризация

const person = {
    name: 'Rahul', 
    age: '16', 
    location: {
        country: 'India', 
        city: 'Pune'
    }
}
// observe how mix of object and array desctructuring is being used here. We are assigning 3 variables: name, country, city 
const {name, location: {country, city}} = person; 
console.log(`I am ${name} from ${city}, ${country}.`);

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

Спасибо за чтение | Поделись, пожалуйста