JavaScript中解构对象数组并添加数组键为新值的实现问题

需要在JavaScript中解构对象数组，生成包含原对象键作为新字段值的新对象数组。

原对象数组：

[
  {
    "Semester One": [
      { id: "1", name: "Name1" },
      { id: "2", name: "Name2" }
    ],
    "Semester Two": [
      { id: "3", name: "Name3" },
      { id: "4", name: "Name4" }
    ]
  }
]

期望输出：

[
  { id: "1", name: "Name1", semester: "Semester One" },
  { id: "2", name: "Name2", semester: "Semester One" },
  { id: "3", name: "Name3", semester: "Semester Two" },
  { id: "4", name: "Name4", semester: "Semester Two" }
]

已尝试的代码：

const arrObj = [];
paperList.forEach((element) => {
  for (const key in element) {
    element[key].forEach((e, i) => {
      arrObj.push({
        ...e,
        semester: "", // 不知道怎么获取对应的键值
        isChecked: "",
      });
    });
  }
});
console.log(arrObj);

你已经接近正确结果了——for...in循环里的key变量就是你要的学期名称，直接把它赋值给semester字段即可。

修正后的代码 #

const arrObj = [];
paperList.forEach((element) => {
  for (const key in element) {
    element[key].forEach((e) => {
      arrObj.push({
        ...e,
        semester: key, // 直接使用循环中的key变量
        isChecked: ""
      });
    });
  }
});
console.log(arrObj);

更简洁的链式写法 #

如果想让代码更精简，可以用flatMap和Object.entries组合实现：

const arrObj = paperList.flatMap(item => 
  Object.entries(item).flatMap(([semester, students]) => 
    students.map(student => ({ ...student, semester, isChecked: "" }))
  )
);
console.log(arrObj);

• Object.entries(item)会将对象转换为键值对数组，比如[["Semester One", [...]], ["Semester Two", [...]]]
• 两层flatMap用来逐层扁平化嵌套数组，最后通过map给每个学生对象添加semester和isChecked字段

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