Деструктуризация массивов и объектов в JS
Деструктуризация - это новый синтаксис ES6, который помогает присваивать несколько значений из массива или объекта в переменные. Деструктуризация словно распаковывает массив значений и автоматически копирует их в переменные. Причем делает это с минимальным синтаксисом. И если посчитать сколько раз за скрипт осуществляется такое присваивание, то можно без преувеличения сказать, что количество кода уменьшается в несколько раз.
Как и все нововведения стандарта ES5, деструктуризация нацелена на минимизацию количества кода и делает его проще для восприятия.
Условие задачи
Например, у нас есть две переменных a и b. В переменной a хранится значение 1, в переменной b - значение 2. Мы хотим поменять местами значения у переменных, чтобы в переменную a записалось значение переменной b, а в переменную b - значение переменной a. Рассмотрим оба варианта решения данной задачи - до появления деструктуризации (ES5) и после (ES6).
Обмен значениями у переменных в ES5
Деструктуризация позволяет обмениваться значениями у переменных. Для решения такой задачи в стиле ES5, не обойтись без введения промежуточной переменной. Создадим временную переменную tmp и присвоим ей значение переменной a. Так мы спасем переменную a от затирания ее значения в процессе обмена.
let a = 1;
let b = 2;
// правильное решение
let tmp = a; // временная переменная
a = b; // обмен значениями
b = tmp; // присвоим сохраненное значение
// неправильное решение
a = b; // значение переменной a затрется
b = a; // значения обеих переменных будут одинаковые
Пример деструктуризации массива в ES6
Хоть это и работает, однако ES6 позволяет решить задачу намного проще! С левой стороны равенства вы видите деструктивное выражение, а с правой стороны массив и элементы этого массива попадут в соответствующие переменные по порядку, начиная с нулевого индекса. Согласитесь, что такая запись более изящная, чем предыдущая.
// записывает 1 = b[0], 2 = a[1]
[a, b] = [b, a];
Пример присваивания в ES5
Создадим массив users и извлечем из него данные. Для сравнения воспользуемся синтаксисом ES5. Согласитесь, что такой синтаксис не оптимальный, со множественными повторами.
const users = ['solaris', 'kit', 'superman'];
let solaris = users [0];
let kit = users [1];
let superman = users [2];
// результат в консоли
console.log(solaris, kit, superman); // solaris kit superman
Пример деструктивного присваивания в ES6
Благодаря деструктивному присваиванию, три строки кода могут быть заменены одной строкой. Количество кода сократилось в 4 раза.
// одна строка вместо четырех
let ['solaris', 'kit', 'superman'] = users;
console.log(solaris, kit, superman); // solaris kit superman
Пример деструктуризации объекта в ES6
У объекта person нужно сохранить значения firstName и lastName в отдельные переменные.
const person = {
firstName: "Anton",
lastName: "Petrov",
age: 25
};
До выхода спецификации ES6, это решалось вытаскиванием переменных по отдельности из объекта и наш код выглядел бы так:
const firstName = person.firstName;
const lastName = person.lastName;
При использовании синтаксиса деструктуризации, то же самое можно сделать намного лаконичнее. Перечислим только те переменные, которые хотим достать из объекта и после знака равно пишем название объекта person. Левая сторона в фигурных скобках - это шаблон, а правая сторона - объект person, из которого нужно вытащить переменные. В консоли мы увидим, что получили значения наших переменных действительно из объекта.
const {firstName, lastName} = person;
console.log(firstName, lastName); // Anton Petrov
Пример вложенной деструктуризации
Для извлечения вложенных свойств из объекта, мы можем использовать и более сложный шаблон с левой стороны.
const team = {
names: {
firstName_1: "Anton",
firstName_2: "Oleg",
},
number: 2
};
const {names: {first, last} } = team;
console.log(firstName_1, lastName_2); // Anton Oleg
Итоги
Деструктуризация позволяет лаконично доставать значения из массива или объекта и менять их местами, поддерживает вложенность и значения по умолчанию, работает с параметрами функций и поддерживает оператор rest.
Для тех, кто хочет изучать разработку на профессиональном уровне, представляю вашему вниманию видео-курс по JavaScript технологиям. Цель данного курса не слепо копировать за автором курса, а научить вас думать на JavaScript и писать лаконичный код.
-
Создано 02.09.2020 10:31:43
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.