JS如何将嵌套数组数据扁平化成目标键值对格式？-js教程-PHP中文网

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

碧海醫心

发布： 2025-02-21 16:58:13

原创

901人浏览过

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

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

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

问题描述:

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

<code class="json">{
  "result": [
    {
      "name": "参数1",
      "secondname": ["高度", "马赫数"]
    },
    {
      "name": "参数2",
      "secondname": ["前向", "垂向", "侧向"]
    },
    {
      "name": "参数3",
      "secondname": ["前向", "垂向", "侧向"]
    }
  ]
}</code>

登录后复制

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

<code class="json">{
  "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": "侧向"}
  ]
}</code>

登录后复制

解决方案:

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

即构数智人

即构数智人是由即构科技推出的AI虚拟数字人视频创作平台，支持数字人形象定制、短视频创作、数字人直播等。

查看详情

<code class="javascript">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));</code>

登录后复制

代码解释:

flatMap: 首先使用 flatMap 方法遍历原始 result 数组中的每个对象。flatMap 会将每个对象映射到一个新数组，然后将这些数组扁平化成一个新的数组。
map (内部): 对于每个对象，内部的 map 方法遍历 secondname 数组，为每个 secondname 元素创建一个新的对象 { name: item.name, secondname: secondName }。
结果: 最终 flattenedResult 数组包含了所有转换后的键值对对象。
目标格式: 最后，将 flattenedResult 数组放入 { result: ... } 对象中，形成目标格式的 JSON 数据。