JavaScript：将数组对象多字段拆分为带相同年份的独立对象

没问题，这事儿用JavaScript的数组方法就能轻松搞定，我给你写个具体的实现方案：

实现代码 #

const originalArray = [
  { year: "march 2019", turnover: 120, employee: 1000, cars: 232 },
  { year: "april 2019", turnover: 123, employee: 1340, cars: 682 },
  { year: "june 2019", turnover: 1343, employee: 760, cars: 4345 }
];

const targetArray = originalArray.flatMap(item => {
  // 解构提取year字段，剩下的属性打包到rest对象里
  const { year, ...rest } = item;
  // 把rest的键值对转成数组，遍历生成单个属性的新对象
  return Object.entries(rest).map(([key, value]) => ({
    year,
    [key]: value
  }));
});

console.log(targetArray);

代码细节说明 #

咱们来拆解下这段代码的关键逻辑：

• flatMap方法：它先对原数组每个元素执行map操作，再自动把所有返回的子数组扁平化合并成一个大数组，完美匹配我们"单个对象拆成多个对象再合并"的需求
• 解构赋值{ year, ...rest }：ES6的便捷语法，快速把year字段单独拎出来，剩下的所有非year属性自动打包到rest里，不用手动写循环过滤
• Object.entries(rest)：把rest对象转换成键值对数组（比如[["turnover", 120], ["employee", 1000], ...]），方便我们逐个处理每个属性
• 动态对象键[key]：用方括号包裹key，能把遍历到的属性名作为新对象的键，保证每个新对象的结构都是{ year: xxx, 属性名: 属性值 }

运行这段代码后，得到的targetArray完全就是你想要的目标数组结构啦。

内容的提问来源于stack exchange，提问作者タナカ