如何在JavaScript中根据数组对象属性生成多个独立对象？

你的代码无法正常运行，核心问题出在箭头函数的返回值逻辑：

• 你写的({from:from},{to:to},{opacity:opacity})属于逗号运算符表达式，JavaScript会忽略前面的对象，只返回最后一个{opacity:12}；同时map的回调需要返回单个值，但你需要的是每个原数组元素对应一个包含多个对象的数组，所以写法逻辑不匹配。

下面是两种可行的正确写法：

方法一：用flatMap直接处理 #

flatMap会自动将回调返回的数组展开，刚好满足需求：

const data = [{ 
  color:"red",
  to:1,
  from:2,
  opacity:12
}]

const converted = data.flatMap(({ from, to, opacity }) => [
  { from },
  { to },
  { opacity }
])

方法二：map配合flat展开 #

先通过map把每个元素转换成包含三个对象的数组，再用flat展开成一维数组：

const data = [{ 
  color:"red",
  to:1,
  from:2,
  opacity:12
}]

const mappedData = data.map(({ from, to, opacity }) => [
  { from },
  { to },
  { opacity }
]).flat()

另外，当对象属性名和变量名一致时，可以用{ from }代替{ from: from }的写法，让代码更简洁。

内容的提问来源于stack exchange，提问作者James