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