В своей повседневной работе в качестве разработчика Javascript вы будете использовать множество объектов, и вам понадобятся помощники в вашем наборе инструментов, чтобы выжить.
Есть много библиотек, которые сделают это за вас (наиболее популярны Lodash и Underscore), но начиная с ES6 без них действительно легко обойтись.
Вы также найдете некоторую кодовую базу с некоторыми правилами ESlint для ограничения такого рода библиотек, поэтому всегда полезно знать нативный способ.
🌱 Объявить новый объект
Вот простой способ объявить новый пустой объект:
// Using the object literal const receipt = {}; // Using the Object constructor const receipt = new Object();
Конечно, вы можете определить некоторые свойства при создании объекта:
// Using the object literal const receipt = { icon: '🍪', name: 'Cookie', }; // Using the Object constructor const receipt = new Object({ icon: '🍪', name: 'Cookie', });
Вы можете использовать оба, у вас будет тот же результат. Со своей стороны, я использую литеральное объявление объекта большую часть времени.
🌾 Дублировать объект
Иногда вам нужно дублировать существующий объект. Это позволит вам обновить объект, не изменяя первый. Это обычная практика в функциональном программировании.
Как и при создании объекта, это можно сделать несколькими способами:
const receipt = { icon: '🍪', name: 'Cookie', }; // Using the spread operator const clone = { ...receipt }; // Using Object assign const clone =Object.assign({},
receipt)
Большую часть времени вы найдете оператор распространения в современных кодовых базах.
🍃 Получить свойство в объекте
Вы хотите получить определенное свойство в объекте? Вот как:
const receipt = { icon: '🍪', name: 'Cookie', }; // Using the object destructuring (my favorite): const { name } = receipt; // Destructuring a property with an alias: const { name as receiptName } = receipt; // Using the dot notation const name = receipt.name; // Using the brackets notation const name = receipt['name'];
Обратите внимание, что запись в квадратных скобках может быть полезна, если у вас есть имя свойства со специальными символами (например, точкой).
🍃 Получить вложенное свойство
В большинстве случаев ваши объекты будут более сложными, чем в предыдущем примере. У вас будут вложенные объекты, возможно вложенные массивы, с необязательными и обязательными свойствами.
Чтобы получить более глубокое свойство вашего объекта, вы можете использовать оператор цепочки, необязательную цепочку и скобки. Вот некоторые примеры:
const receipt = { icon: '🍪', name: 'Cookie', difficulty: 1, ingredients: { fresh: ['🥚', '🥛'], dry: ['🍫', '🧂'], }, comments: [ { id: 1, content: 'Tasty!', }, { id: 2, content: 'Love it ❤️', }, ], }; // Chaining operator in objects receipt.ingredients.fresh; => ['🥚', '🥛'] // Chaining operator in array receipt.comments[0].content; => 'Tasty!' // Optional chaining receipt.comments[3]?.content; => undefined // Optional chaining with default value receipt.comments[3]?.content ?? null; => null
🍃 Получить все ключи объекта
Иногда вам нужно иметь массив всех имен свойств (= ключей) на первом уровне объекта, есть простой помощник:
const receipt = { icon: '🍪', name: 'Cookie', difficulty: 1, ingredients: { fresh: ['🥚', '🥛'], dry: ['🍫', '🧂'], } }; Object.keys(receipt); => ['icon', 'name', 'difficulty', 'ingredients'];
Если вам нужно иметь все ключи второго уровня, вам нужно указать это:
const receipt = { icon: '🍪', name: 'Cookie', difficulty: 1, ingredients: { fresh: ['🥚', '🥛'], dry: ['🍫', '🧂'], } }; Object.keys(receipt.ingredients); => ['fresh', 'dry'];
🍃 Получить все значения объекта
Теперь это способ получить массив всех значений свойств объекта:
const receipt = { icon: '🍪', name: 'Cookie', difficulty: 1, ingredients: { fresh: ['🥚', '🥛'], dry: ['🍫', '🧂'], } }; Object.values(receipt); => ['🍪', Cookie', 1, { fresh: ['🥚', '🥛'], dry: ['🍫', '🧂'], }];
🪴 Объединить два объекта в новый
Использование двух объектов для создания нового может в какой-то момент стать необходимостью, вот как это сделать:
const receipt = { icon: '🍪', name: 'Cookie', difficulty: 1, }; const receiptDates = { createdAt: '2022-03-04', updatedAt: '2022-06-09', } // With spread operator: const receiptWithDates = { ...receipt, ...receiptDates, }; // With Object assign: const receiptWithDates = Object.assign(receipt, receiptDates);
Если одно и то же свойство находится на двух объектах, то значение последнего объекта даст значение:
const receipt = { icon: '🍪', name: 'Cookie', difficulty: 1, }; const metaDatas = { difficulty: 2, } // With spread operator: const receiptWithMetas = { ...receipt, ...metaDatas, }; receiptWithMetas.difficulty => 2
🌻 Заключение
Как вы, наверное, заметили, манипулировать объектами в Javascript очень просто, и вы можете найти множество способов делать одни и те же действия.
Надеюсь, вам понравилось это краткое руководство, не стесняйтесь 👏, если статья показалась вам интересной!