javascript - 从数组创建对象

Question

我想从数组中的列表创建一个对象。我有一个动态数组，应该看起来像这样:

var dynamicArray = ["2007", "2008", "2009", "2010"];

我想用一些 JavaScript ES6 制作一个像这样的对象:

const obj = {
    2007: {
        x: width / 5,
        y: height / 2
    },
    2008: {
        x: (2 / 5) * width,
        y: height / 2
    },
    2009: {
        x: (3 / 5) * width,
        y: height / 2
    },
    2010: {
        x: (4 / 5) * width,
        y: height / 2
    }
}

不要担心内部对象。我只想创建这样的结构:

 obj = {
      2007: ...,
      2008: ...,
      ...
    }

请帮忙，谢谢。

Answer 1

简单

 const obj = {};

 for (const key of yourArray) {
      obj[key] = whatever;
 }

或者如果您更喜欢“功能性”风格:

 const obj = yourArray.reduce((o, key) => Object.assign(o, {[key]: whatever}), {});

使用现代对象展开运算符:

const obj = yourArray.reduce((o, key) => ({ ...o, [key]: whatever}), {})

例子:

console.log(
[
  { id: 10, color: "red" },
  { id: 20, color: "blue" },
  { id: 30, color: "green" }
].reduce((acc, cur) => ({ ...acc, [cur.color]: cur.id }), {})
);

这是它的工作原理:

reduce 使用空对象(末尾为空 {})进行初始化，因此第一次迭代变量为 acc = {} cur = { id: 10, color: "red"}.函数返回一个对象——这就是为什么函数体被包裹在括号 => ({ ... }) 中的原因。展开运算符在第一次迭代时不执行任何操作，因此 red: 10 被设置为第一项。

在第二次迭代中变量是 acc = { red: 10 } cur = { id: 20, color: "blue"} 。这里展开运算符展开 acc 并且函数返回{ red: 10, blue: 20 } 。

第三次迭代 acc = { red: 10, blue: 20 } cur = { id: 30, color: "green"} ，所以当 acc 散布在对象内部，我们的函数返回最终值。