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

автор: Bond

Порада

Коли ви хочете перевірити, чи існує певний ключ у об'єкті, можна спочатку отримати масив ключів за допомогою 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.');
}
автор: Bond
Порада

При ітерації ключів об'єкта за допомогою циклу 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]);
}
автор: Bond
Порада

Якщо потрібно зробити операції зі значеннями об'єкта, але ключі вам не потрібні, не забувайте про комбінацію 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]
автор: Bond
Нотатка

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

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

Синтаксис

Object.keys(obj)

Параметри

obj

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

автор: Bond

Повернення

array

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

автор: Bond

Переглядачі

Підтримка: стаціонарні переглядачі
Переглядач Google Chrome Mozilla Firefox Apple Safari Opera Microsoft EDGE Microsoft Internet Explorer
5 4 5 12 12 9
Підтримка: мобільні переглядачі
Переглядач Mobile Google Android Mobile Google Chrome Mobile Mozilla Firefox Mobile Apple Safari
4.4 18 4 5
Підтримка: серверні переглядачі
Переглядач Node.js Deno
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
автор: Bond

У цьому прикладі ми використаємо метод 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 }]
автор: Bond

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

автор: Bond

Коментарі

Коментарів ще немає — будьте першим!

Відповідь для

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~
Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень
Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле саме підкаже шляхи, а хибний підкреслить хвилею.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```
Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження
Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox
Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає
Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.
Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||
Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Увійдіть — коментар з'явиться одразу, без капчі й очікування перевірки.

Пропозиція правки

Ваша версія — : після перевірки замінить чинну. Нова порада чи нотатка — з'явиться на сторінці після перевірки.

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~
Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень
Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле саме підкаже шляхи, а хибний підкреслить хвилею.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```
Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження
Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox
Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає
Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.
Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||
Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Ваша версія секції «»: після перевірки замінить чинну.

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~
Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень
Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле саме підкаже шляхи, а хибний підкреслить хвилею.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```
Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження
Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox
Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає
Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.
Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||
Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Ваша версія опису «»: після перевірки замінить чинну.

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~
Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень
Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле саме підкаже шляхи, а хибний підкреслить хвилею.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```
Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження
Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox
Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає
Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.
Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||
Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Зворотний зв'язок
Вхід