Краткое введение в разрушение массива в ES6

Автор оригинала: FreeCodeCamp Community Member.

Kevwe Ochuko

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

Это создает шаблон, который описывает тип ценности, которое вы ожидаете и делают задание. Разрушение массива использует позицию.

Смотрите ниже фрагмент кода.

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

Синтаксис с разрушением.

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

Синтаксис без разрушения.

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

Этот синтаксис бросает ошибку.

Разрушение сделал извлечение данных из массива очень простым и читаемым. Представьте себе, пытаясь извлечь данные из вложенного массива с 5 или 6 уровнями. Это было бы очень утомительно. Вы используете литерал массива на левой стороне назначения.

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

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

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

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

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

Если количество переменных, передаваемых на литералы по деструктурирующимся литералам, – это больше, чем элементы в массиве, то переменные, которые не отображаются с любым элементом в Array Repeate undefined Отказ

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

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

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

Разрушивание возвращенных массивов

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

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

var [a, b, c] = runners();
console.log(a); //Output: Sandra
console.log(b); //Output: Ola
console.log(c); //Output: Chi

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

Разрушивание позволяет назначить значение по умолчанию для переменной, если нет значения или неопределенный передается. Это все равно что обеспечить отступление, когда ничего не найдено.

var 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

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

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

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

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

Игнорируя некоторые значения

Разрушение позволяет отображать переменную к элементам, которые вас интересуют. Вы можете игнорировать или пропустить другие элементы в массиве, используя Training Commas.

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

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

Параметр отдыха и распространение синтаксиса

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

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

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

Если оператор (…) появляется в правой руке в разрушительности, то это Распространение синтаксиса . Это Принимает все другие элементы в массиве, которые не имеют переменных с ними, а затем отображает его в переменную остальных.

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

var [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"]

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

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

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

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

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

var [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"]

Переменные или обмен переменными

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

var 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"]

Заключение

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

Оригинал: “https://www.freecodecamp.org/news/array-destructuring-in-es6-30e398f21d10/”