Получить профессию в SkyproJavaScript: преобразование массива в объект с числовыми ключами
Быстрый ответ
Преобразуйте массив в объект с лёгкостью, используя 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'}Использование 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'}Визуализация
Вот наглядный пример преобразования массива в объект:
Массив: [ 'JavaScript', 'Python', 'Ruby' ] 📚 превращается в объект 🏡:const bookshelf = {
'0': 'JavaScript',
'1': 'Python',
'2': 'Ruby'
};До: 📚📚📚
('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 — подробное изучение свойств объектов.