从数组创建对象

javascript arrays javascript-objects ecmascript-6

2022-08-30 02:58:23

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

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: ...,
      ...
    }

请帮忙，谢谢。

答案 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}), {})

例：

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

输出：

{red: 10, blue: 20, green: 30}

以下是它的工作原理：

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

答案 2

来自 ECMAScript 2019 的新 Object.fromEntries 使得将数组中的值转换为对象中的键变得更加容易，如下所示

const dynamicArray = ["2007", "2008", "2009", "2010"];
const obj = Object.fromEntries(
  dynamicArray.map(year => [year, {
    something: "based",
    on: year
  }])
)

console.log(obj)

或者也许是为了解决你自己的原始问题

const width = 1920
const height = 1080
const dynamicArray = ["2007", "2008", "2009", "2010"];
const obj = Object.fromEntries(
  dynamicArray.map((year, i) => [year, {
    x: (( i + 1) / 5) * width,
    y: height / 2
  }])
)

console.log(obj)