01. Destructing

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

Лексически, деструктуризация выполняется на присваивание (destructing assignment) — это особый синтаксис присваивания, при котором можно присвоить массив или объект сразу нескольким переменным, разбив его на части. Основная цель выражений деструктуризации - извлечь множество данных из какой-либо структуры данных за один заход.

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

• Destructing source - разбиваемая структура данных

• Destructing target - паттерн разбиения, формирующий несколько идентификаторов по которым доступны результаты разбиения.

  • Паттерн присваивания x

  • Паттерн объекта { first: «pattern», last: «pattern» }

  • Паттерн массива [ «pattern», «pattern» ] работает как и массивами, так и с любыми итерируемыми структурами.

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

• Объекты

• Массивы

• Строки (как массив символов)

• Генераторы (как массив последовательных значений, возвращаемых генератором)

• Коллекции (как массив последовательных значений, возвращаемых итератором)

Деструктуризация может находится:

• В любом месте где допустимо присваивание

• В параметрах функций

Usage

Пример паттерна деструктуризации объекта:

const obj = { foo: 123 };
const { foo } = obj;

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

let arr = ["a", "b"];
let [x, y] = arr;

Паттерны можно комбинировать и вкладывать друг в друга не ограниченно:

const obj = { a: [{ foo: 123, bar: "abc" }, {}], b: true };
const {
  a: [{ foo: f }]
} = obj; // f = 123

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

const [d, e] = "de";

Деконструкция в параметрах функций

const fn = ({ a, x, y }, [c, d]) => {
  return;
  a === 1 && x === 2 && c === 3 && d === 4 && y === undefined;
};

fn({ a: 1, x: 2 }, [3, 4]);

Деструктуризация при возвращении структуры из функции.

const [all, year, month, day] = /^(\d\d\d\d)-(\d\d)-(\d\d)$/.exec("2999-12-31");

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

const arr1 = ["a", "b"];
for (let [index, element] of arr1.entries()) {
  console.log(index, element);
}

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

const map = new Map([
  [false, "no"],
  [true, "yes"]
]);
for (const [key, value] of map) {
  console.log(key + " is " + value);
}

Деконструкция генераторов

const [a, b, c] = (function*() {
  yield 1;
  yield 2;
})();
const [d, e] = (function*() {
  yield 3;
  yield 4;
})();
return a === 1 && b === 2 && c === undefined && d === 3 && e === 4;