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

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

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

Доступ к вложенным свойствам и установка значений по умолчанию

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

const person = {
  name: 'Ethan',
  age: 23,
  work: {
    job: 'Driver'
  }
};
const {work: {job} } = person;
console.log(job); //prints: Driver

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

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

const { work: { job = 'NA', salary = 'NA'} = {} } = person;

Доступ к элементам массива

Как и деструктуризация объекта, деструктуризация массива также возможна с синтаксисом, как показано ниже:

const arr = [1,2,3]; 
const [a, b] = arr;
//a = 1, b = 2

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

//skips the 2nd element
const [first,,third] = arr;

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

const arr = ['a','b','c','d'];
const {0: first, 3: fourth} = arr;
console.log(fourth) //d
const {0: first, 3: fourth, 9: tenth = 'z'} = arr;

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

Вы также можете получить доступ к вложенным элементам массива аналогично объектам:

const arr = ['a', [1, 2, 3]]
const [first, [one, two, three]] = arr;

Пропуск свойств с использованием синтаксиса Rest

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

const arr = ["Hello", "How" , "are", "you"];
var [hello,...remaining] = arr;
console.log(remaining) // ["How" , "are", "you"]

Вышеупомянутое выражение также можно использовать для клонирования массива.

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

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

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

Вычисленные свойства указаны в квадратных скобках, как показано ниже:

const person = {
  name: 'Ethan',
  work: {
    job: 'Driver'
  }
};
let name = 'name'const { [name] : username } = person;
console.log(username); //Ethan

Обмен переменных с помощью деструктурирующих выражений

Обычно мы используем временную переменную для подкачки, как показано ниже (хотя для этого есть математическая формула и оператор XOR):

let a = 1;
let b = 2;
let temp;
temp = a;
a = b;
b = temp;

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

[a, b] = [b, a];

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

[a, b, c] = [b, c, a]

Вывод

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

Спасибо за чтение.