本教程详细介绍了如何在 javaScript 中，将一个包含单个扁平化对象的数组，根据其键名的前缀（如”0key1″、”1key1″）拆分成多个独立的、结构清晰的对象数组。文章通过示例代码演示了如何遍历原始对象的键，动态创建并填充新对象，从而实现数据的重塑，提升数据可读性和处理效率。
在数据处理和前端开发中，我们有时会遇到一种特殊的数据结构：一个数组中只包含一个对象，而这个对象内部的属性键名却通过某种前缀（例如数字索引）来区分不同的逻辑实体。这种扁平化的结构虽然紧凑，但在需要对每个逻辑实体独立操作时，会显得不够直观和便捷。本教程旨在提供一种高效的 javascript 方法，将这种单行扁平化的对象数组重塑为多行独立的、结构清晰的对象数组。
场景描述与问题分析
假设我们有一个 JavaScript 数组，其中只有一个对象。这个对象的键名按照 NkeyX 的模式命名，其中 N 是一个数字索引，表示逻辑上的分组，而 keyX 是该分组下的具体属性。
原始数据结构示例：
立即学习“Java免费学习笔记（深入）”；
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<Object>} input 包含单个扁平化对象的数组。 * @returns {Array<Object>} 拆分后的独立对象数组。 */ function splitArrayOfFlattenedObject(input) { // 检查输入是否有效，确保是包含单个对象的数组 if (!Array.isArray(input) || input.length !== 1 || typeof input[0] !== 'object' || input[0] === null) { console.warn("输入格式不符合预期，请提供一个包含单个对象的数组。"); return []; } const sourceObject = input[0]; // 获取数组中唯一的源对象 const splitObjects = {}; // 用于存储按前缀分组的新对象 // 遍历源对象的所有键 Object.keys(sourceObject).foreach((key) => { // 提取键名的第一个字符作为分组标识 const groupIdentifier = key.charAt(0); // 或者 key.substring(0, 1) // 如果该分组标识还未在 splitObjects 中创建对应的对象，则初始化一个空对象 if (!splitObjects[groupIdentifier]) { splitObjects[groupIdentifier] = {}; } // 将当前键值对添加到对应的分组对象中 splitObjects[groupIdentifier][key] = sourceObject[key]; }); // 返回 splitObjects 中所有值的数组，即为最终结果 return Object.values(splitObjects); } // 原始数据 const originalData = [{ "0key1": "a33", "0key2": "Aab", "0key3": "i", "1key1": "e78", "1key2": "Vib", "1key3": "j", "2key1": "c99", "2key2": "Aig", "2key3": "k" }]; const result = splitArrayOfFlattenedObject(originalData); console.log('拆分后的结果:', result); /* 输出结果: [ { '0key1': 'a33', '0key2': 'Aab', '0key3': 'i' }, { '1key1': 'e78', '1key2': 'Vib', '1key3': 'j' }, { '2key1': 'c99', '2key2': 'Aig', '2key3': 'k' } ] */
代码解析：
- 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 数据处理方面的能力。