Назначение деструктурирования JavaScript

Автор оригинала: Guest Contributor.

Вступление

Если вы хотите выбрать элементы из массива или объекта до обновления ES2015 к JavaScript, вам придется индивидуально выбирать их или использовать цикл.

Спецификация ES2015 представила Разрушение задания , более бывший способ получить элементы массива или свойства объекта в переменные.

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

Разрушивание массива

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

let myArray = [1, 2, 3];
let first = myArray[0];
let second = myArray[1];
let third = myArray[2];

Поскольку основное обновление ES2015 до JavaScript, теперь мы можем сделать эту же задачу, как это:

let myArray = [1, 2, 3];
let [first, second, third] = myArray;

Второе, короче пример использовали синтаксис разрушительств JavaScript на Myarray Отказ Когда мы разрушаем массив, мы копируем значения его элементов в переменные. Синтаксис разрушения массива просто похоже на регулярное изменяемое синтаксис назначения ( пусть; ). Разница в том, что левая сторона состоит из одной или нескольких переменных в массиве Отказ

Приведенный выше код создал три новых переменных: Первый , Второй и Третий Отказ Он также назначил значения тем переменным: Первый равно 1, Второй равно 2, а Третий равно 3.

С помощью этого синтаксиса JavaScript видит, что Первый и 1 имеют тот же индекс в своих соответствующих массивах, 0. Переменные назначаются значения, соответствующие их порядку. До тех пор, пока расположение совпадает между левой и правой стороной, задание деструктуризации будет сделано соответственно.

Разрушение синтаксиса также работает с объектами, давайте посмотрим, как.

Разрушение объекта

Перед доступен синтаксис разрушимости, если мы хотели хранить свойства объекта в разные переменные, мы бы написали код так:

const foobar = {
    foo: "hello",
    bar: "world"
};

const foo = foobar.foo;
const bar = foobar.bar;

С деструктурирующим синтаксисом мы теперь можем быстро сделать то же самое с меньшими строками кода:

const foobar = {
    foo: "hello",
    bar: "world"
};

const { foo, bar } = foobar;

Хотя предметы массива разрушаются через их положение, свойства объекта разрушаются их ключевым именем. В приведенном выше примере, после объявления объекта foobar Затем мы создаем две переменные: Foo и бар Отказ Каждая переменная присваивается значение свойства объекта с тем же именем. Поэтому Foo это «привет» и бар это «мир».

Примечание : Разрушение задания работает, заявляете ли вы переменную с var , Пусть или Const Отказ

Если вы предпочитаете дать другое имя переменной во время разрушения объекта, мы можем внести небольшую регулировку на наш код:

const foobar = {
    foo: "hello",
    bar: "world"
};

const { foo: baz, bar } = foobar;
console.log(baz, bar); // hello world

С толстой кишкой мы можем сопоставить свойство объекта и дать созданную переменную новое имя. Приведенный выше код не создает переменную Foo Отказ Если вы попытаетесь использовать Foo Вы получите Собственный ресурс Указывает на то, что он не был определен.

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

Значения по умолчанию в разрушенных переменных

Что произойдет, если мы попытаемся разрушать больше переменных, чем количество элементов массива или объектных свойств? Давайте посмотрим с быстрым примером:

let [alpha1, alpha2, alpha3] = ['a', 'b'];

console.log(alpha1, alpha2, alpha3);

Наш выход будет:

a b undefined

Неопределенные переменные установлены на undefined Отказ Если мы хотим избежать наших разрушенных переменных от того, чтобы быть undefined мы можем дать им значение по умолчанию Отказ Давайте повторно использовать предыдущий пример, и по умолчанию Альфа3 к ‘C’:

let [alpha1, alpha2, alpha3 = 'c'] = ['a', 'b'];

console.log(alpha1, alpha2, alpha3);

Если мы запустим это в Узел Или браузер, мы увидим следующий вывод в консоли:

a b c

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

Давайте подтвердим, что в следующем примере, что устанавливает значение по умолчанию на объекте:

const { prime1 = 1, prime2 } = { prime1: 2, prime2: 3 };

console.log(prime1, prime2);

В приведенном выше примере мы по умолчанию Prime1 до 1. Следует перезаписать 2, так как есть Prime1 Свойство на объекте в правой части назначения. Запуск этого производит:

2 3

Большой! Мы подтвердили, что значения по умолчанию перезаписываются, когда есть совпадение. Это также хорошо, потому что первое простое число действительно 2, а не 1.

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

Захватывание неназначенных записей в разрушенном назначении

Иногда мы хотим выбрать несколько записей из массива или объекта и захватить оставшиеся значения, которые мы не помещали в отдельные переменные. Мы можем сделать только это с ... оператор.

Давайте разместим первый элемент массива в новую переменную, но сохраняйте другие элементы в новом массиве:

const [favoriteSnack, ...fruits] = ['chocolate', 'apple', 'banana', 'mango'];

В приведенном выше коде мы устанавливаем FaverfiteNack «шоколад». Потому что мы использовали ... Оператор, Фрукты равно оставшимся предметам массива, что является [«Apple», «Банан», «Манго»] Отказ

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

Как вы можете подозревать, мы можем использовать элемент покоя в объектах, а также:

const { id, ...person } = {
    name: 'Tracy',
    age: 24,
    id: 1020212,
};

Мы извлекаем ID Свойство объекта на правой стороне деструктурирующего назначения в собственную переменную. Затем мы поместим оставшиеся свойства объекта в человек Переменная. В этом случае ID будет равен 1020212 и человек будет равен {Название: «Трейси», Возраст: 24} Отказ

Теперь, когда мы видели, как сохранить все данные, давайте посмотрим, насколько гибко распределение деструктуризации, когда мы хотим опустить данные.

Выборочные значения в деструктурирующем назначении

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

const [name] = ['Katrin', 'Judy', 'Eva'];
const { nyc: city } = { nyc: 'New York City', ldn: 'London' };

Мы присваивали Имя «Катрин» из массива и Город к «Нью-Йорку» от объекта. С объектами, потому что мы подходим ключевым имена, это тривиально выбрать конкретные свойства, которые мы хотим в переменных. В приведенном выше примере, как мы могли бы запечатлеть «Катрин» и «Ева» без необходимости взять «Джуди»?

Разрушив синтаксис позволяет нам ставить дыры Для значений мы не заинтересованы. Давайте использовать дыру для захвата ‘Katrin’ и ‘Eva’ в одном Go:

const [name1, , name2] = ['Katrin', 'Judy', 'Eva'];

Обратите внимание на пробел в переменном назначении между Имя1 и Имя2 Отказ

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

Разрушение вложенных значений

Мы можем распоряжаться разрядными переменными, чтобы соответствовать вложенным записям массива и объекта, давая нам мелкозернистый контроль над тем, что мы выбираем. Рассмотреть возможность наличия массивов. Давайте скопируем первый элемент каждого внутреннего массива в свою собственную переменную:

let [[part1], [part2], [part3], [part4]] = [['fee', 'mee'], ['fi', 'li'], ['fo', 'ko'], ['fum', 'plum']];

console.log(part1, part2, part3, part4);

Запуск этого кода отобразится следующий выход:

fee fi fo fum

Просто упаковая каждую переменную в левой стороне с [] JavaScript знает, что мы хотим значение в массиве, а не сам массив.

Когда мы разрушаем вложенные объекты, мы должны сопоставить ключ вложенного объекта, чтобы получить его. Например, давайте попробуем захватить некоторые детали заключенного в JavaScript:

const {
    name,
    crimes: {
        yearsToServe
    }
} = {
    name: 'John Doe',
    crimes: {
        charged: ['grand theft auto', 'stealing candy from a baby'],
        yearsToServe: 25
    }
};

console.log(yearsToServe);

Чтобы получить Годность Собственность, нам сначала нужно соответствовать вложенным преступления объект. В этом случае правая сторона имеет Годность Собственность преступления Объект, установленный на 25. Следовательно, наше Годность Переменная будет присвоена значение 25.

Обратите внимание, что мы не создали преступления объект в приведенном выше примере. Мы создали две переменные: Имя и Годность Отказ Несмотря на то, что мы должны сопоставить вложенную структуру, JavaScript не создает промежуточные объекты.

До сих пор вы сделали отлично в покрытии много разрушенных возможностей синтаксиса. Давайте посмотрим на некоторое практическое использование для этого!

Используйте случаи для деструктивных массивов и объектов

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

Для петлей

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

const greetings = { en: 'hi', es: 'hola', fr: 'bonjour' };

for (const [key, value] of Object.entries(greetings)) {
    console.log(`${key}: ${value}`);
}

Во-первых, мы создаем Привет Переменная, которая хранит как сказать «Привет» на разных языках. Затем мы зацикливаемся через значения объекта, используя Object.entries () Метод, который создает вложенный массив. Каждое свойство объекта представлено 2-мерным массивом с первым элементом, являющимся ключом, а второй элемент – его значение. В этом случае Object.entries () Создает следующий массив [['en', 'hi'], ['es', 'hola'], ['fr', 'Bonjour']] Отказ

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

en: hi
es: hola
fr: bonjour

Подменные переменные

Мы можем использовать синтаксис разрушимости, чтобы переменные переменные без временной переменной. Допустим, вы на работе и сделаете перерыв. Вы хотели чая, в то время как ваш коллектор хотел кофе. К сожалению, напитки смешались. Если это было в JavaScript, вы можете легко поменять напитки, используя синтаксис разрушимости:

let myCup = 'coffee';
let coworkerCup = 'tea';
[myCup, coworkerCup] = [coworkerCup, myCup];

Сейчас Mycup имеет «чай» и Coworkercup имеет «кофе». Обратите внимание, как у нас не было Пусть , Const или var При использовании деструктурирующего назначения. Как мы не объявляем новые переменные, нам нужно пропустить эти ключевые слова.

Заключение

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

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

Мы предоставили пару нефте-мест для использования деструктурирующего назначения. Где вы будете использовать их дальше?