Итерация по ключам и значениям в словаре JavaScript

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

Настоятельно рекомендуется использовать функцию Object.entries() вместе с циклом for...of для итерации по ключам и значениям объекта.

const obj = { a: 1, b: 2, c: 3 };
for (const [k, v] of Object.entries(obj)) {
  console.log(`Key: ${k} Value: ${v}`);
}

Этот код выводит все пары ключ-значение, и это подойдёт для большинства задач.

Усовершенствованный подход: ECMAScript 2017

Спецификация ECMAScript 2017 включает новую функцию Object.entries(), которая возвращает массив пар ключ-значение объекта. Это крайне удобно при необходимости одновременной работы с ключами и значениями.

const user = { name: 'Alice', age: 25 };
Object.entries(user).forEach(([key, value]) => {
  // Раскрытие всей информации об Элис
  console.log(`${key}: ${value}`);
});

// Так мы узнаём об Элис больше, чем она, вероятно, хотела бы.

Здесь мы используем деструктуризацию вместе с методом forEach(), что позволяет нам легко получать доступ к ключам и значениям объекта.

Старая школа: До ECMAScript 2015

Перед появлением ECMAScript 2015 (ES6) основным инструментом для итерации служил цикл for...in. При этом не стоит забывать про проверку .hasOwnProperty для исключения унаследованных свойств.

const oldSchoolObject = { d: 4, e: 5, f: 6 };
for (const key in oldSchoolObject) {
  if (oldSchoolObject.hasOwnProperty(key)) {
    // Извлекаем значения по старому образцу
    console.log(`Key: ${key}, Value: ${oldSchoolObject[key]}`);
  }
}

В ES5 был добавлен поток Object.keys(), который, используя forEach, предлагает альтернативный подход к перебору ключей объекта.

Object.keys(oldSchoolObject).forEach(function(key) {
  console.log(`Key: ${key}, Value: ${oldSchoolObject[key]}`);
});

// Тайны объекта раскрыты.

Итерация через: Объекты Map

Объект Map() хранит пары ключ-значение, запоминая порядок их добавления.

const myMap = new Map([['x', 10], ['y', 20]]);
myMap.forEach((val, key) => {
  // Напоминая себе о периоде коронавируса
  console.log(`Key: ${key}, Value: ${val}`);
});

Объект Map() предоставляет методы .keys(), .values() и .entries(), которые расширяют возможности итерации.

Будем практичными: Учтём детали

При выборе метода итерации, с учётом производительности и совместимости, следует учитывать следующее:

• Функция Object.entries() преобразует объект в массив, что может потребовать дополнительных ресурсов при работе с большими объектами.
• Цикл for...in работает быстрее, но может включать в себя унаследованные свойства из цепочки прототипов объекта.
• Объект Map гарантирует сохранение последовательности вставки элементов, что делает его более предсказуемым.

Учитывайте эти нюансы при выборе метода итерации.

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

Представим, что у нас есть старинный сундук (🗝️🧰), полный монет со специфическими приметами:

const oldChest = new Map([
  ['coinA', 'gold'],
  ['coinB', 'silver'],
  ['coinC', 'copper']
]);

Оценим каждую монету (ключ и значение), используя "инструменты" сундука.

🔍 Ключи:   [coinA, coinB, coinC]
💰 Значения: [gold, silver, copper]

for (let [key, value] of oldChest) {
  console.log(`Key: ${key}, Value: ${value}`);
}

// Мы отыскали сокровища в чердачной комнате!

Таким образом, мы можем выявлять тип и ценность каждой монеты в ходе итерации.

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

1. Итераторы и генераторы – JavaScript | MDN — Глубоко проработанное руководство по протоколам итерации.
2. Object.entries() – JavaScript | MDN — Документация о методе Object.entries(), позволяющем выполнить итерацию пар ключ-значение.
3. for...of – JavaScript | MDN — Подробная информация о цикле for...of, используемом для перебора итерируемых структур.
4. Map – JavaScript | MDN — Здесь вы найдёте подробности о методах объектов Map и примерах их использования.
5. Деструктурирующее присваивание – JavaScript | MDN — Подробная информация об использовании деструктурирующего присваивания для упрощения работы с парами ключ-значение.
6. Map и Set — Обзор объектов Map и Set с наглядными примерами использования для работы с уникальными итерируемыми элементами.