Как Преобразовать Объект в Массив (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)
    }
}

Получаем:

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

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

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

// значения объекта преобразуем в массив (ES8)
Object.values(populations);

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

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

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

Object.entries(populations);

Получим:

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);

Результат.

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