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

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

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

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

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

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

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

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

JS метод Object.keys()

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

Метод Object.keys() повертає масив із ключами (назвами властивостей) даного об'єкта. Цей метод вельми корисний, коли потрібно швидко отримати список всіх ключів об'єкта чи визначити його розмір.

Як використовувати Object.keys()

  1. Основне використання: Для отримання масиву ключів об'єкта просто передайте цьому методу потрібний об'єкт як аргумент.
const car = {
    brand: 'Tesla',
    model: 'Model 3',
    year: 2020
};

const keys = Object.keys(car);
console.log(keys);  // ["brand", "model", "year"]
  1. Визначення розміру об'єкта: Оскільки об'єкти не мають властивості .length як масиви, Object.keys() може допомогти визначити кількість ключів (властивостей) у об'єкті.
const size = Object.keys(car).length;
console.log(size);  // 3
  1. Перебір ключів об'єкта: Отримавши масив ключів, можна легко перебрати всі властивості об'єкта за допомогою циклу for...of.
for (let key of Object.keys(car)) {
    console.log(`Ключ: ${key}, Значення: ${car[key]}`);
}

Важливі особливості

  • Порядок ключів: У сучасних версіях JavaScript порядок, у якому ключі повертаються методом Object.keys(), зазвичай відповідає порядку додавання властивостей до об'єкта. Проте, якщо потрібна гарантія послідовності, рекомендується використовувати Map.

  • Тільки власні властивості: Object.keys() повертає тільки власні властивості об'єкта, не включаючи унаслідовані властивості з прототипа.

const obj = Object.create({ inherited: 'value' });
obj.own = 'own value';
console.log(Object.keys(obj));  // ["own"]

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

Нотатка:

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

const car = {brand: 'Toyota', model: 'Corolla', year: 2020};
console.log(Object.keys(car).length); // 3
Порада:

Коли ви хочете перевірити, чи існує певний ключ у об'єкті, можна спочатку отримати масив ключів за допомогою Object.keys() і потім використати метод includes(). Це корисно для впевненості, що ви працюєте з правильними даними.

const user = {name: 'Olena', age: 25};
if (Object.keys(user).includes('age')) {
  console.log('The key "age" exists in the user object.');
}
Порада:

При ітерації ключів об'єкта за допомогою циклу for...of, спершу отримайте ключі за допомогою Object.keys(). Це зручний спосіб проходитися по кожному ключу, не турбуючись про спадкові властивості або методи.

const book = {title: 'War and Peace', author: 'Leo Tolstoy', year: 1869};
for (let key of Object.keys(book)) {
  console.log(key + ': ' + book[key]);
}
Порада:

Якщо потрібно зробити операції зі значеннями об'єкта, але ключі вам не потрібні, не забувайте про комбінацію Object.keys() та map(). Цей підхід може бути корисний для отримання масиву значень об'єкта без прямого використання Object.values().

const prices = {apple: 0.5, banana: 0.3, orange: 0.8};
const valuesArray = Object.keys(prices).map(key => prices[key]);
console.log(valuesArray); // [0.5, 0.3, 0.8]

Синтаксис

Object.keys(obj)

Параметри

*obj

Об'єкт, ключі якого потрібно отримати.

Return

array

Повертає масив рядків, що представляють власні перелічувані властивості об'єкта з рядковими ключами.

Переглядачі

Переглядач

5

4

5

12

12
Переглядач

4.4

18

4

5
Переглядач

0.10.0

1.0

Приклади


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

const fruit = {
    apple: 5,
    banana: 2,
    orange: 4
};

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

console.log(fruitKeys); // ['apple', 'banana', 'orange']

// Визначення кількості властивостей в об'єкті
console.log(fruitKeys.length); // 3

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

const users = [
    { id: 1, name: 'Іван', age: 25 },
    { id: 2, name: 'Олена', age: 30 },
    { id: 3, name: 'Максим', role: 'адміністратор' }
];

// Визначення, чи має об'єкт певний набір ключів
function hasRequiredKeys(obj, keys) {
    const objKeys = Object.keys(obj);
    return keys.every(key => objKeys.includes(key));
}

const requiredKeys = ['id', 'name', 'age'];

const filteredUsers = users.filter(user => hasRequiredKeys(user, requiredKeys));

console.log(filteredUsers); 
// [{ id: 1, name: 'Іван', age: 25 }, { id: 2, name: 'Олена', age: 30 }]

У цьому прикладі користувач може ввести JSON об'єкта у текстове поле. Після натискання кнопки "Показати ключі" скрипт парсить введений JSON і виводить список ключів об'єкта.

Документи

Зв'язок