本教程旨在解决JavaScript中一个常见的数据重构问题：如何将一个包含扁平化、多键值对的单行对象数组，转换为一个由多个独立对象组成的新数组。文章将详细介绍一种基于键名模式识别的实用方法，通过迭代原始对象的键，并根据键的特定前缀将相关数据分组，最终实现数据结构的有效转换，并提供完整的JavaScript代码示例与解释。
在前端开发和数据处理中，我们经常会遇到需要对数据结构进行转换的场景。有时，为了传输或存储的便利，数据可能被扁平化为一个包含大量键值对的单一对象，而这些键值对实际上代表了多个逻辑上的独立实体。本教程将指导您如何将这类“单行多实体”的数据结构，高效地拆分为“多行单实体”的数组，从而提高数据的可读性和可操作性。
理解问题：扁平化数据结构
假设我们有一个JavaScript数组，其中只包含一个对象。这个对象内部的键名遵循一种模式，例如 0key1, 0key2, 0key3, 1key1, 1key2, 1key3 等。这些键名中的数字前缀（0, 1, 2）指示了它们应该属于不同的逻辑实体。
原始数据示例：
立即学习“Java免费学习笔记（深入）”；
本文档主要讲述的是j2me3D游戏开发简单教程； 如今，3D图形几乎是任何一部游戏的关键部分，甚至一些应用程序也通过用3D形式来描述信息而获得了成功。如前文中所述，以立即模式和手工编码建立所有的3D对象的方式进行开发速度很慢且很复杂。应用程序中多边形的所有角点必须在数组中独立编码。在JSR 184中，这称为立即模式。希望本文档会给有需要的朋友带来帮助；感兴趣的朋友可以过来看看
const originalArray = [{
"0key1": "a33",
"0key2": "Aab",
"0key3": "i",
"1key1": "e78",
"1key2": "Vib",
"1key3": "j",
"2key1": "c99",
"2key2": "Aig",
"2key3": "k"
}];我们的目标是将上述数据转换为以下结构：
目标数据示例：
[
{"0key1":"a33","0key2":"Aab","0key3":"i"},
{"1key1":"e78","1key2":"Vib","1key3":"j"},
{"2key1":"c99","2key2":"Aig","2key3":"k"}
]解决方案：基于键名模式的分组
解决这个问题的核心思路是遍历原始对象的所有键，并利用键名中的模式（本例中是键名的第一个字符）来判断该键值对应该属于哪个新的独立对象。
实现步骤
- 获取原始对象： 由于原始数组只有一个元素，我们直接获取 originalArray[0]。
- 创建中间存储对象： 声明一个空对象 splitObjects，用于临时存储分组后的数据。这个对象的键将是新对象的标识符（例如 0, 1, 2），值将是正在构建中的新对象。
-
遍历键并分组： 遍历原始对象的所有键。对于每个键：
- 提取键的第一个字符（作为分组标识）。
- 检查 splitObjects 中是否已经存在以该字符为键的子对象。如果不存在，则初始化一个空对象。
- 将当前键值对添加到对应的子对象中。
- 转换为数组： 遍历完成后，splitObjects 将包含所有按标识符分组的对象。最后，使用 Object.values() 方法将 splitObjects 的值提取出来，形成我们所需的目标数组。
示例代码
/**
* 将包含扁平化多键值对的单行对象数组拆分为多行独立对象数组。
*
* @param {Array代码解释
- Object.keys(originalObject): 这个方法返回一个包含 originalObject 所有自身可枚举字符串属性的数组。例如，对于示例数据，它会返回 ["0key1", "0key2", ..., "2key3"]。
- .forEach((key) => { ... }): 遍历 Object.keys() 返回的每个键。
- const firstChar = key.charAt(0);: 提取当前键的第一个字符。这是我们用来识别和分组逻辑实体的主要依据。
- splitObjects[firstChar] = splitObjects[firstChar] || {};: 这是一个常见的JavaScript模式，用于确保 splitObjects 中存在一个以 firstChar 为键的子对象。如果 splitObjects[firstChar] 为 undefined 或 null（即第一次遇到这个 firstChar），它会被初始化为一个空对象 {}。否则，它将保持其现有值。
- splitObjects[firstChar][key] = originalObject[key];: 将原始对象中当前键 key 对应的值赋给 splitObjects 中相应分组的子对象。
- return Object.values(splitObjects);: 最后，Object.values() 方法返回一个数组，其元素是 splitObjects 对象中所有可枚举属性的值。这些值正是我们期望的、已经分组好的独立对象。
注意事项与扩展
- 键名模式的依赖性： 本方案高度依赖于键名的命名模式。如果键名没有一个清晰可识别的前缀来区分不同的逻辑实体，此方法将不适用。在这种情况下，您可能需要更复杂的解析逻辑，例如使用正则表达式或根据业务规则自定义解析函数。
- 性能考虑： 对于包含大量键的超大型对象，Object.keys() 和 forEach 循环的性能通常是可接受的。如果遇到极端性能瓶颈，可以考虑使用 for...in 循环，但通常现代JavaScript引擎对 forEach 做了很好的优化。
- 输入数据校验： 在实际应用中，添加对 input 数组和其内部对象结构的更严格校验是良好的实践，以防止因数据格式不匹配而导致的运行时错误。
- 通用性： 尽管本例使用了数字前缀，但 firstChar 可以是任何字符或字符串片段，只要它能唯一标识一个逻辑分组即可。例如，如果键是 person_name, person_age, address_street, address_city，您可以根据 _ 之前的字符串进行分组。
总结
本教程提供了一种简洁高效的方法，用于将JavaScript中扁平化的单行对象数组，根据键名模式拆分为多个独立的子对象数组。通过理解键名中的分组逻辑，并利用 Object.keys() 和 forEach 循环，我们可以轻松地实现这种常见的数据结构转换。这种方法不仅提高了代码的可读性，也使得后续的数据处理和操作更加方便。在实际开发中，请务必根据您的具体数据结构和业务需求，灵活调整键名解析的逻辑。
