Перебор объектов в Javascript

Один из моих коллег спросил меня сегодня о том, как перебирать объекты в javascript, и я подумал, что это будет хорошая возможность изложить в небольшой статье. 🤓

Существует несколько методов перебора объектов в Javascript:

  • Objects.keys()

  • Objects.values()

  • Objects.entries()

  • for ... in loop

Рассмотрим объект ниже

const superHeroNicknames = {
  'IronMan': 'Mecha Man 🚀',
  'Thor': 'Thunder Bro 🌩',
  'Hulk': 'Green Guy 🟩'
}
Вход в полноэкранный режим Выйти из полноэкранного режима

Мы будем использовать эти данные до конца этой статьи. Давайте перейдем к объяснению!

1. Objects.keys()

Objects.keys() был представлен в релизе ES6. Поскольку название метода говорит «keys», этот метод возвращает массив ключей объекта.

const keyRes = Objects.keys(superHeroNicknames);
for (let key of keyRes) {
    console.log(key + " ==> " + p[key]);
};

// Result:
// IronMan ==> Mecha Man 🚀
// Thor ==> Thunder Bro 🌩
// Hulk ==> Green Guy 🟩
Вход в полноэкранный режим Выйти из полноэкранного режима

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

2. Objects.values()

Objects.values() является противоположностью Objects.keys(). Вместо того, чтобы возвращать ключи, он возвращает массив значений объекта. Этот метод очень полезен для быстрого получения списка значений всех свойств.

const keyVals = Objects.value(superHeroNicknames);
for (let val of keyVals) {
    console.log(val);
};

// Result:
// Mecha Man 🚀
// Thunder Bro 🌩
// Green Guy 🟩
Вход в полноэкранный режим Выход из полноэкранного режима

3. Object.entries()

Object.entries() был введен в ES8. Этот метод возвращает список, состоящий из массива ключей и значений. Этот метод очень полезен для преобразования объекта в массив. ✨

const res = Objects.keys(superHeroNicknames);
for (let [key, val] of res) {
    console.log(`${key} ==> ${val}`);
};

// Result:
// IronMan ==> Mecha Man 🚀
// Thor ==> Thunder Bro 🌩
// Hulk ==> Green Guy 🟩
Вход в полноэкранный режим Выйти из полноэкранного режима

Обратите внимание, что этот метод все еще не поддерживается Internet Explorer, если вы ориентируетесь на эти браузеры, может потребоваться полифилл.

4. for ... in loop

Метод for ... in loop — это еще один способ перебора объектов. Этот метод уже поддерживается всеми браузерами, включая Internet Explorer.

for (let key in superHeroNicknames) {
      if (!superHeroNicknames.hasOwnProperty(key)) {
        //The current property is not a direct property of p
        continue;
    }
    console.log(`${key}: ${superHeroNicknames[key]}`);
}

// Result:
// IronMan ==> Mecha Man 🚀
// Thor ==> Thunder Bro 🌩
// Hulk ==> Green Guy 🟩
Вход в полноэкранный режим Выход из полноэкранного режима

При использовании метода for ... in loop есть одно предостережение: он будет перебирать все свойства по цепочке прототипов. Поэтому всегда используйте Object.hasOwnProperty(), чтобы определить, действительно ли текущее свойство в итерации является свойством объекта. ❗️


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

Оцените статью
Procodings.ru
Добавить комментарий