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
    }
}

不要担心内部对象，但只是想要这样的make结构：

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

示例：

[
  { 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" }。函数返回一个对象 - 这就是函数体包含在括号=> ({ ... })中的原因。 Spread运算符在第一次迭代时不执行任何操作，因此将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传播到对象内部时，我们的函数会返回最终值。

Answer 2

在js中使用es6减少数组的函数我这样做

let x = [1,2,3]
let y = x.reduce((acc, elem) => {
  acc[elem] = elem // or what ever object you want inside
  return acc
}, {})
console.log(y) // {1:1, 2:2, 3:3}

Answer 3

ECMAScript 2019中的新Object.fromEntries使得将数组中的值转换为对象中的键（如Follows）变得更加容易

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

console.log(obj)

Answer 4

var keys = ['key1', 'key2', 'key3']

var object = Object.assign({}, ...Object.entries({...keys}).map(([a,b]) => ({ [b]: 'someValue' })))
console.log(object)

这将产生

{ key1: 'someValue', key2: 'someValue', key3: 'someValue' }

Answer 5

我发现您实际上可以直接将Object.assign()与价差运算符一起使用。无需使用reduce或map函数引入更多复杂性。

只需执行Object.assign(...yourArray, {})，您就会得到想要的结果。如果您想将对象数组合并到另一个对象中，则可以调用Object.assign(...yourArray, yourObject)，它也可以正常工作。

您也可以使用相同的方法将两个数组合并为一个对象，即使其中一个数组不包含对象，而仅包含原始值-但是，如果这样做，则需要确保至少一个数组可以容纳仅作为原始对象的对象将默认为其索引为key，因此，如果存在重复的键，则会出错。

但是，出于OP的目的，他没有错误的风险，因为他正在与空对象合并，这是最安全的方法。

const arr = [
  { a: 0 },
  { c: 1 },
  { e: 2 },
];

const obj = Object.assign(...arr, {});

console.log(obj)

// Results to:
// Object { a: 0, c: 1, e: 2 }

Answer 6

你可以使用：

     dynamicArray.map(value => ({'key': value, 'val': 'whatever you want'}));

从数组创建对象

6 个答案: