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

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

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 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 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" }
  ]
}
*/

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"] }
  ]
}
*/