Деструктуризация

Последнее обновление: 23.07.2021

Деструктуризация (destructuring) позволяет извлечь из объекта отдельные значения в переменные или константы:

let user = {
	name: "Tom",
	age: 24,
	phone: "+367438787",
	email: "tom@gmail.com"
};
let {name, email} = user;
console.log(name);		// Tom
console.log(email);		// tom@gmail.com

При деструктуризации объекта переменные помещаются в фигурные скобки и им присваивается объект. Сопоставление между свойствами объекта и переменными/константами идет по имени.

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

let user = {
	name: "Tom",
	age: 24,
	phone: "+367438787",
	email: "tom@gmail.com"
};
const {name: userName, email: mailAddress} = user;
console.log(userName);		// Tom
console.log(mailAddress);		// tom@gmail.com

В данном случае свойство name сопоставляется с переменной userName, а поле email - с переменной mailAddress.

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

let user = {
    name: "Tom",
    age: 24,
};
const {name  = "Sam", email: mailAddress = "sam@gmail.com"} = user;
console.log(name);      		// Tom
console.log(mailAddress);       // sam@gmail.com

Если переменная/константа при деструктуризации сопоставляется со свойством, который представляет сложный объект, то после деструктуризации эта переменная/константа также будет представлять сложный объект:

let user = {
    name: "Tom",
    age: 24,
	account: {
		login: "tom555",
		password: "qwerty"
	}
};
const {account} = user;
console.log(account.login);			// tom555
console.log(account.password);		// qwerty

Деструктуризация массивов

Также можно разложить массивы:

let users = ["Tom", "Sam", "Bob"];
let [a, b, c] = users;

console.log(a);		// Tom
console.log(b);		// Sam
console.log(c);		// Bob

При деструктуризации массива переменные помещаются в квадратные скобки и последовательно получают значения элементов массива.

Если переменных/констант меньше, чем элементов массива, то оставшиеся элементы массива просто опускаются.

let users = ["Tom", "Sam", "Bob"];
let [a, b] = users;
 
console.log(a);     // Tom
console.log(b);     // Sam

Если переменных/констант больше, чем элементов массива, то несопоставленные переменные/константы получают значение undefined:

let users = ["Tom", "Sam", "Bob"];
let [a, b, c, d] = users;
 
console.log(a);     // Tom
console.log(b);     // Sam
console.log(c);     // Bob
console.log(d);     // undefined

Получение оствшихся элементов массива в другой массив

С помощью оператора ... можно получить все оставшиеся элементы массива в виде другого массива:

let users = ["Tom", "Sam", "Bob", "Mike"];
let [tom, ...others] = users;
 
console.log(tom);		// Tom
console.log(others);	// ["Sam", "Bob", "Mike"]

Здесь массив others будет содержать три последних элемента массива.

Пропуск элементов

При этом мы можем пропустить ряд элементов массива, оставив вместо имен переменных пропуски:

let users = ["Tom", "Sam", "Bob", "Ann", "Alice", "Kate"];
let [first,,,,fifth] = users;

console.log(first);		// Tom
console.log(fifth);		// Alice

Выражение first,,,,fifth указывает, что мы хотим получить первый элемент массива в переменную first, затем пропустить три элемента и получить пятый элемент в переменную fifth.

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

let users = ["Tom", "Sam", "Bob", "Ann", "Alice", "Kate"];
let [,second,,forth] = users;

console.log(second);		// Sam
console.log(forth);			// Ann

Деструктуризация объектов из массивов

Можно совместить получение данных из массива и объекта:

let people = [
	{name: "Tom", age: 34},
	{name: "Bob", age: 23},
	{name: "Sam", age: 32}
];
let [,{name}] = people;

console.log(name);		// Bob

В данном случае получаем значение свойства name второго объекта в массиве.

Деструктуризация параметров

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

function display({name:userName, age:userAge}){
	console.log(userName, userAge);
}
function sum([a, b, c]){
	const result = a + b + c;
	console.log(result);
}
let user = {name:"Alice", age:33, email: "alice@gmail.com"};

let numbers = [3, 5, 7, 8];

display(user);	// Alice 33
sum(numbers);	// 15

Обмен значениями

Благодаря деструктуризации очень просто стало проводить обмен значениями между двумя переменными:

let first = "Tom";
let second = "Bob";
[first, second] = [second, first];
 
console.log(first);		// Bob
console.log(second);	// Tom

Что упрощает решение ряда задач. Например, используем деструктуризацию для простейшей сортировки массива:

let nums = [9, 3, 5, 2, 1, 4, 8, 6];
for(let i = 0; i < nums.length; i++)
	for(let j = 0; j < nums.length; j++)
		if (nums[i] < nums[j]) [nums[j], nums[i]] = [nums[i], nums[j]];
		
console.log(nums);	// [1, 2, 3, 4, 5, 6, 8, 9]
Помощь сайту
WebMoney
  • P378451176208
  • Z280152397659
ЮMoney/Яндекс-Деньги
  • 410011174743222
PayPal
  • metanit22@mail.ru
Перевод на карту
  • Номер карты: 4048415020898850