Как пройтись по объекту в JavaScript — for...in, Object.keys и Object.entries?
С массивом понятно — forEach. А как перебрать объект по ключам и значениям? Пробовал forEach на объекте — ошибка forEach is not a function. Какие правильные способы пройтись по полям объекта?
2 ответа
У объекта нет forEach (он только у массивов) — отсюда твоя ошибка. Для перебора объекта есть несколько способов.
Object.entries + forEach — самый удобный, сразу даёт пары ключ-значение:
const user = { name: 'Аня', age: 20, city: 'Москва' };
Object.entries(user).forEach(([key, value]) => {
console.log(`${key}: ${value}`);
});
// name: Аня
// age: 20
// city: Москва
Object.keys — массив ключей (можно дальше map/filter):
Object.keys(user); // ['name', 'age', 'city']
Object.keys(user).forEach(key => {
console.log(key, '=', user[key]);
});
Object.values — массив значений:
Object.values(user); // ['Аня', 20, 'Москва']
for...in — перебирает ключи объекта циклом:
for (const key in user) {
console.log(key, user[key]);
}
Что выбрать: Object.entries или Object.keys — современнее и предсказуемее, дают настоящий массив, к которому применимы map/filter/reduce. for...in тоже работает, но он ещё проходит по унаследованным свойствам — иногда добавляют проверку if (user.hasOwnProperty(key)).
Частая путаница: for...in — для объектов (даёт ключи), for...of — для массивов/итерируемых (даёт значения). Перепутаешь — получишь не то.
Запомни связку «объект → массив → методы массива»:
const prices = { apple: 50, bread: 30, milk: 80 };
// сумма всех значений
const total = Object.values(prices).reduce((a, b) => a + b, 0);
console.log(total); // 160
// ключи, где значение > 40
const expensive = Object.keys(prices).filter(k => prices[k] > 40);
console.log(expensive); // ['apple', 'milk']
Как только превратил объект в массив через Object.keys/values/entries, тебе доступен весь арсенал map/filter/reduce.