JS: преобразуем объект в массив

Привет!

У нас есть как минимум 3 способа, чтобы конвертировать объект в массив.

В массиве есть массив методов. Преобразовав объект в массив, вы получите доступ ко всему этому. Юху! 🥳

const zoo = {
  lion: '🦁',
  panda: '🐼',
};

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

Object.values(zoo);
// ['🦁', '🐼']

Object.entries(zoo);
// [ ['lion', '🦁'], ['panda', '🐼'] ]

Время для истории

Древние времена

Давным-давно, в далекой галактике, проходиться по объектам было не так-то просто. Ок, я немного преувеличил 😅. Но я помню, что всякий раз, когда мне нужно было преобразовать объект в массив, мне приходилось делать что-то вроде этого.

var numbers = {
  one: 1,
  two: 2,
};

var keys = [];

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

keys; // [ 'one', 'two' ]

Я все время был зол и хотел найти лучший способ.

ES6 — Object.keys

И тут появился ES6! Моя жизнь изменилась! Наконец-то у нас есть более простой способ 🥳

Теперь был встроенный метод, который быстро превращает все ключи в моем объекте в массив:

const numbers = {
  one: 1,
  two: 2,
};

Object.keys(numbers);
// [ 'one', 'two' ]

Жизнь была прекрасна! Но потом я снова рассердился. Почему я могу извлекать только ключи, мне тоже нужны значения! Люди всегда хотят большего, не так ли 😂 А потом появился ES2017…

Object.values

Привет, я ES2017 и исполняю все твои пожелания. Теперь вы можете легко извлечь значения в массив одним методом.

const numbers = {
  one: 1,
  two: 2,
};

Object.values(numbers);
// [ 1, 2 ]

Object.entries

Но ES2017 на этом не остановился. Сейчас я могу получить и ключи, и значения. Я потрясен.

const numbers = {
  one: 1,
  two: 2,
};

Object.entries(numbers);
// [ ['one', 1], ['two', 2] ]

Object.entries + Деструктуризация

const numbers = {
  one: 1,
};

const objectArray = Object.entries(numbers);

objectArray.forEach(([key, value]) => {
  console.log(key); // 'one'
  console.log(value); // 1
});

ES6, ты просто лучший!

Конец истории

А теперь идите и поиграйтесь со всеми этими удивительными методами 😊

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

У Object.keys лучшая поддержка. Когда я говорю лучшая — это означает, что его поддерживает Internet Explorer. Object.values и Object.entries, к сожалению, не поддерживаются IE. Но всегда есть полифил для них.

Polyfill

• MDN: Object.keys
• MDN: Object.values
• MDN: Object.entries

Но это еще не все!

Ваш следующий вопрос может заключаться в том, как мне преобразовать массив обратно в объект. Есть новый метод Object.fromEntries. По сути, это противоположность Object.entries.

const array = [
  ['one', 1],
  ['two', 2],
];

Object.fromEntries(array);
// { one: 1, two: 2 }

MDN: Object.fromEntries

Это очень новый метод, так что поддержка есть не везде.

Спасибо за внимание!

Вольный перед статьи.