7 лучших методов деструктуризации объектов JavaScript

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

В JavaScript доступно несколько методов деструктуризации объектов. Как разработчики, мы должны понимать эти методы, чтобы писать чистый код и повышать свою эффективность.

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

Что такое деструктуризация объекта JavaScript?

Деструктуризация объектов — это процесс одновременного извлечения нескольких свойств или элементов из объектов. Этот метод действительно полезен при доступе к свойствам объекта в JavaScript.

Например, предположим, что у вас есть объект с именем article с несколькими свойствами, как в следующем примере кода:

let article = { 
  id: '001', 
  title: 'JavaScript Object Destructuring', 
  writer: 'Chameera'
};

Без реструктуризации объекта вам придется извлекать свойства следующим образом:

let id = article.id; 
let title = article.title;
let writer = article.writer;

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

let { id, title, writer } = article;

console.log(id); // 001
console.log(title); // JavaScript Object Destructuring
console.log(writer); // Chameera

Здесь свойства объекта назначаются articleId, articleName и writerName соответственно. Если переменные имеют то же имя, что и свойства объекта, вы можете написать код более лаконично следующим образом:

let { id, title, writer } = article;

console.log(id); // 001
console.log(title); // JavaScript Object Destructuring
console.log(writer); // Chameera

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

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

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

let article = { 
  id: '001', 
  title: 'JavaScript Object Destructuring', 
  writer: {
    name: 'Chameera'
  }
};

console.log(article.writer.name) // Chameera

Однако деструктуризация объектов позволяет извлекать вложенные свойства без непосредственного использования множественных назначений деструктуризации.

let article = { 
  id: '001', 
  title: 'JavaScript Object Destructuring', 
  writer: {
    name: 'Chameera'
  }
};

let { 
  id: articleId, 
  title: articleTitle, 
  writer: { 
    name: writerName 
  } 
} = article;

console.log(articleId); // 001
console.log(articleTitle); // JavaScript Object Destructuring
console.log(writerName); // Chameera

2. Деструктуризация аргументов функции

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

let article = { 
  title: 'JavaScript Object Destructuring',
  writer: 'Chameera'
};

let displayDetails = (article) = > {
  console.log(article.title); // JavaScript Object Destructuringconsole.log(article.writer); // Chameera
};

displayDetails(article);

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

let article = { 
  title: 'JavaScript Object Destructuring',
  writer: 'Chameera'
};

let displayDetails = ({title, writer}) = > {
  console.log(title); // JavaScript Object Destructuring
  console.log(writer); // Chameera
};

displayDetails(article);

3. Деструктуризация со значениями по умолчанию

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

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

let article = { 
  title: 'JavaScript Object Destructuring',
  writer: 'Chameera'
};

let { title, subtitle = 'No Sub Title', writer} = article;

console.log(title); // JavaScript Object Destructuring
console.log(subtitle); // No Sub Title
console.log(writer); // Chameera

let article = { 
  title: 'JavaScript Object Destructuring',
  subtitle: 'Top 7 JavaScript Object Destructuring Techniques',
  writer: 'Chameera'
};

let { title, subtitle = 'No Sub Title' writer} = article;

console.log(title); // JavaScript Object Destructuring
console.log(subtitle); // Top 7 JavaScript Object Destructuring Techniques
console.log(writer); // Chameera

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

В JavaScript принято возвращать объекты из функций, и разработчики напрямую извлекают свойства возвращаемого объекта, используя деструктурирование объекта.

function getArticle() {
   
  let article = { 
    title: 'JavaScript Object Destructuring',
    subtitle: 'Top 7 JavaScript Object Destructuring Techniques'
  };

  return article.
}

let { title, subtitle} = getArticle();

Однако могут быть сценарии, в которых возвращаемый объект имеет значение null. В таких ситуациях нам нужно изменить оператор деструктуризации объекта для обработки пустых объектов. В противном случае приложение выдаст ошибку TypeError.

function getArticle() {
  return null.
}

let { title, subtitle} = getArticle(); // Type Error
let { title, subtitle} = getArticle() || {}; // No Error

5. Использование остальных параметров

Параметр rest (…) позволяет функциям принимать неопределенное количество аргументов в виде массива.

function myFunction(a, b, ...theArgs) {
  // ...
}

Мы также можем использовать этот остаточный параметр при деструктуризации объекта. Если в объекте много свойств, мы можем присвоить существенные значения переменным и распаковать все остальные значения в другой объект, используя параметр rest.

let languages = {
  language1 : 'Java', 
  language2 : 'JavaScript', 
  language3 : 'C', 
  language4 : 'Python', 
  language5 : 'C#', 
  language6 : 'C++', 
  language7 : 'Ruby'
};

let { language1, language2, ...otherLanguages } = languages;

console.log(language1); // Java
console.log(language2); // JavaScript
console.log(otherLanguages) ;
/* 
{ "language3": "C","language4" : "Python","language5": "C#","language6": "C++",
  "language7": "Ruby"
} */

6. Назначение ключей динамических объектов

Во всех предыдущих примерах ключи объектов были фиксированными. Итак, можем ли мы использовать деструктуризацию объекта, если ключи объекта являются динамическими? Да. Мы можем динамически назначать ключи объекта при деструктурировании.

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

let users = {
  Paul: 'Software Engineer',
  Mike: 'Senior Software Engineer',
  George: 'Team Lead',
  ... 
};

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

let users = {
  Paul: 'Software Engineer',
  Mike: 'Senior Software Engineer',
  George: 'Team Lead',
  ... 
};

let userKey = 'Mike';
let { [userKey] : selectedUser } = users;

console.log(selectedUser); // Senior Software Engineer

Аналогичным образом вы можете изменить значение переменной userKey и динамически получать сведения о пользователе.

7. Комбинированная деструктуризация объекта и массива

JavaScript поддерживает деструктурирование как объектов, так и массивов. Если у вас есть массив с несколькими объектами внутри, вы можете объединить возможности деструктуризации объектов и массивов, чтобы легко извлечь вложенные объекты и их свойства.

let languages = [
  { id: 1, name: 'Java' }, 
  { id: 2, name: 'JavaScript' },
  { id: 3, name: 'C' }, 
  { id: 4, name: 'Python' },
  { id: 5, name: 'C#' },
  { id: 6, name: 'C++' },
  { id: 7, name: 'Ruby' }
];

let [, , , { name }, , , ] = languages;

console.log(name) //Python

Как видите, я использовал запятые, чтобы пропустить объекты массива. Это функция деструктуризации массива JavaScript. Вы можете использовать запятые, чтобы пропустить элементы массива и получить только необходимые элементы.

Заключение

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

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

Я надеюсь, что вы нашли эту статью полезной. Спасибо за чтение.

Syncfusion Essential JS 2 — единственный пакет, который вам когда-либо понадобится для создания приложения. Он содержит более 65 высокопроизводительных, легких, модульных и адаптивных компонентов пользовательского интерфейса в одном пакете. Загрузите бесплатную пробную версию, чтобы оценить элементы управления сегодня.

Если у вас есть какие-либо вопросы или комментарии, вы также можете связаться с нами через наши форумы поддержки, портал поддержки или портал обратной связи. Мы всегда рады Вам помочь!

Связанные блоги

Первоначально опубликовано на https://www.syncfusion.com 8 августа 2022 г.