JavaScript как язык программирования разработан с использованием объектно-ориентированной парадигмы. В последней статье, которой я поделился, я объяснил концепцию объектно-ориентированного программирования в JavaScript с использованием объектов. Я рекомендую вам начать чтение с чтения этой статьи, прежде чем углубляться в этот пост, если вы не знакомы с объектами в JavaScript.
Класс Object — это тип данных в JavaScript, который можно использовать для хранения коллекций элементов и других сложных объектов с ключами. Например, объекты можно использовать для хранения массива объектов.
В этой статье мы углубимся в методы, используемые в объектах, и способы доступа к свойствам объекта.
Статические методы объекта
— Объект.назначить()
Этот метод используется для копирования значений всех перечисляемых собственных свойств из одного или нескольких исходных объектов в целевой объект. Его можно использовать для слияния объектов с другими или клонирования существующего объекта. Он принимает цель в качестве первого параметра и параметр источников (один или несколько объектов).
Object.assign(target, sources)
Примеры:
Давайте рассмотрим два основных примера
- Объединение объектов
Под слиянием мы подразумеваем копирование всех бесчисленных свойств объекта или объектов в другой.
Хорошим вариантом использования будет, если вы хотите поместить несколько свойств разных объектов в один объект для облегчения доступа.
const scores = Object.assign(
{}, // target object
{ Math: 70, English: 85 }, // first source
{ Geography: 50, Chemistry: 90 }, // second source
{ Physics: 100, Biology: 80 } // third source
);
console.log(scores)
{
Math: 70,
English: 85,
Geography: 50,
Chemistry: 90,
Physics: 100,
Biology: 80
}
- Копирование или клонирование объекта
Вы можете клонировать объект в новый целевой объект. См. пример ниже:
// source
const member = {
id: 1,
name: "sam",
occupation: "software engineer"
};
// clone target
const admin = Object.assign({}, member);
console.log(admin) // { id: 1, name: "sam", occupation: "software engineer"};
По сути, мы только что объединили объект member с новым object{} и тем самым присвоили его новой переменной admin.
С другой стороны, это то же самое, что присвоить объекту новую переменную 🤷🏾♂️
const admin = member;
console.log(admin) // { id: 1, name: "sam", occupation: "software engineer"};— Объект.заморозить()
Этот метод замораживает объект, предотвращая добавление новых свойств к существующему объекту. Замороженный объект больше нельзя изменить. Когда объект заморожен, к нему нельзя добавить новые свойства, нельзя удалить существующие свойства, а также отключено изменение перечислимости, конфигурируемости или возможности записи существующих свойств.
Это также предотвращает изменение значений существующих свойств. Кроме того, замораживание объекта также предотвращает изменение его прототипа. Object.freeze() возвращает тот же объект, который был передан.
Пример:
// member object
const member = {
id: 1,
name: "sam",
occupation: "software engineer"
};
Object.freeze(member);
// returns {
id: 1,
name: "sam",
occupation: "software engineer"
};
Если вы попытаетесь добавить к объекту новое свойство, вы получите ошибку TypeError в строгом режиме.
'use strict'; member.workplace = 'Google'; returns // TypeError
Если вы попытаетесь удалить новое свойство объекта, вы получите ошибку TypeError в строгом режиме.
'use strict'; delete member.workplace; returns // TypeError
— Object.isFrozen()
Этот метод в основном проверяет, заморожен ли объект или нет. Он возвращает true, если он заморожен, или false, если он не заморожен.
Пример:
// Using the previously frozen member object
Object.isFrozen(member) // true
// Using a new empty object
Object.isFrozen({}) // false
— Object.entries()
Этот метод принимает объект и возвращает многомерный массив свойств объекта в виде массива. Он преобразует свойство пары ключ-значение объекта в массив, где первый элемент массива является ключом, а второй элемент — значением, представленным в объекте.
Пример:
const member = {
id: 1,
name: "sam",
occupation: "software engineer"
};
Object.entries(member)
returns //
[
["id", 1]
["name", "sam"]
["occupation", "software engineer"]
]
— Object.fromEntries()
Этот метод принимает список итерируемых пар ключ-значение и возвращает объект, свойства которого задаются элементами списка. С помощью этого метода вы можете преобразовать массив, карту в объект и любой другой объект, реализующий метод @@iterable.
Он может принимать массив, где первый элемент массива является ключом, а второй элемент — значением, представленным в массиве, и преобразует его в свойства нового объекта. Это противоположно Object.entries() .
Пример:
- Преобразование массивов в объекты
// Array list of key-value pairs
const member = [['id', 1], ['name', 'sam'], ['occupation', 'software engineer']];
const newMember = Object.fromEntries(member);
console.log(newMember);
{
id: 1,
name: "sam",
occupation: "software engineer"
- Преобразование карты в объект
//
const member = new Map([['id', 1], ['name', 'sam'], ['occupation', 'software engineer']]);
const newMember = Object.fromEntries(member);
console.log(newMember);
{
id: 1,
name: "sam",
occupation: "software engineer"
}
— Деструктуризация объектов
По сути, мы можем разбить объект, чтобы извлечь его свойства, которые могут быть массивом или объектами, в отдельные переменные. Вы можете найти это очень полезным для эффективной обработки объектов в вашей кодовой базе.
const {идентификаторA, идентификаторB, …идентификаторZ} = выражение;
Где идентификатор — это ключ свойства объекта. Он содержит значение свойства.
Пример:
const member = {
id: 1,
name: “sam”,
occupation: “software engineer”
};
// extracts the specified properties of the object into new variables
const { id, name, occupation } = member;
// id, name and occupation are now new variable that can be used
- Для вложенных объектов
// below is a technique for accessing nested properties of an object
const {
id,
name ,
occupation,
address: { street, city, state }
} = member;
// you can now access the nested properties such as city, state and street
- Использование оператора Rest
Оператор rest — очень полезный синтаксис при деструктурировании объектов. Он используется для сбора оставшихся свойств объекта после его деструктуризации.
const member = {
id: 1,
name: “sam”,
occupation: “software engineer”
};
const { id, …rest } = member;
// rest is a plain object that contains the remaining properties of the object
console.log(rest) // {name, occupation}
В следующем посте мы рассмотрим другие методы объекта и несколько приемов их эффективного использования. Я надеюсь, что это помогло вам узнать кое-что об объектах в JavaScript. Дайте мне знать в комментарии ниже.
