JS властивість Object.prototype

Загальний опис

Object у JavaScript є базовим блоком, з якого починається будь-яка структура даних у мові. Він представляє собою колекцію пар "ключ-значення", де ключем є рядок, а значенням може бути будь-який тип даних. Основна суть і корисність Object полягає в тому, що він дозволяє групувати, структурувати і маніпулювати даними ефективним чином.

Використання Object від простих до складних випадків

1. Створення об'єктів: Найпростіший спосіб створити об'єкт - використовувати фігурні дужки {}.

const person = {
    name: "Іван",
    age: 25
};

1. Доступ до властивостей: Властивості об'єкта можна читати і записувати, використовуючи крапкову нотацію або квадратні дужки.

// Крапкова нотація
console.log(person.name);  // Іван

// Квадратні дужки
console.log(person['age']);  // 25

1. Методи об'єкта: Об'єкти можуть також містити функції, які відомі як методи об'єкта.

const book = {
    title: "Шляхи",
    author: "М. П. Козак",
    read: function() {
        console.log(`Читаю книгу "${this.title}" автора ${this.author}`);
    }
};

book.read();  // Читаю книгу "Шляхи" автора М. П. Козак

Важливі особливості та практичні рекомендації

• Прототипи: Кожен Object має так званий "прототип", який дозволяє наслідувати властивості і методи від інших об'єктів.

• Перевірка на наявність властивості: Для перевірки наявності властивості у об'єкта рекомендується використовувати метод hasOwnProperty.

if (person.hasOwnProperty('name')) {
    console.log('Об’єкт має властивість "name"');
}

• Перебір властивостей об'єкта: Для перебору властивостей об'єкта можна використовувати цикл for...in, але слід бути обережним з властивостями, унаслідованими від прототипа.

for (let key in person) {
    if (person.hasOwnProperty(key)) {
        console.log(key, person[key]);
    }
}

Використовуючи Object в JavaScript, можна ефективно структурувати і маніпулювати даними, враховуючи всі ці особливості та рекомендації.

правити

Нотатка

Якщо потрібно створити об'єкт без прототипа, використовуйте Object.create(null). Це корисно, коли ви хочете створити чисту "карту" даних без властивостей та методів, які є у стандартних об'єктах.

const pureObject = Object.create(null);
console.log(pureObject.toString); // undefined

автор: Bond правити

Нотатка

Коли створюєте об'єкт використовуючи конструктор Object, пам'ятайте, що існує кілька способів створення об'єктів у JavaScript. Найпростіший — за допомогою літералу об'єкта. Наприклад:

const obj1 = new Object();
const obj2 = {};

Обидва вирази вище створюють порожній об'єкт, але другий метод, за допомогою літералу {}, є коротшим та широко використовуваним.

автор: Bond правити

Нотатка

Object має декілька корисних статичних методів для роботи з об'єктами, таких як Object.keys(), Object.values() та Object.entries(). Вони допоможуть вам отримати доступ до ключів, значень та пар ключ-значення об'єкта відповідно. Знайомство з цими методами може значно спростити роботу з об'єктами.

const person = {name: 'Ivan', age: 30};
console.log(Object.keys(person)); // ["name", "age"]

автор: Bond правити

Нотатка

Використовуйте метод Object.assign() для копіювання або злиття властивостей між об'єктами. Це корисно для створення копій об'єктів або комбіновання декількох об'єктів в один.

const target = {a: 1};
const source1 = {b: 2};
const source2 = {c: 3};
Object.assign(target, source1, source2);
console.log(target); // {a: 1, b: 2, c: 3}

Однак зауважте, що Object.assign() виконує поверхневе копіювання, тому глибокі властивості об'єкта будуть копіюватися за посиланням, а не як нові об'єкти.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

Object

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	3	12

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Підтримка: серверні переглядачі

Переглядач
	0.10.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

const person = {
    name: 'Олександр',
    age: 28,
    profession: 'програміст'
};

// Отримання масиву ключів об'єкта
const keys = Object.keys(person);

console.log(keys); // ['name', 'age', 'profession']

const defaultSettings = {
    fontSize: '16px',
    color: 'чорний',
    background: 'білий'
};

const userSettings = {
    fontSize: '18px',
    color: 'синій'
};

// Зливаємо два об'єкта разом, де userSettings перезаписують defaultSettings
const finalSettings = Object.assign({}, defaultSettings, userSettings);

console.log(finalSettings); 
// { fontSize: '18px', color: 'синій', background: 'білий' }