Как перебирать объекты в JavaScript

kak perebirat obekty v javascript

Время от времени вам может понадобиться перебирать объекты в JavaScript. Единственный способ сделать это к ES6 был с помощью a for...in петля.

Проблема с а for...in цикл состоит в том, что он берет свойства в цепочке прототипов. Когда вы перебираете объект с помощью for...in цикла, вам нужно проверить, принадлежит ли свойство объекта. Вы можете сделать это с помощью hasOwnProperty.

for (var property in object) {  if (object.hasOwnProperty(property)) {    // Do things here  }}

Нам больше не нужно полагаться for...in и hasOwnProperty сейчас. Есть лучший способ.

Лучший способ перебирать объекты

Лучший способ перебирать объекты сначала превратить объект в массив. Затем вы перебираете массив.

Вы можете превратить объект в массив тремя методами:

  1. Object.keys
  2. Object.values
  3. Object.entries

Object.keys

Object.keys создает массив, содержащий свойства объекта. Вот пример.

const fruits = { apple: 28, orange: 17, pear: 54 };
const keys = Object.keys(fruits);

console.log(keys); // ["apple", "orange", "pear"]

Object.values

Object.values создает массив, содержащий значение каждого свойства в объекте. Вот пример:

const fruits = { apple: 28, orange: 17, pear: 54 };
const values = Object.values(fruits);

console.log(values); // [28, 17, 54]

Объект.записи

Object.entries создает массив массивов. Каждый внутренний массив имеет два элемента. Первый пункт – имущество; второй пункт – значение.

Вот пример:

const fruits = { apple: 28, orange: 17, pear: 54 };
const entries = Object.entries(fruits);

console.log(entries); // [["apple", 28], ["orange", 17], ["pear", 54]]

Мой любимый из трех Object.entriesпоскольку вы получаете значение как ключа, так и свойства.

Цикл по массиву

После того, как вы превратили объект в массив с помощью Object.keys, Object.valuesили Object.entriesвы можете прокрутить его так, будто это обычный массив.

const fruits = { apple: 28, orange: 17, pear: 54 };
// Looping through arrays created from Object.keys
const keys = Object.keys(fruits);

for (const key of keys) {  
  console.log(keys);
}

// ["apple", "orange", "pear"]
// ["apple", "orange", "pear"]
// ["apple", "orange", "pear"]

Если вы используете Object.entriesвы можете деструктурировать массив на ключ и свойство.

const fruits = { apple: 28, orange: 17, pear: 54 };
const entries = Object.entries(fruits);

for (const [fruit, count] of entries) {
  console.log(`There are ${count} ${fruit}s`);
}

// "There are 28 apples"
// "There are 17 oranges"
// "There are 54 pears"

Подведению

Лучший способ перебирать объекты — сначала превратить их в массив одним из трех методов.

  1. Object.keys
  2. Object.values
  3. Object.entries

Затем вы перебираете результаты как обычный массив.

Если этот урок помог вам, возможно, вам понравится обучение JavaScript, где вы научитесь создавать все, что пожелаете, с нуля. Регистрация на Learn JavaScript открывается в июле 2018 года (очень скоро!).

Спасибо, что прочли. Помогла ли вам эта статья однажды? Если я это сделал, надеюсь, вы поделитесь этим; Вы можете просто помочь кому-то, кто чувствовал то же, что и вы до прочтения статьи. Спасибо.

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

Добавить комментарий

Ваш адрес email не будет опубликован.