Как перебирать объекты JavaScript - Полное руководство

Перебор JavaScript объектов: доступ к ключам и значениям

Для перебора JavaScript объекта и доступа к его ключам и значениям можно использовать несколько подходов, включая цикл for...in, методы Object.keys(), Object.values() и Object.entries(). Наиболее современным и лаконичным подходом является использование Object.entries() с методами итерации массивов, в то время как цикл for...in обеспечивает традиционную совместимость со всеми браузерами.

Содержание

• Использование цикла for…in
• Метод Object.keys()
• Метод Object.values()
• Метод Object.entries()
• Совместимость с браузерами
• Вопросы производительности
• Лучшие практики

Использование цикла for…in

Оператор for...in перебирает все перечисляемые строковые свойства объекта, включая унаследованные свойства. Это традиционный способ перебора объектов, который работает во всех браузерах.

var p = {
    "p1": "value1",
    "p2": "value2",
    "p3": "value3"
};

for (let key in p) {
    console.log(key + ": " + p[key]);
    // Вывод:
    // p1: value1
    // p2: value2
    // p3: value3
}

Важно: Цикл for...in также перечисляет свойства из цепи прототипов, поэтому следует проверять, принадлежит ли свойство самому объекту, используя hasOwnProperty():

for (let key in p) {
    if (p.hasOwnProperty(key)) {
        console.log(key + ": " + p[key]);
    }
}

Цикл for...in доступен во всех браузерах с июля 2015 года и хорошо устоялся, что делает его надежным выбором для большинства проектов источник.

Метод Object.keys()

Object.keys() возвращает массив имен собственных перечисляемых свойств данного объекта, в том же порядке, что и цикл for...in.

var p = {
    "p1": "value1",
    "p2": "value2",
    "p3": "value3"
};

var keys = Object.keys(p);
console.log(keys); // ["p1", "p2", "p3"]

keys.forEach(function(key) {
    console.log(key + ": " + p[key]);
});

Вы также можете использовать его с современными методами массивов:

Object.keys(p).forEach(key => {
    console.log(`${key}: ${p[key]}`);
});

Этот метод особенно полезен, когда вам нужны только ключи, а не значения. Согласно Mozilla Developer Network, Object.keys() был введен в ES6 для упрощения итерации объектов.

Метод Object.values()

Object.values() возвращает массив собственных перечисляемых значений свойств данного объекта, в том же порядке, что и цикл for...in.

var p = {
    "p1": "value1",
    "p2": "value2",
    "p3": "value3"
};

var values = Object.values(p);
console.log(values); // ["value1", "value2", "value3"]

values.forEach(value => {
    console.log(value);
});

Этот метод идеален, когда вам нужны только значения, а ключи не важны. Как указано в документации MDN, порядок массива, возвращаемого Object.values(), совпадает с порядком, предоставляемым циклом for...in.

Метод Object.entries()

Object.entries() возвращает массив собственных перечисляемых строковых ключей [ключ, значение] данного объекта. Это наиболее современный и часто наиболее удобный метод для доступа к ключам и значениям одновременно.

var p = {
    "p1": "value1",
    "p2": "value2",
    "p3": "value3"
};

// Преобразование объекта в массив пар [ключ, значение]
var entries = Object.entries(p);
console.log(entries);
// [["p1", "value1"], ["p2", "value2"], ["p3", "value3"]]

// Использование цикла for...of для итерации
for (const [key, value] of Object.entries(p)) {
    console.log(`${key}: ${value}`);
    // Вывод:
    // p1: value1
    // p2: value2
    // p3: value3
}

// Использование метода forEach
Object.entries(p).forEach(([key, value]) => {
    console.log(`${key}: ${value}`);
});

Метод Object.entries() был введен в ECMAScript 2017 и обеспечивает чистый, современный способ итерации по объектам. Как упоминается в документации MDN, этот метод возвращает массив собственных перечисляемых строковых ключей свойств [ключ, значение] данного объекта.

Совместимость с браузерами

Разные методы имеют различный уровень поддержки браузерами:

• Цикл for…in: Работает во всех браузерах, включая Internet Explorer 5.5+
• Object.keys(): Поддерживается в IE9+ и всех современных браузерах
• Object.values(): Поддерживается в IE11+ и всех современных браузерах
• Object.entries(): Не поддерживается в IE11, требуются современные браузеры

Для максимальной совместимости, особенно при поддержке старых браузеров, могут потребоваться полифилы:

// Полифил для Object.entries, если не поддерживается
if (!Object.entries) {
    Object.entries = function(obj) {
        var ownProps = Object.keys(obj),
            i = 0,
            resArray = new Array(ownProps.length),
            prop;
        
        while (i < ownProps.length) {
            resArray[i] = [ownProps[i], obj[ownProps[i]]];
            i++;
        }
        
        return resArray;
    };
}

Вопросы производительности

Разные методы итерации имеют разные характеристики производительности:

• Цикл for…in: Обычно быстрый, но медленнее при работе с большими объектами с множеством унаследованных свойств
• Object.keys(): Создает промежуточный массив ключей, немного больше использование памяти
• Object.values(): Создает промежуточный массив значений
• Object.entries(): Создает промежуточный массив пар [ключ, значение], наибольшее использование памяти, но наиболее удобно

Для критически важных по производительности приложений с большими объектами традиционный цикл for...in может быть немного быстрее, но разница обычно незначительна для большинства случаев использования.

Лучшие практики

Вот рекомендации по выбору правильного метода итерации:

1. Используйте цикл for…in, когда:

   • Вам нужна максимальная совместимость с браузерами
   • Вы работаете с объектами, которые могут иметь унаследованные свойства, которые вы хотите проверить
   • Производительность критична и вы работаете с очень большими объектами

2. Используйте Object.keys(), когда:

   • Вам нужны только ключи
   • Вы работаете с современными браузерами
   • Вы хотите использовать методы массива, такие как map(), filter() и т.д.

3. Используйте Object.values(), когда:

   • Вам нужны только значения
   • Вы работаете с современными браузерами
   • Вы хотите преобразовывать или обрабатывать значения с помощью методов массива

4. Используйте Object.entries(), когда:

   • Вам нужны и ключи, и значения
   • Вы работаете с современными браузерами
   • Вы хотите самый чистый и современный синтаксис

Для вашего конкретного примера объекта подход Object.entries() предоставляет наиболее читаемое и современное решение:

var p = {
    "p1": "value1",
    "p2": "value2",
    "p3": "value3"
};

Object.entries(p).forEach(([key, value]) => {
    console.log(`${key}: ${value}`);
});

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

Источники

1. Object.entries() - JavaScript | MDN
2. Object.keys() - JavaScript | MDN
3. Object.values() - JavaScript | MDN
4. for…in - JavaScript | MDN
5. How do I loop through or enumerate a JavaScript object? - Stack Overflow
6. How to loop through objects keys and values in Javascript? - Hostman
7. How to Iterate Over a JavaScript Object? - LateNode

Заключение

Перебор JavaScript объектов можно выполнить с помощью нескольких методов, каждый из которых имеет свои преимущества:

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

Для большинства современных разработок на JavaScript подход Object.entries() с методами итерации массива, такими как forEach() или циклы for...of, предлагает лучшее сочетание читаемости и функциональности. Однако при поддержке старых браузеров или работе с объектами, которые могут иметь унаследованные свойства, традиционный цикл for...in остается надежным выбором.

Выбирайте метод, который лучше всего соответствует вашим конкретным потребностям в отношении совместимости с браузерами, читаемости кода и необходимости в ключах, значениях или обоих одновременно.