Как перебирать объект в JavaScript?
У меня есть объект в JavaScript, который выглядит следующим образом:
{
abc: '...',
bca: '...',
zzz: '...',
xxx: '...',
ccc: '...',
// ...
}
Я хочу использовать цикл for
, чтобы получить его свойства, и при этом хочу итерировать их частями (не все свойства объекта сразу).
С простым массивом я могу сделать это с помощью стандартного цикла for
:
for (i = 0; i < 100; i++) { ... } // первая часть
for (i = 100; i < 300; i++) { ... } // вторая часть
for (i = 300; i < arr.length; i++) { ... } // последняя
Но как сделать то же самое с объектами?
5 ответ(ов)
Вот еще одно решение с использованием итерации, подходящее для современных браузеров:
Object.keys(obj)
.filter((k, i) => i >= 100 && i < 300)
.forEach(k => console.log(obj[k]));
Или без использования функции filter
:
Object.keys(obj).forEach((k, i) => {
if (i >= 100 && i < 300) {
console.log(obj[k]);
}
});
Однако стоит учитывать, что свойства в объекте JavaScript не отсортированы, т.е. не имеют определенного порядка.
Единственный надежный способ сделать это — сохранить данные вашего объекта в два массива, один для ключей и один для данных:
var keys = [];
var data = [];
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
keys.push(key);
data.push(obj[key]); // Это не обязательно, но, на мой взгляд, так чище. Смотрите пример ниже.
}
}
Затем вы можете итерироваться по массивам так, как вы обычно делаете это:
for (var i = 0; i < 100; i++) {
console.log(keys[i], data[i]);
// или
console.log(keys[i], obj[keys[i]]); // сложнее для чтения, по-моему.
}
for (var i = 100; i < 300; i++) {
console.log(keys[i], data[i]);
}
Я не использую Object.keys(obj)
, потому что это работает только в IE 9 и выше.
Если мы перебираем объект JavaScript и находим ключ массива объектов, то можем воспользоваться методом Object.keys()
, который возвращает массив ключей объекта. В приведённом вами коде мы пытаемся перебрать ключи массива Array
, что, скорее всего, не совсем то, что вам нужно.
Вот пример кода, который может помочь вам перебрать массив объектов и вывести ключи каждого объекта:
const arrayOfObjects = [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' }
];
arrayOfObjects.forEach(obj => {
Object.keys(obj).forEach(key => {
console.log('key:', key);
});
});
В этом примере мы создаём массив объектов и для каждого объекта в этом массиве перебираем его ключи с помощью Object.keys()
. В результате для каждого ключа мы выводим его название в консоль.
Если вам нужно что-то другое или у вас есть конкретные требования к вашему коду, пожалуйста, уточните ваш вопрос.
Чтобы избежать использования селекторов и подскриптов, можно определить объект напрямую в аргументах функции. Это позволяет упростить синтаксис, избегая обращения к свойствам объекта внутри итератора. В представленном ниже примере k
обозначает ключ, v
— значение, а i
— индекс.
const obj = {
kiwi: true,
mango: false,
pineapple: 500
};
Object.entries(obj).forEach(([k, v], i) => {
console.log(k, v, i);
});
// kiwi true 0
// mango false 1
// pineapple 500 2
Таким образом, использование деструктуризации в аргументах делает код более читаемым и позволяет напрямую работать с параметрами без дополнительных обращений к объекту.
Если у вас есть простой объект, вы можете перебрать его, используя следующий код:
let myObj = {
abc: '...',
bca: '...',
zzz: '...',
xxx: '...',
ccc: '...',
// ...
};
let objKeys = Object.keys(myObj);
// Теперь мы можем использовать objKeys для перебора myObj
for (let item of objKeys) {
// это выведет ключи
console.log('ключ:', item);
// это выведет значения
console.log('значение:', myObj[item]);
}
Если у вас есть вложенный объект, вы можете перебрать его, используя следующий код:
let b = {
one: {
a: 1,
b: 2,
c: 3
},
two: {
a: 4,
b: 5,
c: 6
},
three: {
a: 7,
b: 8,
c: 9
}
};
let myKeys = Object.keys(b);
for (let item of myKeys) {
// вывести ключ
console.log('Ключ', item);
// вывести значение (которое будет другим объектом)
console.log('Значение', b[item]);
// вывести вложенное значение
console.log('Вложенное значение', b[item]['a']);
}
Если у вас есть массив объектов, вы можете перебрать его, используя следующий код:
let c = [
{
a: 1,
b: 2
},
{
a: 3,
b: 4
}
];
for (let item of c) {
// вывести целый объект по отдельности
console.log('объект', item);
// вывести значение внутри объекта
console.log('значение', item['a']);
}
Надеюсь, это поможет вам разобраться с перебором объектов и массивов объектов в JavaScript!
Длина объекта в JavaScript
Итерация через свойства объекта
Как удалить свойство из объекта JavaScript?
Как удалить все дубликаты из массива объектов?
Почему null является объектом и в чем разница между null и undefined?