JavaScript中将扁平化表单键转换为嵌套数组对象的教程

本教程旨在指导开发者如何将具有扁平化、括号式键名（如`timeslots[0][start]`）的JavaScript对象或FormData结构，转换为更易于操作的嵌套数组对象。文章将详细介绍两种主要转换方法：一种适用于简单的数组对象结构，利用`filter`、`map`和`reduce`进行链式处理；另一种则针对包含多层嵌套数组（如`disability`）的复杂场景，采用迭代和正则表达式匹配构建目标结构，并提供详细代码示例和最佳实践。

在Web开发中，尤其是在处理表单提交数据时，我们经常会遇到一种扁平化的键名结构，例如FormData对象或从后端接收到的JSON对象。这些键名通常采用类似key[index][property]的格式来表示数组或嵌套对象，如timeslots[0][start]。尽管这种格式便于某些后端框架处理，但在JavaScript前端进行数据操作时，我们通常更倾向于使用标准的嵌套数组和对象结构，例如：

{
  id: "id1",
  timeslots: [
    { start: "2023-06-10", end: "2023-06-09" },
    { start: "2024-06-10", end: "2024-06-09" }
  ]
}

本文将详细介绍如何利用JavaScript将这种扁平化的键名结构转换为更具可读性和操作性的嵌套数组对象。

理解扁平化键名结构

假设我们有以下两种输入数据结构：

立即学习“Java免费学习笔记（深入）”；

1. 基础结构示例：

百度智能云·曦灵

百度旗下的AI数字人平台

下载

const inputObjectBasic = {
  id: "id1",
  "timeslots[0][start]": "2023-06-10",
  "timeslots[0][end]": "2023-06-09",
  "timeslots[1][start]": "2024-06-10",
  "timeslots[1][end]": "2024-06-09"
};

2. 包含嵌套数组的复杂结构示例：

const inputObjectAugmented = {
  id: "id1",
  "timeslots[0][start]": "2023-06-10",
  "timeslots[0][end]": "2023-06-09",
  "timeslots[0]disability[3]": "D3",
  "timeslots[0]disability[4]": "D4",
  "timeslots[1][start]": "2024-06-10",
  "timeslots[1][end]": "2024-06-09",
  "timeslots[1]disability[1]": "D1",
  "timeslots[1]disability[5]": "D5"
};

我们的目标是将这些扁平化的键名转换为对应的嵌套JavaScript对象。

基础转换方法：处理简单数组对象

对于只包含一层数组对象（如timeslots中的start和end）的结构，我们可以利用JavaScript的Object.entries、filter、map和reduce等方法进行链式处理，实现简洁高效的转换。

核心思路

1. 获取所有键值对： 使用Object.entries()将输入对象转换为一个包含所有[key, value]对的数组。
2. 筛选目标键： 使用filter()方法，通过正则表达式筛选出所有与timeslots相关的键。
3. 解析键名： 使用map()方法，对筛选出的每个键值对，利用正则表达式提取其索引和属性名。
4. 聚合数据： 使用reduce()方法，将解析后的数据聚合到一个数组中，每个数组元素代表一个timeslot对象。

示例代码

const inputObjectBasic = {
  id: "id1",
  "timeslots[0][start]": "2023-06-10",
  "timeslots[0][end]": "2023-06-09",
  "timeslots[1][start]": "2024-06-10",
  "timeslots[1][end]": "2024-06-09"
};

const transformedObjectBasic = {
  id: inputObjectBasic.id,
  timeslots: Object.entries(inputObjectBasic)
    .filter(([key]) => key.startsWith("timeslots")) // 1. 筛选出所有以 "timeslots" 开头的键
    .map(([key, value]) => {
      // 2. 使用正则表达式解析键名，提取索引和属性名
      const match = key.match(/timeslots\[(\d+)\]\[(start|end)\]/);
      if (match) {
        const [, index, property] = match; // match[1] 是索引，match[2] 是属性名
        return { [property]: value, index: parseInt(index) };
      }
      return null; // 如果不匹配，返回 null，后续 filter 会移除
    })
    .filter(item => item !== null) // 移除未能匹配的项
    .reduce((acc, { index, ...rest }) => {
      // 3. 聚合数据：根据索引将属性合并到对应的 timeslot 对象中
      acc[index] = acc[index] || {}; // 如果该索引处还没有对象，则创建一个空对象
      Object.assign(acc[index], rest); // 将解析出的属性合并到对象中
      return acc;
    }, []) // 初始累加器是一个空数组
};

console.log("基础转换结果:", transformedObjectBasic);
/*
输出:
{
  id: "id1",
  timeslots: [
    { start: "2023-06-10", end: "2023-06-09" },
    { start: "2024-06-10", end: "2024-06-09" }
  ]
}
*/

代码解析

• Object.entries(inputObjectBasic): 将对象转换为[['id', 'id1'], ['timeslots[0][start]', '2023-06-10'], ...]的形式。
• .filter(([key]) => key.startsWith("timeslots")): 仅保留键名以"timeslots"开头的条目，忽略id等其他属性。
• .map(([key, value]) => { ... }):
  • 正则表达式/timeslots\[(\d+)\]\[(start|end)\]/用于匹配键名。
    • (\d+)捕获timeslots后的数字索引。
    • (start|end)捕获start或end属性名。
  • match数组的第一个元素是完整匹配的字符串，match[1]是第一个捕获组（索引），match[2]是第二个捕获组（属性名）。
  • 返回一个包含{ property: value, index: parsedIndex }的对象。
• .reduce((acc, { index, ...rest }) => { ... }, []):
  • acc是累加器，初始值是一个空数组[]，它将最终成为timeslots数组。
  • { index, ...rest }是解构赋值，index是解析出的索引，rest是除了index之外的所有属性（即{ start: "..." }或{ end: "..." }）。
  • acc[index] = acc[index] || {};：确保acc数组的index位置有一个对象。如果不存在，则创建一个空对象。
  • Object.assign(acc[index], rest);：将rest对象中的属性合并到acc[index]中。这样，start和end属性就会被添加到同一个timeslot对象中。

进阶转换方法：处理嵌套数组和复杂结构

当数据结构中包含更深层次的嵌套数组时（例如timeslots[0]disability[3]），上述reduce的链式调用可能变得复杂。此时，采用迭代方式并配合多个正则表达式匹配，可以提供更清晰的解决方案。

核心思路

1. 初始化结果对象： 创建一个包含id和空timeslots数组的骨架对象。
2. 遍历所有键： 使用Object.keys()获取所有键名，并使用forEach遍历。
3. 多条件匹配： 在每次迭代中，尝试用不同的正则表达式匹配当前键名：
   • 匹配timeslots[N][prop]形式的键，提取N和prop。
   • 匹配timeslots[N]disability[M]形式的键，提取N和M。
4. 逐步构建结构： 根据匹配结果，在timeslots数组中创建或更新对应的对象和嵌套数组。

示例代码

const inputObjectAugmented = {
  id: "id1",
  "timeslots[0][start]": "2023-06-10",
  "timeslots[0][end]": "2023-06-09",
  "timeslots[0]disability[3]": "D3",
  "timeslots[0]disability[4]": "D4",
  "timeslots[1][start]": "2024-06-10",
  "timeslots[1][end]": "2024-06-09",
  "timeslots[1]disability[1]": "D1",
  "timeslots[1]disability[5]": "D5"
};

const outputObjectAugmented = { id: inputObjectAugmented.id, timeslots: [] };
const keys = Object.keys(inputObjectAugmented);

keys.forEach(key => {
    // 尝试匹配 timeslots[N][start|end] 形式的键
    const matchTimeSlotProp = key.match(/timeslots\[(\d+)\]\[(start|end)\]/);

    if (matchTimeSlotProp) {
        const index = parseInt(matchTimeSlotProp[1]); // 提取 timeslots 数组的索引
        const prop = matchTimeSlotProp[2];           // 提取属性名 (start 或 end)

        // 确保 timeslots 数组的该索引位置有对象
        if (!outputObjectAugmented.timeslots[index]) {
            outputObjectAugmented.timeslots[index] = {};
        }
        // 赋值属性
        outputObjectAugmented.timeslots[index][prop] = inputObjectAugmented[key];
    } else {
        // 尝试匹配 timeslots[N]disability[M] 形式的键
        const matchDisability = key.match(/timeslots\[(\d+)\]disability\[\d+\]/);

        if (matchDisability) {
            const index = parseInt(matchDisability[1]); // 提取 timeslots 数组的索引
            const disabilityValue = inputObjectAugmented[key]; // 提取 disability 的值

            // 确保 timeslots 数组的该索引位置有对象
            if (!outputObjectAugmented.timeslots[index]) {
                outputObjectAugmented.timeslots[index] = {};
            }
            // 确保 timeslots[index] 对象中有 disability 数组
            if (!outputObjectAugmented.timeslots[index].disability) {
                outputObjectAugmented.timeslots[index].disability = [];
            }
            // 将 disability 值添加到对应的数组中
            outputObjectAugmented.timeslots[index].disability.push(disabilityValue);
        }
    }
});

console.log("进阶转换结果:", outputObjectAugmented);
/*
输出:
{
  id: "id1",
  timeslots: [
    { start: "2023-06-10", end: "2023-06-09", disability: ["D3", "D4"] },
    { start: "2024-06-10", end: "2024-06-09", disability: ["D1", "D5"] }
  ]
}
*/

代码解析

• outputObjectAugmented = { id: inputObjectAugmented.id, timeslots: [] }: 初始化最终结果对象，id直接赋值，timeslots初始化为空数组。
• keys.forEach(key => { ... }): 遍历inputObjectAugmented的所有键。
• matchTimeSlotProp = key.match(/timeslots\[(\d+)\]\[(start|end)\]/): 匹配start或end属性。
  • (\d+)捕获timeslots的索引。
  • (start|end)捕获具体属性名。
• matchDisability = key.match(/timeslots\[(\d+)\]disability\[\d+\]/): 匹配disability数组中的项。
  • (\d+)捕获timeslots的索引。
  • \[\d+\]匹配disability后的内部索引，但我们只关心其值，所以不需要捕获。
• 条件判断与构建：
  • if (!outputObjectAugmented.timeslots[index]) { ... }：确保timeslots数组在特定index位置有对象。
  • if (!outputObjectAugmented.timeslots[index].disability) { ... }：确保timeslot对象内部有disability数组。
  • push(disabilityValue)：将解析出的disability值添加到对应的数组中。

注意事项与最佳实践

1. 正则表达式的精准性： 正则表达式是解析复杂键名的核心。务必根据实际的键名模式（如key[index].property、key_index_property等）编写或调整正则表达式，以确保准确匹配和捕获所需信息。
2. 数据验证与错误处理：
   • 在实际应用中，应考虑键名不匹配或数据格式异常的情况。例如，map函数中如果match为null，需要有适当的处理（如返回null并在后续filter中移除）。
   • 在构建对象时，对解析出的index进行边界检查，防止因非法索引导致的错误。
3. 性能考量：
   • 对于大多数Web应用场景，上述两种方法在性能上通常足够。
   • 如果处理的数据量非常庞大（例如数十万条记录），可以考虑使用更底层的循环或优化正则表达式的匹配效率。
4. 代码可读性与维护性：