5 способов проитерировать объект JS

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

Свойства объектов имеют специальные "флаги". Для того, чтобы узнать об этом подробнее рекомендую прочитать данную статью.

1. for...in цикл

Этот цикл перебирает перечисляемые (enumerable) свойства объекта.

Свойства НЕ должны быть Symbol.

for(variable in object) {
  statement
}

• variable - ключ свойств, присвоенный переменной на каждой итерации
• object - итерируемый объект

var obj = {a: 1, b: 2, c: 3};
    
for (const prop in obj) {
  console.log(`obj.${prop} = ${obj[prop]}`);
}

// Ожидаемый вывод:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"

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

var triangle = {a: 1, b: 2, c: 3};

function ColoredTriangle() {
  this.color = 'red';
}

ColoredTriangle.prototype = triangle;

var obj = new ColoredTriangle();

for (const prop in obj) {
  if (obj.hasOwnProperty(prop)) {
    console.log(`obj.${prop} = ${obj[prop]}`);
  } 
}

// Ожидаемый вывод:
// "obj.color = red"

Более подробно о for...in

2. Object.keys

Этот метод возвращает массив перечисляемых (enumerable) ключей объекта.

const obj = {
  key1: 'string',
  key2: 42,
  key3: false
};

console.log(Object.keys(obj));
// Ожидаемый вывод: 
// ["key1", "key2", "key3"]

Более подробно о Object.keys()

3. Object.values

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

let obj = {
  key1: "value1",
  key2: "value2",
  key3: "value3"
}

let items = Object.values(obj);

console.log(items);
// Ожидаемый вывод:
// ["value1", "value2", "value3"]

Более подробно о Object.values()

4. Object.getOwnPropertyNames

Данный метод возвращает массив всех свойств, которые находятся непосредственно в объекте, включая неперечисляемые (non-enumerable), исключая лишь те, которые используют Symbol.

const obj = {
  key1: 1,
  key2: 2,
  key3: 3
};

console.log(Object.getOwnPropertyNames(obj));

// Ожидаемый вывод: 
// ["key1", "key2", "key3"]

Более подробно о Object.getOwnPropertyNames()

5. Object.entries

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

В данном примере используется деструктуризация массива в цикле [key, value]. Также можно сохранять пару key, value в какую-то переменную - const entries = Object.entries(obj)

const obj = {
  key1: 'string',
  key2: 42
};

for (const [key, value] of Object.entries(obj)) {
  console.log(`${key}: ${value}`);
}

// Ожидаемый вывод
// (порядок не гарантирован):
// "key1: string"
// "key2: 42"

Более подробно о Object.entries()

Итерируйте с умом!💫