Управление объектом в Javascript: полное руководство

В своей повседневной работе в качестве разработчика 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 очень просто, и вы можете найти множество способов делать одни и те же действия.

Надеюсь, вам понравилось это краткое руководство, не стесняйтесь 👏, если статья показалась вам интересной!