Как Преобразовать Объект в Массив (JS)

Рассмотрим 4 способа, как преобразовать объект в массив при помощи JavaScript. Затем преобразуем массив в объект.

Содержание:

  1. Преобразование объекта в массив:
    1. с помощью цикла;
    2. Object.keys и Object.values;
    3. Object.entries;
    4. деструктуризация.
  2. Как преобразовать массив в объект.

Преобразование объекта в массив

Исходные данные. Пусть у нас есть объект (object).

const populations = {
    russia: 146780,
    ukraine: 42153,
    belarus: 9475
}

Нам необходимо преобразовать его в массив (array). Рассмотрим 4 способа.

1. С помощью цикла

Преобразуем объект в массив, используя цикл for. Данный способ использовался ранее, до ES6.

const countries = [];

for (let population in populations) {
    if (populations.hasOwnProperty(population)) {
        countries.push(population)
    }
}

Получаем:

Объект из массива с помощью цикла js

2. Преобразование объекта в массив с помощью методов Object.keys и Object.values

Данный способ включает в себя ES6 и ES8 синтаксис.

// ключи объекта преобразуем в массив (ES6)
Object.keys(populations);

// значения объекта преобразуем в массив (ES8)
Object.values(populations);
Как преобразовать объект в массив с помощью цикла js

Object.values не поддерживает IE. Polyfill Object.values.

3. Преобразование объекта в массив с помощью метода Object.entries

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

Object.entries(populations);

Получим:

Объект в массив Object.entries

Object.entries не поддерживает IE. Polyfill Object.entries.

4. Деструктуризация объекта

Результатом предыдущего способа были вложенные массивы.

Деструктуризирующее присваивание позволяет извлекать несколько значений из объекта/массива в отдельные переменные.

Только посмотрите что можно получить, используя деструктуризацию.

const abjArr = Object.entries(populations);

abjArr.forEach(([key, value]) => {
    console.table(key, value);
});

Или так:

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

Получим:

Результат деструктуризации объекта

Как преобразовать массив в объект

Чтобы преобразовать массив в объект необходимо использовать метод Object.fromEntries.

Поддержка большинства браузеров, но не всех - MDN: Object.fromEntries.

const populations = [
    ["russia", 146780],
    ["ukraine", 42153],
    ["belarus", 9475]
];

Object.fromEntries(populations);

Результат.

Преобразование массива в объект

Сегодня мы рассмотрели различные способы, как преобразовать объект в массив, и обратно (массив в объект).