javascript - JS给对象赋值导致对象重复

Question

这在我看来很简单，但我似乎无法获得正确的输出。我想要做的就是遍历数据列表并为另一个对象分配一个对象属性，就像这样

{
  Foo: {
    firstname: "sally",
    lastname: "jenkins"
  },
  Bar: {
    firstname: "john",
    lastname: "smith"
  }
}

然而，使用这段代码，对象中的每个元素都被赋予了相同的值。

let formInfo = {}
let spriteAndId = {}
forms.forEach((form) => {
  spriteAndId["id"] = parseInt(form.pokemon.url.substr(form.pokemon.url.length - 6), 10);
  spriteAndId["url"] = spriteUrlGen(spriteAndId["id"]);
  formInfo[form.pokemon.name] = spriteAndId;
})

如果这很难理解，我深表歉意，但它所做的只是为空对象 spriteAndId 分配一个 url(“https://example.com”)和 id(1234)。变量 forms 是一个数组，其中已有数据。

如果我在循环中记录 spriteAndId，我会在每次迭代中得到带有全新值的正确输出，但它似乎只是将这些迭代中的一个分配给父对象中的每个元素。

我想也许我对 forEach 的理解不够好，所以我使用 for 循环实现了它并得到了相同的结果。我无法理解为什么它将同一个对象分配给 formInfo 的所有值。

希望有人能阐明我在这里缺少的东西。提前致谢!

Answer 1

    const formInfo = Object.keys(form)
     .map(obj => ({
          [form[obj].name]: {
            id: form[obj].id,
            sprite: spriteUrlGen(form[obj].id)
           }
     }))
     .reduce((prev, curr) => ({ ...prev, curr }, {}))

如果我理解你想要实现的是一个最终的表单对象，其中 pokemon 的名称作为键，数据(sprite 和 Id)作为值。 Object.keys() 返回对象所有属性的数组。你可以将它们映射到它们之上并转换数据，在这种情况下，我们返回一个对象，其中 pokemon 名称作为键，id，sprite 作为值。请注意包含对象键的 []，这就是使值动态的原因，否则如果您对键进行硬编码，它将无法工作。现在所有这些值都已映射/转换为对象，reduce 函数将它们全部包含在单个对象中，从{}一个空对象

开始