css.in.ua
Підтримати

Наповнення JS розділу

Добридень, Пані та Панове, завдяки вам вдалося зібрати більше 19тис грн з необхідних 15тис на впровадження JS розділу.

JS розділ вже впроваджено - переходимо до його наповнення і почнемо бігти довгий марафон, адже JS має більше 1100 різноманітних методів, властивостей, подій і т.д., які необхідно описати.

Будемо працювати, і вдень, і вночі, щоб орієнтовно взимку закінчити наповнювати JS розділ!

Ви також можете допомогти нам в цьому. Долучайтеся до нашої спільноти в дискорді - ставайте її частиною і допомагайте нашому розвитку.

Також, підтримуйте нас матеріально.

Підтримати матеріально

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, пам'ятайте, що існує кілька способів створення об'єктів у JavaScript. Найпростіший — за допомогою літералу об'єкта. Наприклад:

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

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

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

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

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

const pureObject = Object.create(null);
console.log(pureObject.toString); // undefined
Нотатка:

Використовуйте метод 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() виконує поверхневе копіювання, тому глибокі властивості об'єкта будуть копіюватися за посиланням, а не як нові об'єкти.

Синтаксис

Object

Значення

Return

Переглядачі

Переглядач

1

1

1

3

12
Переглядач

4.4

18

4

1
Переглядач

0.10.0

1.0

Приклади


У цьому прикладі ми використовуємо метод Object.keys(), щоб отримати масив ключів об'єкта.

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

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

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

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

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: 'білий' }

Спільнота

Зв'язок