本教程旨在解决javascript中将包含多组键值对的单一扁平化对象，根据键名前缀拆分为多个独立对象的数组问题。通过遍历原始对象的键，识别前缀并动态构建新对象，最终将单个复杂对象重构为一组清晰、独立的结构化对象，提升数据可读性和可维护性。
在前端开发中，我们经常需要对数据结构进行转换，以适应不同的业务逻辑或展示需求。一个常见的挑战是将一个包含多组相关数据的“扁平化”对象，拆分成一个由多个独立、结构化对象组成的数组。这种场景通常出现在数据源将所有相关信息合并到一个单一记录中，而我们需要将其解耦为更易于管理和操作的独立实体时。
问题描述
假设我们接收到一个JavaScript数组，其中只包含一个对象。这个对象的键名通过数字前缀（例如 "0key1", "1key1", "2key1"）来区分不同的逻辑组，但所有键值对都“挤”在了一个对象内部，如下所示：
const originalData = [{
"0key1": "a33",
"0key2": "Aab",
"0key3": "i",
"1key1": "e78",
"1key2": "Vib",
"1key3": "j",
"2key1": "c99",
"2key2": "Aig",
"2key3": "k"
}];我们的目标是将这个单一的扁平化对象转换成一个数组，其中每个元素都是一个独立的JavaScript对象。每个新对象应包含一组以相同数字前缀开头的键值对，从而形成更清晰、更易于处理的结构。期望的输出格式如下：
[
{"0key1":"a33","0key2":"Aab","0key3":"i"},
{"1key1":"e78","1key2":"Vib","1key3":"j"},
{"2key1":"c99","2key2":"Aig","2key3":"k"}
]解决方案
要实现这种数据结构的转换，我们可以采用一种迭代和重构的策略。核心思路是遍历原始对象的每一个键，提取其数字前缀，然后根据这个前缀将对应的键值对分配到一个新的、独立的子对象中。最终，我们将这些按前缀分组的子对象集合转换为一个数组。
立即学习“Java免费学习笔记（深入）”；
实现步骤
- 校验输入： 首先，对输入数据进行基本的校验，确保它是一个包含至少一个对象的数组，并且该对象非空。
- 获取原始对象： 从输入的数组中提取出唯一的那个扁平化对象。
- 初始化中间存储： 创建一个空对象 groupedObjects，用于临时存储按前缀分组的子对象。这个对象的键将是原始键的前缀（例如 '0', '1', '2'），值将是对应的子对象。
-
遍历键并分组：
- 使用 Object.keys() 方法获取原始对象的所有可枚举字符串键。
- 使用 forEach() 方法遍历这些键。
- 对于每个键，使用 substr(0, 1) 或 key[0] 提取其第一个字符，作为分组的依据（即前缀）。
- 检查 groupedObjects 中是否已经存在以当前前缀为键的子对象。如果不存在，则初始化一个空对象。
- 将原始对象的当前键值对 (originalObject[key]) 添加到 groupedObjects 中对应前缀的子对象里。
- 生成最终数组： 遍历完成后，groupedObjects 将包含所有按前缀分组的子对象。使用 Object.values() 方法，将这些子对象提取出来，形成最终的目标数组。
示例代码
以下是实现上述逻辑的JavaScript函数：
/**
* 将包含扁平化键值对的单一对象拆分为多个结构化对象数组。
*
* @param {Array代码解析
- input[0]: 我们假设输入数组只有一个元素，因此直接通过索引 0 访问它来获取需要处理的扁平化对象。
- Object.keys(originalObject).forEach((key) => {...}): 这是一个标准的JavaScript模式，用于遍历一个对象的所有可枚举字符串属性（即键）。forEach 方法对每个键执行提供的回调函数。
- key.substr(0, 1): 这个方法用于从当前键的起始位置（索引 0）提取一个字符。它假设键的前缀始终是一个字符。如果键名规则是多字符前缀（例如 "item0key1"），你需要相应地调整此处的逻辑，例如使用正则表达式或 `key.split('')[0]` 等方法来提取前缀。
- groupedObjects[prefix] = groupedObjects[prefix] || {};: 这是一个非常实用的JavaScript短路求值技巧，用于确保 groupedObjects[prefix] 存在。如果 groupedObjects[prefix] 当前是 undefined 或 null（表示这是第一次遇到这个前缀），它将被初始化为一个新的空对象 {}；否则，它将保持其现有值。这避免了在每次添加属性之前进行显式的 if (groupedObjects[prefix] === undefined) 检查，使代码更简洁。
- groupedObjects[prefix][key] = originalObject[key];: 将原始对象中的当前键值对复制到 groupedObjects 中对应前缀的子对象里。
- Object.values(groupedObjects): 这是最后一步，也是关键一步。当 forEach 循环完成后，groupedObjects 对象将包含所有按前缀分组的子对象作为其值。Object.values() 方法将这些值提取出来，并返回一个新数组，这正是我们期望的输出格式。
注意事项与拓展
- 键名前缀的灵活性： 本教程假设键名前缀是一个字符（在本例中是数字）。如果你的键名前缀是多字符（例如 "group_0key1"），你需要调整提取前缀的逻辑。例如，可以使用 `key.split('')[0]` 或更复杂的正则表达式来匹配和提取。
- 输入数据结构的适配： 当前代码假设输入是一个包含单个对象的数组。如果你的输入直接就是一个对象，或者是一个包含多个扁平化对象的数组，你需要相应地调整函数签名和内部对 input[0] 的访问方式。
- 健壮性考虑： 在生产环境中，为了提高代码的健壮性，你可能需要添加更多的输入校验，例如检查 input 是否为 null 或 undefined，或者 input[0] 是否确实是一个非空的JavaScript对象。
- 性能： 对于大多数常见的用例，这种方法是高效的。它的时间复杂度是线性的（O(N)，其中 N 是原始对象中键的数量），因为我们只需要遍历一次对象的键。
总结
通过上述方法，我们成功地将一个包含扁平化键值对的单一JavaScript对象，根据键名前缀有效地拆分成了多个结构清晰、独立的子对象数组。这种数据重构技巧在处理来自后端接口的复杂数据、进行数据清洗或需要对数据进行进一步加工时非常有用。掌握这种能力能够帮助开发者更灵活、高效地处理各种数据转换需求，从而提高代码的可读性、可维护性和整体开发效率。
