如何使用jQuery将serializeArray转为含动态属性及嵌套数组的对象

你当前用serializeArray()转平面对象的方法没问题，但要处理嵌套数组（比如Persons: []这种结构），关键在于表单元素的name属性要遵循特定命名规则，再通过解析这些name来构建嵌套结构。

核心思路 #

把表单元素的name写成类似Persons[0].id、Persons[0].name的格式，通过拆分name的路径，逐步构建嵌套对象和数组。

实现代码 #

下面是能处理嵌套对象和数组的通用方法：

function serializeToNestedObject(formElements) {
  const result = {};
  const arrayData = formElements.serializeArray();

  arrayData.forEach(item => {
    const keys = item.name.replace(/\]/g, '').split('[');
    let current = result;

    for (let i = 0; i < keys.length; i++) {
      const key = keys[i];
      // 处理数组索引，比如Persons[0]中的0
      if (!isNaN(key)) {
        const parentKey = keys[i-1];
        if (!Array.isArray(current[parentKey])) {
          current[parentKey] = [];
        }
        // 数组对应位置无对象则初始化
        if (!current[parentKey][key]) {
          current[parentKey][key] = {};
        }
        current = current[parentKey][key];
      } else {
        // 处理最后一个键，直接赋值
        if (i === keys.length - 1) {
          current[key] = item.value;
        } else {
          // 非最后一个键，不存在则初始化对象
          if (!current[key]) {
            current[key] = {};
          }
          current = current[key];
        }
      }
    }
  });

  return result;
}

// 使用示例
const nestedObj = serializeToNestedObject(section.find('select, textarea, input'));

对应表单示例 #

要生成你给出的{id:1, name:"ABC", Persons:[]}结构，表单元素需这样写：

<input type="hidden" name="id" value="1">
<input type="text" name="name" value="ABC">
<!-- 嵌套数组的元素 -->
<input type="text" name="Persons[0].name" value="张三">
<input type="text" name="Persons[0].age" value="25">
<input type="text" name="Persons[1].name" value="李四">
<input type="text" name="Persons[1].age" value="30">

运行方法后会得到：

{
  id: "1",
  name: "ABC",
  Persons: [
    { name: "张三", age: "25" },
    { name: "李四", age: "30" }
  ]
}

补充说明 #

• 所有表单元素的value默认是字符串类型，若需要数字等类型，可在赋值时额外转换。
• 如果没有对应数组元素（比如未定义Persons[0]），结果里的Persons会是未定义状态，可在方法末尾手动初始化空数组，或按需调整逻辑。

内容的提问来源于stack exchange，提问作者rahman