Создание ключей объекта Dynami c После сопоставления с массивом

Question

Итак, я хочу создать довольно сложную структуру данных, которая выглядит следующим образом:

slots: {
    'slot_1': {
         id: 'slot_1',
         associatedCard: {}
         },
    'slot_2': {
         id: 'slot_2',
         associatedCard: {}
         },
    'slot_3': {
         id: 'slot_3',
         associatedCard: {}
         }
}

У меня есть 10 слотов, которые я хочу заполнить картами (каждый слот может содержать одну карту), поэтому я фактически зацикливая карты, создавая слоты, и я попытался динамически сгенерировать вышеуказанную структуру данных. Вот мой код:

 slots: (() => {
        return {
            ...cards.map((card, index) => {
            return {
                            [`slot_${index + 1}`]: {
                                id: `slot_${index + 1}`,
                                ownedCard: {}
                            }
                        };
                    })
                };
            })(),

Однако я не получаю желаемого. Вот что я получаю:

Как я могу это исправить, чтобы у меня было slot_1 вместо 0 в качестве ключа, slot_2 вместо 1 в качестве ключа, et c ..

Answer 1

Не Array#map элементы, Array#reduce их, вместо этого:

cards.reduce((acc, card, index) => {
    return { ...acc,
            [`slot_${index + 1}`]: {
                id: `slot_${index + 1}`,
                ownedCard: {}
            }
        };
    }, {})

Метод .map даст массив новых предметов на основе старых. А так как вы возвращаете объект, вы получаете массив объектов. Тем не менее, вы хотите один объект, который имеет все эти ключи. Метод .reduce является более продвинутым (например, может делать больше вещей), и он превращает массив в «одно значение» -> следовательно уменьшает . Желаемое значение - один объект, поэтому вы можете просто объединить каждый из них.

Альтернативой использованию спредовой нотации является использование Object.assign и повторное использование одного и того же объекта. делать клон каждый раз:

cards.reduce((acc, card, index) => {
    return Object.assign{acc, {
            [`slot_${index + 1}`]: {
                id: `slot_${index + 1}`,
                ownedCard: {}
            }}
        };
    }, {});

Если вы хотите сохранить .map, то вы все равно можете связать это в .reduce:

cards.map((card, index) => {
    return {
            [`slot_${index + 1}`]: {
                id: `slot_${index + 1}`,
                ownedCard: {}
            }
        };
})
.reduce((acc, obj) => ({...acc, ...obj}));

или

cards.map((card, index) => {
    return {
            [`slot_${index + 1}`]: {
                id: `slot_${index + 1}`,
                ownedCard: {}
            }
        };
})
.reduce((acc, obj) => Object.assign(acc, obj), {});

Answer 2

Проблема в том, что map возвращает массив, поэтому вы получаете пронумерованные ключи. Вам нужно сделать что-то вроде:

const slots = cards.reduce((obj, card, index) => {
  const id = `slot_${index + 1}`
  obj[id] = {
    id,
    associatedCard: card
  }
  return obj
}, {})