JS如何将嵌套数组数据扁平化成目标键值对格式？

JavaScript 嵌套数组扁平化及键值对转换

本文介绍如何将具有嵌套数组结构的 JSON 数据，转换为目标键值对格式。

问题描述:

给定如下格式的接口数据：

{
  "result": [
    {
      "name": "参数1",
      "secondname": ["高度", "马赫数"]
    },
    {
      "name": "参数2",
      "secondname": ["前向", "垂向", "侧向"]
    },
    {
      "name": "参数3",
      "secondname": ["前向", "垂向", "侧向"]
    }
  ]
}

需要将其转换为以下目标格式：

{
  "result": [
    {"name": "参数1", "secondname": "高度"},
    {"name": "参数1", "secondname": "马赫数"},
    {"name": "参数2", "secondname": "前向"},
    {"name": "参数2", "secondname": "垂向"},
    {"name": "参数2", "secondname": "侧向"},
    {"name": "参数3", "secondname": "前向"},
    {"name": "参数3", "secondname": "垂向"},
    {"name": "参数3", "secondname": "侧向"}
  ]
}

解决方案:

可以使用 reduce 和 flatMap 方法高效地实现数据转换：

智能证件照

证件照一站式服务

下载

const data = {
  "result": [
    {
      "name": "参数1",
      "secondname": ["高度", "马赫数"]
    },
    {
      "name": "参数2",
      "secondname": ["前向", "垂向", "侧向"]
    },
    {
      "name": "参数3",
      "secondname": ["前向", "垂向", "侧向"]
    }
  ]
};

const flattenedResult = data.result.flatMap(item => 
  item.secondname.map(secondName => ({ name: item.name, secondname: secondName }))
);

const targetFormat = { result: flattenedResult };

console.log(JSON.stringify(targetFormat, null, 2));

代码解释:

1. flatMap: 首先使用 flatMap 方法遍历原始 result 数组中的每个对象。flatMap 会将每个对象映射到一个新数组，然后将这些数组扁平化成一个新的数组。

2. map (内部): 对于每个对象，内部的 map 方法遍历 secondname 数组，为每个 secondname 元素创建一个新的对象 { name: item.name, secondname: secondName }。

3. 结果: 最终 flattenedResult 数组包含了所有转换后的键值对对象。

4. 目标格式: 最后，将 flattenedResult 数组放入 { result: ... } 对象中，形成目标格式的 JSON 数据。

此方法比原先的 reduce 和 concat 方法更简洁高效，充分利用了 flatMap 的特性，避免了不必要的数组拼接操作。