Введение в деструктуризацию массивов в ES6

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

Посмотрите приведенный далее фрагмент кода.

const [first, second, third] = ["Laide", "Gabriel", "Jets"];

Синтаксис с деструктуризацией.

const first = "Laide",
      second = "Gabriel",
      third = "Jets";

Синтаксис без деструктуризации.

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

Это выражение вызовет ошибку синтаксиса:

const [1, 2, 3] = ["Laide", "Gabriel", "Jets"];

Деструктуризация сделала извлечение данных из массива простым и удобным для чтения. Представьте себе попытку извлечь данные из вложенного массива с 5 или 6 уровнями. Это было бы очень утомительно. Используя литерал массива в левой части присваивания.

const householdItems = ["Table", "Chair", "Fan"];
const [a, b, c] = householdItems;

Он берет каждую переменную в литерале массива с левой стороны и сопоставляет ее с тем же элементом с тем же индексом в массиве.

console.log(a); // Output: Table
console.log(b); // Output: Chair
console.log(c); // Output: Fan

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

let first, second;
[first, second] = ["Male", "Female"];

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

const householdItems = ["Table", "Chair", "Fan", "Rug"];
const [a, b, c, d, e] = householdItems;

console.log(c); // Output: Fan
console.log(d); // Output: Rug
console.log(e); // Output: undefined

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

const householdItems = ["Table", "Chair", "Fan", "Rug"];
const [a, b, c] = householdItems;
console.log(c); // Output: Fan

Деструктуризация возвращаемых массивов

Деструктуризация делает работу с функцией, возвращающей массив в качестве значения, более точной. Это работает для всех итерируемых массивов.

function runners() {
  return ["Sandra", "Ola", "Chi"];
}

const [a, b, c] = runners();

console.log(a); // Output: Sandra
console.log(b); // Output: Ola
console.log(c); // Output: Chi

Значение по умолчанию

Деструктуризация позволяет присвоить переменной значение по умолчанию, если ей не передано значение или она undefined. Это похоже на предоставление запасного варианта, когда ничего не найдено.

let a, b;
[a = 40, b = 4] = [];
console.log(a); // Output: 40
console.log(b); // Output: 4

[a = 40, b = 4] = [1, 23];
console.log(a); // Output: 1
console.log(b); // Output: 23

Значения по умолчанию могут ссылаться и на другие переменные, в том числе на переменную в том же литерале массива.

const [first = "Cotlin", second = first] = [];
console.log(first); // Output: Cotlin
console.log(second); // Output: Cotlin

const [first = "Cotlin", second = first] = ["Koku"];
console.log(first); // Output: Koku
console.log(second); // Output: Koku

const [first = "Cotlin", second = first] = ["Koku", "Lydia"];
console.log(first); // Output: Koku
console.log(second); // Output: Lydia

Игнорирование некоторых значений

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

let a, b;
[a, , b] = ["Lordy", "Crown", "Roses"];

console.log(a); // Output: Lordy
console.log(b); // Output: Roses

Параметр Rest и синтаксис Spread

Новый оператор (...), добавленный в ES6, может быть использован в деструктуризации. Если оператор (...) появляется в левой части деструктуризации, то это Rest-параметр. Параметр Rest используется для сопоставления всех оставшихся элементов массива, которые не были сопоставлены, самой переменной Rest. Это похоже на сбор того, что осталось за пределами массива. Переменная Rest всегда должна быть последней, иначе будет выброшена SyntaxError.

let planets = ["Mercury", "Earth", "Venus", "Mars", "Pluto", "Saturn"];
let [first, , third, ...others] = planets;

console.log(first); //Output: Mercury
console.log(third); //Output: Venus
console.log(others); //Output: ["Mars", "Pluto", "Saturn"]

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

const otherPlanets = ["Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune"];
const [first, second, ...rest] = ["Mercury", "Venus", ...otherPlanets];

console.log(first); // Output: Mercury
console.log(second); // Output: Venus
console.log(rest); // Output: ["Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune"]

При наличии большего количества переменных в левой части, он сопоставляет отдельные элементы массива с переменными в равной степени.

const planets = ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune"];

const [first, second, ...rest] = ["Sun", ...planets];

console.log(first); // Output: Sun
console.log(second); // Output: Mercury
console.log(rest); // Output: ["Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune"]

Чередование или перестановка переменных

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

let a, b;
[a, b] = ["Male", "Female"];
[a, b] = [b, a];

console.log(a); // Output: Female
console.log(b); // Output: Male

Деструктуризация вложенных массивов

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

const numbers = [8, [1, 2, 3], 10, 12];
const [a, [d, e, f]] = numbers;

console.log(a); // Output: 8
console.log(d); // Output: 1
console.log(e); // Output: 2

Множественная деструктуризация массива

Вы можете деструктурировать массив более одного раза в одном и том же фрагменте кода.

const places = ["first", "second", "third", "fourth"];
const [a, b, , d] = [f, ...rest] = places;

console.log(a); // Output: first
console.log(d); // Output: fourth
console.log(f); // Output: first
console.log(rest); // Output: ["second", "third", "fourth"]

Заключение

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