javascript - 映射到数组后创建动态对象键

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 作为键，等等？

Answer 1

不要Array#map项目，Array#reduce相反，他们:

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

.map 方法将根据旧项目生成新项目的数组。由于您返回一个对象，因此您将获得一个对象数组。然而，您想要的是拥有所有这些键的一个对象。 .reduce 方法更高级(例如，可以做更多的事情)，它将数组转换为“一个值” -> 因此 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), {});