Деструктурирующее присваивание в JS
В этой статье вы познакомитесь с синтаксисом деструктурирующего присваивания в выражениях JavaScript.
Деструктурирующее присваивание позволяет извлекать данные из массивов или объектов при помощи синтаксиса, подобного объявлению массива или объекта. Эта возможность появилась в версии ES6.
Без деструктурирующего присваивания (до ES6)
// присваиваем свойства объекта переменным
const person = {
name: 'Маша',
age: 25,
gender: 'Ж'
}
let name = person.name;
let age = person.age;
let gender = person.gender;
console.log(name); // Вывод: Маша
console.log(age); // Вывод: 25
console.log(gender); // Вывод: Ж
С деструктурирующим присваиванием (после ES6)
// присваиваем свойства объектам переменным
const person = {
name: 'Маша',
age: 25,
gender: 'Ж'
}
// деструктурирующее присваивание
let { name, age, gender } = person;
console.log(name); // Вывод: Маша
console.log(age); // Вывод: 25
console.log(gender); // Вывод: Ж
Примечание. Порядок переименных при деструктуризации объекта неважен.
Например, вы можете переписать деструктуризацию так:
let { age, gender, name } = person;
console.log(name); // Вывод: Sara
Примечание. При деструктуризации объектов имена переменных должны совпадать с соответсвующими ключами объекта.
Если имена отличаются, значение из объекта не передастся в переменную:
let {name1, age, gender} = person;
console.log(name1); // Вывод: undefined
Если вам нужны другие имена для переменных, отличные от ключей объекта, можно переименовать переменные таким образом:
const person = {
name: 'Маша',
age: 25,
gender: 'Ж'
}
// деструктурирующее присваивание
// используем другие имена для переменных
let { name: name1, age: age1, gender:gender1 } = person;
console.log(name1); // Вывод: Маша
console.log(age1); // Вывод: 25
console.log(gender1); // Вывод: Ж
Деструктуризация массива
Аналогично можно выполнить деструктуризацию массива.
const arrValue = ['один', 'два', 'три'];
// используем деструктурирующее присваивание с массивом
const [x, y, z] = arrValue;
console.log(x); // Вывод: один
console.log(y); // Вывод: два
console.log(z); // Вывод: три
Значения по умолчанию при деструктуризации
При использовании деструктуризации можно присваивать переменным значения по умолчанию.
let arrValue = [10];
// значения по умолчанию: 5 и 7
let [x = 5, y = 7] = arrValue;
console.log(x); // Вывод: 10
console.log(y); // Вывод: 7
В массиве arrValue
одно значение — 10. Это значение присвоится первой перменной — x
. Для второй переменной y
в массиве нет значений, поэтому будет использовано значени по умолчанию — 7.
При деструктуризации объекта вы можете передавать значения по умолчанию аналогичным образом. Например:
const person = {
name: 'Андрей',
}
// значение по умолчанию для age — 26
const { name, age = 26} = person;
console.log(name); // Вывод: Андрей
console.log(age); // Вывод: 26
Обмен значений переменных с помощью деструктуризации
Дестркуктурирующее присваивание можно использовать, чтобы обменять значения двух переменных. Например:
let x = 4;
let y = 7;
// обмен значений переменных
[x, y] = [y, x];
console.log(x); // Вывод: 7
console.log(y); // Вывод: 4
Пропуск элементов при деструктуризации
Ненужные элементы в массиве можно пропускать и не присваивать их локальным переменным. Например:
const arrValue = ['один', 'два', 'три'];
// переменная для значения 'два' пропущена
const [x, , z] = arrValue;
console.log(x); // Вывод: один
console.log(z); // Вывод: два
Как вы видите, второй элемент опущен с помощью разделителя-запятой ,
.
Присваивание оставшихся элементов в одну переменную
Вы можете присвоить оставшиеся элементы массива переменной с помощью синтаксиса spread ...
. Например:
const arrValue = ['один', 'два', 'три', 'четыре'];
// присваиваем оставшиеся элементы переменной y
const [x, ...y] = arrValue;
console.log(x); // Вывод: один
console.log(y); // Вывод: ["два", "три", "четыре"]
Как вы видите, элемент один
присваивается переменной x
. А остальные элементы массива присваиваются переменной y
.
Точно так же можно присвоить остальные свойства объекта одной переменной. Например:
const person = {
name: 'Маша',
age: 25,
gender: 'Ж'
}
// присваиваем остальные свойства переменной rest
let { name, ...rest } = person;
console.log(name); // Вывод: Маша
console.log(rest); // Вывод: {age: 25, gender: "Ж"}
Примечание. Переменная, в которую будут записаны оставшиеся элементы при деструктуризации, должна быть записана последней.
Если записать переменную с синтаксисом spread первой, JavaScript сообщит об ошибке:
const arrValue = ['один', 'два', 'три', 'четыре'];
// такая запись вызовет ошибку
const [ ...x, y] = arrValue;
console.log(x); // Ошибка
Вложенное деструктурирующее присваивание
Вы можете выполнять вложенную деструктуризацию массива. Например, так:
// вложенные массивы
const arrValue = ['один', ['два', 'три']];
// вложенная деструктуризация
const [x, [y, z]] = arrValue;
console.log(x); // Вывод: один
console.log(y); // Вывод: два
console.log(z); // Вывод: три
Как вы видите, переменным y
и z
присваиваются вложенные элементы два
и три
.
Чтобы выполнить вложенную деструктуризацию, необходимо заключить переменные в квадратные скобки []
.
Вложенную деструктуризацию можно выполнять и для свойств объекта. Например, так:
const person = {
name: 'Андрей',
age: 26,
hobbies: {
read: true,
playGame: true
}
}
// вложенная деструктуризация
const {name, hobbies: {read, playGame}} = person;
console.log(name); // Вывод: Андрей
console.log(read); // Вывод: true
console.log(playGame); // Вывод: true
Чтобы выполнить вложенную деструктуризацию объекта, необходимо заключить переменные в фигурные скобки {}
.