javascript 从数组创建对象

zynd9foi  于 2022-11-20  发布在  Java
关注(0)|答案(6)|浏览(183)

我 想 从 一 个 数组 中 的 列表 创建 一 个 对象 。 我 有 一 个 动态 的 数组 , 看 起来 像 这样 :
x1月 1 日
我 想 用 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: ...,
      ...
    }

格式
请 帮忙 , 谢谢 。

svdrlsy4

svdrlsy41#

简单

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" }。函数返回一个对象-这就是函数体被括在括号=> ({ ... })中的原因。Spread运算符在第一次迭代中不执行任何操作,因此red: 10被设置为第一项。
在第二次迭代中,变量为acc = { red: 10 }cur = { id: 20, color: "blue" }。这里,spread运算符 * 扩展 * acc,函数返回{ red: 10, blue: 20 }
第三次迭代acc = { red: 10, blue: 20 }cur = { id: 30, color: "green" },所以当acc在对象内部扩散时,我们的函数返回最终值。

mlnl4t2r

mlnl4t2r2#

来自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)
5sxhfpxr

5sxhfpxr3#

在js中,使用es6 reduce函数对数组执行以下操作

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

deikduxw4#

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

k2fxgqgv5#

我发现你可以直接使用Object.assign()和spread运算符,而不需要使用reducemap函数来增加复杂性。
只要执行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 }
ajsxfq5m

ajsxfq5m6#

使用forEach

const arrayKeys=['KEY1','KEY2','KEY3'];
let object={};
arrayKeys.forEach((key)=>{
      object[key]='property content'
});

相关问题