JavaScript: преобразование массива в объект с числовыми ключами

Пройдите тест, узнайте какой профессии подходите

Я предпочитаю

Работать самостоятельно и не зависеть от других

Работать в команде и рассчитывать на помощь коллег

Организовывать и контролировать процесс работы

Быстрый ответ

Преобразуйте массив в объект с лёгкостью, используя Object.fromEntries:

Скопировать код

const arr = ['a', 'b', 'c'];
const obj = Object.fromEntries(arr.map((v, i) => [i, v]));
console.log(obj); // {0: 'a', 1: 'b', 2: 'c'}

Кинга Идем в IT: пошаговый план для смены профессии

Использование reduce для преобразования массива в объект

Метод reduce() идеально подходит для элегантного и эффективного превращения массива в объект:

Скопировать код

const array = ['A', 'B', 'C'];
const objectWithReduce = array.reduce((obj, item, index) => {
  obj[index] = item;
  return obj;
}, {});
console.log(objectWithReduce); // {0: 'A', 1: 'B', 2: 'C'}

Обработка отсутствующих элементов в массивах

Если в массиве есть пропущенные элементы, это может помешать преобразованию, но мы можем с этим справиться:

Скопировать код

const sparseArray = ['A', , 'C'];
const objectFromSparseArray = sparseArray.reduce((obj, item, index) => {
  if (item !== undefined) {
    obj[index] = item;
  }
  return obj;
}, {});
console.log(objectFromSparseArray); // {0: 'A', 2: 'C'}

Используем оператор расширения ES6 для преобразования массива в объект

Оператор расширения ES6 {...array} позволяет без труда превратить массив в объект:

Скопировать код

const es6Array = ['X', 'Y', 'Z'];
const objectWithSpread = {...es6Array};
console.log(objectWithSpread); // {0: 'X', 1: 'Y', 2: 'Z'}

Массив с обратной обработкой — метод reduceRight

Если нужно изменить направление обработки, reduceRight() — подходящий инструмент:

Скопировать код

const reversedArray = ['end', 'middle', 'start'];
const objectWithReduceRight = reversedArray.reduceRight((obj, item, index) => {
  obj[index] = item;
  return obj;
}, {});
console.log(objectWithReduceRight); // {0: 'start', 1: 'middle', 2: 'end'}

Визуализация

Вот наглядный пример преобразования массива в объект:

Markdown

Скопировать код

Массив: [ 'JavaScript', 'Python', 'Ruby' ] 📚 превращается в объект 🏡:

Скопировать код

const bookshelf = {
  '0': 'JavaScript', 
  '1': 'Python', 
  '2': 'Ruby'
};

Markdown

Скопировать код

До: 📚📚📚
('JavaScript', 'Python', 'Ruby')

После: 🏠📖
{
  '0': 'JavaScript',
  '1': 'Python',
  '2': 'Ruby'
}

Таким образом, элементы массива становятся свойствами объекта, как книги, расставленные на полке.

Полифиллы для поддержки старых браузеров

Для гарантированной работы кода в старых браузерах используются полифиллы:

Полифилл для Array.prototype.reduce:

Скопировать код

if (!Array.prototype.reduce) {
  Array.prototype.reduce = function(callback /*, initialValue*/) {
    // Чтобы каждый браузер обладал этим методом
  };
}

Полифилл для Object.keys:

Скопировать код

if (!Object.keys) {
  Object.keys = function(obj) {
    // Доступ к новым возможностям
  };
}

Продвинутое использование reduce

Обратите внимание, как reduce позволяет выполнять удивительные вещи, меняя местами ключи и значения в массиве объектов:

Скопировать код

const people = [{name: 'Alice'}, {name: 'Bob'}, {name: 'Charlie'}];
const swapKeyValue = people.reduce((obj, item, index) => {
  const key = Object.keys(item)[0];
  obj[item[key]] = index;
  return obj;
}, {});
console.log(swapKeyValue); // {Alice: 0, Bob: 1, Charlie: 2}

Ключи объектов и индексы массива

Числовые ключи в объектах – это строки, обладающие своей логикой, упорядочивающие элементы в соответствии с их порядком добавления в объект.

Полезные материалы

Object.fromEntries() – JavaScript | MDN — детальное руководство по превращению массива в объект.
Array.prototype.reduce() – JavaScript | MDN — углублённое описание метода .reduce().
How to call reduce on an array of objects to sum their properties? – Stack Overflow — обсуждение работы reduce.
Convert object array to hashMap, indexed by an attribute value of the Object – Stack Overflow — о преобразовании массивов объектов в хеш-карту.
[JavaScript: The Definitive Guide, 6th Edition [Book]](https://www.oreilly.com/library/view/javascript-the-definitive/9781449393854/) — проводник по миру JavaScript.
Object.keys, values, entries – JavaScript Info — подробное изучение свойств объектов.

Свежие материалы

Обзор канала The Net Ninja

6 сентября 2024

Видео уроки по JavaScript

6 сентября 2024

Каналы на русском языке

6 сентября 2024