Разрушение - это метод извлечения нескольких значений из данных, хранящихся в (возможно, вложенных) объектах и массивах. Он может быть использован в местах, которые получают данные или в качестве значения объектов. Мы рассмотрим несколько примеров использования деструктуризации:
Разрушение массива
Деструктуризация массива работает для всех повторяемых значений
const iterable = ['a', 'b'];
const [x, y] = iterable;
// x = 'a'; y = 'b'
Разрушение помогает при обработке возвращаемых значений
const [all, year, month, day] =
/^(\d\d\d\d)-(\d\d)-(\d\d)$/
.exec('2999-12-31');
Разрушение объекта
const obj = { first: 'Jane', last: 'Doe' };
const {first: f, last: l} = obj;
// f = 'Jane'; l = 'Doe'
// {prop} is short for {prop: prop}
const {first, last} = obj;
// first = 'Jane'; last = 'Doe'
Примеры использования Разрушение
// Variable declarations:
const [x] = ['a'];
let [x] = ['a'];
var [x] = ['a'];
// Assignments:
[x] = ['a'];
// Parameter definitions:
function f([x]) { ··· }
f(['a']);
// OR USE IT IN A FOR-OF loop
const arr = ['a', 'b'];
for (const [index, element] of arr.entries()) {
console.log(index, element);
}
// Output:
// 0 a
// 1 b
Шаблоны для разрушения
В любой деструктуре участвуют две стороны
- Источник деструктурирования: данные, подлежащие деструктурированию, например, справа от задания деструктуризации.
- Destructuring Target: шаблон, используемый для разрушения. Например, левая сторона задания по деструктуризации.
Целью уничтожения является один из трех паттернов:
- Цель назначения: обычно цель назначения - это переменная. Но в деструктивном задании у вас есть больше возможностей (например, х)
- Шаблон объекта: части шаблона объекта являются свойствами, значения свойств снова являются шаблонами (рекурсивно) (например, {first: «pattern», last: «pattern»})
- Шаблон Array: части шаблона Array являются элементами, элементы снова являются шаблонами (например, [«pattern», «pattern»])
Это означает, что вы можете вкладывать шаблоны произвольно глубоко:
const obj = { a: [{ foo: 123, bar: 'abc' }, {}], b: true };
const { a: [{foo: f}] } = obj; // f = 123
** Как шаблоны получают доступ к внутренностям значений? **
Шаблоны объектов приводят к разрушению источников до объектов до доступа к свойствам. Это означает, что он работает с примитивными значениями. Приведение к объекту выполняется с помощью ToObject (), который преобразует примитивные значения в объекты-обертки и оставляет объекты без изменений. Undefined или Null выдаст ошибку типа при обнаружении. Может использовать пустой шаблон объекта, чтобы проверить, является ли значение принудительным для объекта, как показано здесь:
({} = [true, false]); // OK, Arrays are coercible to objects
({} = 'abc'); // OK, strings are coercible to objects
({} = undefined); // TypeError
({} = null); // TypeError
Деструктуризация массива использует итератор для доступа к элементам источника. Таким образом, вы можете использовать Array-destructure для любого итеративного значения.
Примеры:
// Strings are iterable:
const [x,...y] = 'abc'; // x='a'; y=['b', 'c']
// set value indices
const [x,y] = new Set(['a', 'b']); // x='a'; y='b’;
Значение является итеративным, если у него есть метод, ключом которого является symbol.iterator, который возвращает объект. Деструктуризация массива генерирует ошибку TypeError, если значение, которое нужно деструктурировать, не повторяется
Пример:
let x;
[x] = [true, false]; // OK, Arrays are iterable
[x] = 'abc'; // OK, strings are iterable
[x] = { * [Symbol.iterator]() { yield 1 } }; // OK, iterable
[x] = {}; // TypeError, empty objects are not iterable
[x] = undefined; // TypeError, not iterable
[x] = null; // TypeError, not iterable
// TypeError is thrown even before accessing elements of the iterable which means you can use empty Array pattern [] to check if value is iterable
[] = {}; // TypeError, empty objects are not iterable
[] = undefined; // TypeError, not iterable
[] = null; // TypeError, not iterable
Можно установить значения по умолчанию
Значения по умолчанию могут быть установлены как запасной вариант
Пример: * 1 069 *
const [x=3, y] = []; // x = 3; y = undefined
Неопределенные значения триггеров по умолчанию