Циклы for..in в JavaScript: работа с key-value парами

Быстрый ответ

Для немедленной демонстрации обратимся к простому коду, изображающему доступ к паре ключ-значение в объектах JavaScript при помощи цикла for...in и проверки на наличие свойства hasOwnProperty:

const obj = { a: 1, b: 2, c: 3 };

for (const key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(`Ключ: ${key}, Значение: ${obj[key]}`);
  }
}

С помощью данного кода мы убеждаемся, что происходит перебор только собственных свойств объекта, при этом не затрагивая те, которые унаследованы от прототипа.

Разнообразные методы перебора и их применение

Существует несколько подходов к итерации, выбор которых зависит от конкретной поставленной задачи:

ES6: цикл for..of с применением Object.entries

Цикл for..of, используемый вместе с Object.entries – это современный способ для перебора объектов:

const obj = { a: 1, b: 2, c: 3 };

for (const [key, value] of Object.entries(obj)) {
    console.log(`Ключ: ${key}, Значение: ${value}`);
}

Ключ к методам работы с массивами: Object.keys

Если же вы хотите применять методы массивов к объекту, Object.keys предлагает решение для этого:

Object.keys(obj).forEach(key => {
  console.log(`Ключ: ${key}, Значение: ${obj[key]}`);
});

Расширяем возможности: Object.values и Object.entries

Существует возможность расширить за счет использования Object.values и Object.entries:

const values = Object.values(obj); // выводятся только значения
const entries = Object.entries(obj); // ключи и значения как пара

Будьте бдительны, подводные камни: лучшие практики и часто встречающиеся ошибки

Каждый опытный разработчик знает о необходимости бдительности при работе с for...in. Об этом цикле следует знать некоторые тонкости и особенности:

HasOwnProperty: проверка происхождения

Важным шагом при применении for..in является исключение унаследованных свойств из перебора. По этой причине все свойства следует тщательно проверять:

for (const key in obj) {
  if (typeof obj[key] !== 'function' && obj.hasOwnProperty(key)) {
    console.log(`Ключ: ${key}, Значение: ${obj[key]}`);
  }
}

ES6 в роли вашего страховщика

С появлением Object.entries многие программисты предпочитают его использование вместо for...in, что помогает избежать проблем, связанных с прототипной цепочкой.

Визуализация

Предлагаем вам такую анналогию. Представьте «сундук с сокровищами» (🏴‍☠️). Каждое сокровище в сундуке желает рассказать свою уникальную историю о пирате, который его нашёл:

const pirateLoot = {
  'Черная Борода': 'Золотая Монета',
  'Капитан Кидд': 'Серебряный Кубок',
  'Калико Джек': 'Меч, усыпанный драгоценностями'
};

for (const pirate in pirateLoot) {
  console.log(`${pirate} нашёл ${pirateLoot[pirate]}`);
}

🏴‍☠️:

"Черная Борода" 🔑 -> "Золотая Монета" 💰
"Капитан Кидд" 🔑 -> "Серебряный Кубок" 🏆
"Калико Джек" 🔑 -> "Меч, усыпанный драгоценностями" 🗡

⚡ Можно сравнить каждый проход по циклу for..in с открытием клада пиратом.

Полезные материалы

1. Цикл for...in – JavaScript | MDN — официальная документация по циклу for...in.
2. Оператор for/in – JavaScript | W3Schools — изучите цикл for...in на примерах от W3Schools.
3. Object.entries() – JavaScript | MDN — преобразуйте объекты в массивы пар ключ-значение с помощью Object.entries.
4. Понимание объектов в JavaScript | DigitalOcean — углубите свои знания во всех аспектах объектов JavaScript.
5. Обзор ES6 за 350 пунктов — полный обзор возможностей ES6, главными действующими лицами в котором являются for...of и for...in.
6. Как перебрать свойства объекта JavaScript? – Stack Overflow — присоединяйтесь к обсуждению перебора свойств объектов.
7. Object.keys, values, entries — освойте методы Object для работы с парами ключ-значение.