本教程详细介绍了如何在 JavaScript 中，将一个包含单个扁平化对象的数组，根据其键名的前缀（如"0key1"、"1key1"）拆分成多个独立的、结构清晰的对象数组。文章通过示例代码演示了如何遍历原始对象的键，动态创建并填充新对象，从而实现数据的重塑，提升数据可读性和处理效率。
在数据处理和前端开发中，我们有时会遇到一种特殊的数据结构：一个数组中只包含一个对象，而这个对象内部的属性键名却通过某种前缀（例如数字索引）来区分不同的逻辑实体。这种扁平化的结构虽然紧凑，但在需要对每个逻辑实体独立操作时，会显得不够直观和便捷。本教程旨在提供一种高效的 JavaScript 方法，将这种单行扁平化的对象数组重塑为多行独立的、结构清晰的对象数组。
场景描述与问题分析
假设我们有一个 JavaScript 数组，其中只有一个对象。这个对象的键名按照 NkeyX 的模式命名，其中 N 是一个数字索引，表示逻辑上的分组，而 keyX 是该分组下的具体属性。
原始数据结构示例：
立即学习“Java免费学习笔记（深入）”；
本文档主要讲述的是j2me3D游戏开发简单教程； 如今，3D图形几乎是任何一部游戏的关键部分，甚至一些应用程序也通过用3D形式来描述信息而获得了成功。如前文中所述，以立即模式和手工编码建立所有的3D对象的方式进行开发速度很慢且很复杂。应用程序中多边形的所有角点必须在数组中独立编码。在JSR 184中，这称为立即模式。希望本文档会给有需要的朋友带来帮助；感兴趣的朋友可以过来看看
const originalData = [{
"0key1": "a33",
"0key2": "Aab",
"0key3": "i",
"1key1": "e78",
"1key2": "Vib",
"1key3": "j",
"2key1": "c99",
"2key2": "Aig",
"2key3": "k"
}];在这个例子中，0key1、0key2、0key3 属于第一个逻辑实体，1key1、1key2、1key3 属于第二个，以此类推。我们的目标是将这些逻辑实体分离出来。
期望的输出结构：
[
{"0key1":"a33","0key2":"Aab","0key3":"i"},
{"1key1":"e78","1key2":"Vib","1key3":"j"},
{"2key1":"c99","2key2":"Aig","2key3":"k"}
]解决方案：基于键名前缀的动态分组
解决此问题的核心思路是遍历原始对象的每一个键，提取出用于分组的前缀，然后根据这个前缀动态地构建新的对象。
核心逻辑步骤：
- 访问内部对象： 由于输入是一个包含单个对象的数组，我们首先需要访问到这个唯一的内部对象。
- 遍历所有键： 使用 Object.keys() 获取该对象的所有属性键名，并进行遍历。
- 提取分组标识： 对于每个键名，提取其第一个字符（即数字前缀），作为该属性所属分组的唯一标识。
- 动态构建新对象： 使用一个临时对象（例如 splitObjects）来存储不同分组的新对象。如果某个分组标识第一次出现，就在 splitObjects 中为其创建一个新的空对象；否则，直接向已存在的对象中添加属性。
- 收集结果： 遍历结束后，splitObjects 将包含所有按分组构建好的对象。最后，使用 Object.values() 将这些对象转换成一个数组，即为我们期望的输出。
示例代码：
/**
* 将包含扁平化对象的数组拆分为多个独立对象的数组。
* 假设输入数组只包含一个对象，且该对象的键名以数字前缀分组。
*
* @param {Array代码解析：
- function splitArrayOfFlattenedObject(input): 定义一个函数，接收一个数组作为输入。
- 输入校验: 增加了基本的输入校验，确保 input 是一个包含单个对象的数组，提高了函数的健壮性。
- const sourceObject = input[0];: 从输入数组中取出唯一的扁平化对象。
- const splitObjects = {};: 初始化一个空对象 splitObjects。这个对象将用作一个临时的哈希表，其键是分组标识符（如 "0", "1", "2"），其值是对应分组的新对象。
- Object.keys(sourceObject).forEach((key) => { ... });: 遍历 sourceObject 的所有属性键。
- const groupIdentifier = key.charAt(0);: 使用 charAt(0) 方法获取当前键名的第一个字符。这是我们定义的分组标识符。
- if (!splitObjects[groupIdentifier]) { splitObjects[groupIdentifier] = {}; }: 这是一个关键步骤。它检查 splitObjects 中是否已经存在以 groupIdentifier 为键的对象。如果不存在，则创建一个新的空对象并赋值给 splitObjects[groupIdentifier]。这确保了每个分组标识符都对应一个独立的对象。
- splitObjects[groupIdentifier][key] = sourceObject[key];: 将原始对象中的当前键值对，添加到 splitObjects 中对应 groupIdentifier 的新对象里。
- return Object.values(splitObjects);: 最后，使用 Object.values() 方法将 splitObjects 对象中的所有值（即我们按分组创建的独立对象）提取出来，并作为一个新数组返回。
注意事项与扩展
- 键名命名约定： 此解决方案高度依赖于键名具有一致的分组前缀（例如，总是第一个字符）。如果键名约定不同（例如，前缀长度不固定，或分组标识符在键名的其他位置），则需要调整 groupIdentifier 的提取逻辑。
- 性能： 对于中等规模的数据，此方法效率较高。它只需要遍历一次原始对象的键。
- 通用性： 这种模式可以推广到其他需要根据键名模式进行数据重组的场景。例如，如果键名是 group1_itemA、group1_itemB、group2_itemC，则可以使用正则表达式或 split('_') 来提取分组标识符。
- 输入校验： 在实际应用中，对输入数据进行更严格的校验是良好的实践，以防止因数据格式不匹配而导致的错误。
总结
通过本教程介绍的方法，我们可以有效地将 JavaScript 中扁平化的单对象数组重塑为结构更清晰、更易于处理的多对象数组。这种基于键名前缀的动态分组策略，不仅解决了特定的数据重组问题，也为处理类似的数据转换任务提供了通用的思路和实现范例。理解并掌握这种数据转换技巧，将有助于提升您在 JavaScript 数据处理方面的能力。
