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

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

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

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

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

  1. С помощью цикла.
  2. Методы Object.keys и Object.values.
  3. Метод Object.entries.
  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);

В результате получаем.

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

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

Результат.

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

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

admin
04/12/2019 08:55