Деструктурирующее присваивание массива в ES6

Источник: «A brief introduction to array destructuring in ES6»
Деструктуризация в JavaScript — упрощённый метод извлечения нескольких свойств из массива путём взятия структуры и её деконструкции на отдельные составные части посредством присваивания с использованием синтаксиса, который похож на литералы массива.

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

Синтаксис с деструктуризацией массива:

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

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

let first = "laide",
second = "Gabriel",
third = "Jets";

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

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

let [1, 2, 3] = ["Laide", "Ola", "Jets"];

Деструктуризация сделала извлечение данных из массива простым и читаемым. Представьте, что вы пытаетесь извлечь данные из массива с пятью или шестью уровнями вложенности? Это было бы утомительно. Вы используете литерал массива в левой части присваивания.

let thing = ["Table", "Chair", "Fan"];
let [a, b, c] = thing;

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

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

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

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

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

let things = ["Table", "Chair", "Fan", "Rug"];
let [a, b, c, d, e] = things;
console.log(c); //Output: Fan
console.log(d); //Output: Rug
console.log(e); //Output: undefined

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

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

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

Деструктуризация может работать с функцией возвращающей массив. Это работает со всеми итераторами.

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

let [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

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

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

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

let [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

Остаточный параметр и "spread" синтаксис

Новый оператор ... добавленный в ES6 можно использовать при деструктуризации. Если оператор ... расположен в левой части при деструктуризации — это Остаточный параметр. Остаточный параметр используется для сопоставления всех оставшихся элементов в массиве, которые не были сопоставлены с самой остаточной переменной. Это похоже на сбор всего, что осталось. Остаточная переменная всегда должна быть последней, в противном случае выдаётся ошибка 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 синтаксис. Он берёт все элементы массива, которым не сопоставлена никакая переменная, с затем сопоставляет их с остаточной переменной.

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

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

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

let planets = ["Mercury", "Earth", "Venus", "Mars", "Pluto", "Saturn"];

let [first, second, ...rest] = ["Mercury", ...planets];

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

let planets = ["Mercury", "Earth", "Venus", "Mars", "Pluto", "Saturn"];

let [first, second, third, fourth ...rest] = ["Mercury", "Earth", ...planets];

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

Обмен или перестановка переменных

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

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

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

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

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

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

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

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

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

var places = ["first", "second", "third", "fourth"];
var [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, чтобы увидеть, как он выглядел бы без деструктуризации. Вы написали бы намного больше строк кода, но деструктуризация всё упрощает.

Дополнительные материалы

Предыдущая Статья

Объяснение JSON простым языком

Следующая Статья

HTML: Семь интересных атрибутов