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

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

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

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, чтобы увидеть, как он выглядел бы без деструктуризации. Вы написали бы намного больше строк кода, но деструктуризация всё упрощает.