/ Вопросы и ответы по JavaScript / Как из объекта сделать массив JavaScript

Как из объекта сделать массив JavaScript

154

Наконец, с ES2017 официально появилось 3 метода преобразования объектов в массивы. В этой статье я вам покажу один из методов.

Перед статьей хочу сказать, что если вы хотите купить windows, то вы можете купить windows 10 в киеве

Давайте я вам сначала покажу все методы преобразования объекта в массив:


const zoo = {
  first_animal: 'lion',
  second_animal: 'panda'
};

Object.keys(zoo)
// ['first_animal', 'second_animal']

Object.values(zoo)
// ['lion', 'panda']

Object.entries(zoo)
// [ ['first_animal', 'lion'], ['second_animal', 'panda'] ]

Как было раньше

Раньше было не так легко преобразовать объект в массив. Для этого надо было написать следущий код:


var numbers = {
 city: "London",
 county: "Russia"
};

var keys = [];

for (var number in numbers) {
  if(numbers.hasOwnProperty(number)){
    keys.push(number)
  }
}

keys; // [ 'London', 'Russia' ]

Object.keys - ES2016

В ES2016 вы могли легко из объекта сделать массив с помощью этого кода:


const numbers = {
  city: "London",
  county: "Russia"
}

Object.keys(numbers);
// [ 'London', 'Russia' ]

Object.values

Теперь вы можете легко извлечь значения в массив этим методом:


const numbers = {
  city: "New York",
  another_city: "Los Angeles"
}

Object.values(numbers);
// [ "New York", "Los Angeles" ]

Object.entries

Но ES2017 появился еще один метод, но который немного отличается выводом:


const numbers = {
  city: "New York",
  another_city: "Los Angeles"
}

Object.entries(numbers);
// [ ['city', "New York"], ['another_city', "Los Angeles"] ]

Object.entries + Разрушение

Вот есть еще один крутой метод, как объект превратить в массив только уже с forEach + Object.entries:


const numbers = {
  city: "New York",
}

const objectArray = Object.entries(numbers);

objectArray.forEach(([key, value]) => {
  console.log(key); // 'city'
  console.log(value); // New York
})

Поддержка браузера

Object.keys имеет лучшую поддержку. Когда я говорю лучшую, это означает, что он поддерживается Internet Explorer. Другие, Object.values ??и Object.entries, к сожалению, не поддерживаются Internet Explorer.

Заключение

Надеюсь вам помогла моя статья. Удачного вам кодинга, и да, не забудь подписаться на мою группу вк - https://vk.com/rapprogtrain