Деструктуризация объектов JavaScript была введена с обновлением ES6, чтобы помочь разработчикам извлекать сразу несколько свойств из объектов. Это было революционно, поскольку объекты широко используются в JavaScript в качестве сложной структуры данных.
В JavaScript существует множество техник деструктуризации объектов. Как разработчики, мы должны понимать эти техники, чтобы писать чистый код и повышать свою эффективность.
В этой статье мы рассмотрим семь основных методов деструктуризации объектов JavaScript, чтобы дать вам лучшее понимание того, как и когда их следует использовать.
- Что такое деструктуризация объектов JavaScript?
- 1. Деструктуризация вложенных объектов
- 2. Деструктуризация аргументов функций
- 3. Деструктуризация со значениями по умолчанию
- 4. Деструктуризация нулевых объектов
- 5. Использование параметра rest
- 6. Назначение динамических ключей объектов
- 7. Комбинированная деструктуризация объектов и массивов
- Заключение
- Похожие блоги
Что такое деструктуризация объектов 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
Параметр rest (…) позволяет функциям принимать неограниченное количество аргументов в виде массива.
function myFunction(a, b, ...theArgs) {
// ...
}
Параметр rest можно использовать и при деструктуризации объектов. Если у объекта много свойств, мы можем присвоить переменным основные значения, а все остальные значения распаковать в другой объект с помощью параметра 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. Назначение динамических ключей объектов
Во всех предыдущих примерах ключи объектов были фиксированными. Так можно ли использовать деструктуризацию объекта, если ключи объекта динамические? Да. Мы можем динамически назначать ключи объектов при деструктуризации.
Например, предположим, что у вас есть объект users, как показано ниже, и вам нужно динамически извлечь обозначение на основе имени пользователя.
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 высокопроизводительных, легких, модульных и отзывчивых компонентов пользовательского интерфейса в одном пакете. Загрузите бесплатную пробную версию, чтобы оценить элементы управления уже сегодня.
Если у вас есть вопросы или комментарии, вы также можете связаться с нами через наши форумы поддержки, портал поддержки или портал обратной связи. Мы всегда рады помочь вам!
Похожие блоги
- Что нового в 2022 году Том 2: Essential JS 2
- Использование паттернов проектирования в JavaScript — окончательное руководство
- Чистые и нечистые функции в JavaScript: Полное руководство
- Представление проверки лицензионных ключей для платформ Essential JS 2