Деструктурирующее присваивание в 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

Чтобы выполнить вложенную деструктуризацию объекта, необходимо заключить переменные в фигурные скобки {}.

 

codechick

СodeСhick.io - простой и эффективный способ изучения программирования.

2024 ©