Итерация по ключам и значениям в словаре 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}`);
}
// Мы отыскали сокровища в чердачной комнате!
Таким образом, мы можем выявлять тип и ценность каждой монеты в ходе итерации.
Полезные материалы
- Итераторы и генераторы – JavaScript | MDN — Глубоко проработанное руководство по протоколам итерации.
- Object.entries() – JavaScript | MDN — Документация о методе
Object.entries()
, позволяющем выполнить итерацию пар ключ-значение. - for...of – JavaScript | MDN — Подробная информация о цикле for...of, используемом для перебора итерируемых структур.
- Map – JavaScript | MDN — Здесь вы найдёте подробности о методах объектов
Map
и примерах их использования. - Деструктурирующее присваивание – JavaScript | MDN — Подробная информация об использовании деструктурирующего присваивания для упрощения работы с парами ключ-значение.
- Map и Set — Обзор объектов Map и Set с наглядными примерами использования для работы с уникальными итерируемыми элементами.