Как Преобразовать Объект в Массив (JS)
Рассмотрим 4 способа, как преобразовать объект в массив при помощи JavaScript. Затем преобразуем массив в объект.
Содержание:
Преобразование объекта в массив
Исходные данные. Пусть у нас есть объект (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);
Результат.

Сегодня мы рассмотрели различные способы, как преобразовать объект в массив, и обратно (массив в объект).
Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.
Поделиться с друзьями:
Статьи из данной категории:
Комментарии (2)
- Алексей
- Мария