AngularJS或原生JS如何将指定查询字符串反序列化为数组对象？

嘿，这个问题问得挺实际的！先直接给你结论：不管是原生JavaScript还是AngularJS，都没有内置的直接方法能完美把这种格式的查询字符串转换成你想要的嵌套数组对象——毕竟你的查询字符串里用逗号分隔数组元素的写法不是URL参数的标准格式（标准数组通常会用rooms[0][children][0]=3这种逐个索引的写法）。不过不用头疼，我们可以基于现有工具做轻量改造，不用完全从零实现复杂的反序列化器。

原生JavaScript实现方案 #

我们可以借助URLSearchParams先解析参数，再手动处理嵌套结构和逗号分割的数组：

const queryString = '?rooms[0][adult]=2&rooms[0][children]=3,4&rooms[1][adult]=3';
const params = new URLSearchParams(queryString);

// 构建嵌套对象
const nestedObj = {};
params.forEach((value, key) => {
  // 解析键的层级，比如把"rooms[0][adult]"拆成["rooms", "0", "adult"]
  const keys = key.match(/(\w+|\d+)/g);
  let current = nestedObj;
  
  keys.forEach((k, index) => {
    if (index === keys.length - 1) {
      // 最后一层赋值，判断是children则转数组
      current[k] = k === 'children' 
        ? value.split(',').map(Number) 
        : Number(value);
    } else {
      // 初始化层级：数字索引用数组，其他用对象
      current[k] = current[k] || (isNaN(Number(k)) ? {} : []);
      current = current[k];
    }
  });
});

const result = nestedObj.rooms;
console.log(result);
// 输出：[ { adult: 2, children: [3, 4] }, { adult: 3 } ]

AngularJS实现方案 #

AngularJS自带的$httpParamSerializerJQLike可以解析这种jQuery风格的嵌套参数，但默认不会处理逗号分割的数组，所以只需额外一步转换即可：

// 需在AngularJS控制器/服务中执行
const queryString = '?rooms[0][adult]=2&rooms[0][children]=3,4&rooms[1][adult]=3';
// 去掉开头的问号
const paramStr = queryString.slice(1);

// 用AngularJS的序列化工具解析嵌套结构
const parsedData = $httpParamSerializerJQLike.parse(paramStr);

// 处理children字段的逗号分割
parsedData.rooms.forEach(room => {
  if (room.children) {
    room.children = room.children.split(',').map(Number);
  }
});

console.log(parsedData.rooms);
// 输出：[ { adult: 2, children: [3, 4] }, { adult: 3 } ]

补充说明 #

如果你的查询字符串是标准的数组格式（比如rooms[0][children][0]=3&rooms[0][children][1]=4），那AngularJS的$httpParamSerializerJQLike和一些第三方库可以直接解析成目标结构，但你的场景里用逗号简化了数组写法，所以必须加一步手动转换。

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