Советы по деструктуризации объектов JavaScript

В JavaScript мы получаем чрезвычайно полезный способ извлечения свойств из объектов.

Примечание: Деструктуризация также работает с массивами, но в данном случае давайте сосредоточимся на объектах.

Допустим, у нас есть объект user и мы хотим извлечь свойства отдельных переменных.

const user = {
  name: 'Chris',
  age: 33,
};

До появления ES2015 нам пришлось бы назначать эти переменные явным образом, как показано ниже:

var name = user.name;

Это все еще работает в современном JavaScript. Однако его можно оптимизировать.
Мы можем опустить двойное использование привязки свойств name и деструктурировать свойства следующим образом.

const { name, age } = user;

console.log(name);
// Chris

console.log(age);
// 33

Подождите, что?
Просто волшебство, верно? Нам не нужно дважды называть переменные и мы можем присваивать их непосредственно их переменным.

Деструктуризация и сохранение покоящегося объекта

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

Вы можете подумать, что нам нужно присвоить все оставшиеся свойства, но это можно сделать с помощью оператора spread.

const user = {
  name: 'Chris',
  age: 33,
  username: 'DailyDevTips',
};

const { name, ...rest } = user;

console.log(name);
// Chris

console.log(rest);
// { age: 33, username: 'DailyDevTips' }

Деструктуризация вложенных свойств объекта

Довольно часто ваш объект имеет несколько слоев.
С помощью деструктуризации мы также можем назначить вложенные свойства.

const user = {
  name: 'Chris',
  age: 33,
  username: 'DailyDevTips',
  address: {
    country: 'South Africa',
    postalCode: '7700',
  },
};

Возьмем вышеприведенный пример. Как мы можем извлечь страну за один раз?

const {
  address: { country },
} = user;

console.log(country);
// South Africa

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

В приведенном выше примере, если мы попытаемся записать в журнал address, он сообщит: ReferenceError: address is not defined.

Однако мы можем просто передать другую ссылку в деструктуризации следующим образом:

const {
  address: { country },
  address,
} = user;

console.log(address);
// { country: 'South Africa', postalCode: '7700' }

console.log(country);
// South Africa

Деструктуризация с другим именем

Возможно, вы хотите деструктурировать некоторые свойства под другим именем.

Возьмем пример выше и укажем, что мы хотим получить объект адреса с именем shippingAddress.

Мы можем использовать разделитель с запятой : для обращения к новому имени.

const { address: shippingAddress } = user;

console.log(shippingAddress);
// { country: 'South Africa', postalCode: '7700' }

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

Деструктуризация потенциально пустых значений

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

Возможно, некоторые пользователи решили не задавать его. В этом случае мы можем использовать значение по умолчанию.

Примечание: Это немного странно для свойства age, поэтому в качестве примера смотрите следующее

const user = {
  name: 'Chris',
  age: 33,
};

const { age } = user;

console.log(age);
// 33

Это работает отлично, но давайте посмотрим на пользователя, у которого нет свойства «возраст».

const user = {
  name: 'Yaatree',
};

const { age } = user;

console.log(age);
// undefined

Мы можем изменить его значение, если хотим установить возраст по умолчанию.

const { age = 25 } = user;

console.log(age);
// 25

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

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

const users = [
  {
    name: 'Chris',
    age: 33,
  },
  {
    name: 'Yaatree',
    age: 2,
  },
];

Мы можем перебирать эти элементы в цикле и деструктурировать их внутри цикла.

for (let { name, age } of users) {
  console.log(`User: ${name} is ${age} years old 🎉`);
}

// 'User: Chris is 33 years old 🎉'
// 'User: Yaatree is 2 years old 🎉'

Динамическая деструктуризация имен

Что происходит, когда мы знаем переменную, которую хотим деструктурировать, только во время выполнения?

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

Обработчик будет иметь следующее свойство.

const getProperty = 'name'; // or 'age'

// How do we get this from the user now?

Для этого мы можем использовать аннотацию с квадратными скобками.

const { [getProperty]: returnValue } = user;

console.log(returnValue);
// Chris

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

Допустим, у нас есть функция, которая возвращает объект.

const getProduct = () => {
  return {
    id: 1,
    name: 'Macbook',
  };
};

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

const product = getProduct();

console.log(product);
// { id: 1, name: 'Macbook' }

Однако нам нужен только id из этой функции. Можем ли мы сделать это?

const { id } = getProduct();

console.log(id);
// 1

Да, мы можем. Мы можем просто деструктурировать возвращаемое значение и присвоить ему нужное нам свойство.

Спасибо, что прочитали, и давайте общаться!

Спасибо, что читаете мой блог. Не стесняйтесь подписываться на мою рассылку по электронной почте и подключайтесь на Facebook или Twitter.