如何使用qs库正确序列化和解析含单元素数组的对象？

原因 #

使用arrayFormat: 'comma'序列化单元素数组时，qs不会在值末尾添加逗号，生成的查询字符串为arr=1；而默认解析逻辑无法判断这个单值是否应该是数组，因此将其识别为普通属性。

解决方法 #

方法1：序列化时给单元素数组添加 trailing comma #

通过自定义格式化函数，让单元素数组也输出末尾逗号，这样解析时开启comma: true就能识别为数组：

import qs from 'qs';

console.clear();

const str = qs.stringify(
  { foo: true, arr: [1] },
  {
    arrayFormat: 'comma',
    formatter: (value) => {
      if (Array.isArray(value)) {
        // 单元素数组添加末尾逗号，多元素正常拼接
        return value.join(',') + (value.length === 1 ? ',' : '');
      }
      return value;
    }
  }
);

const parsed = qs.parse(str, { comma: true });

console.log(parsed); // 输出：{ foo: true, arr: [1] }

方法2：解析后手动指定字段转为数组 #

如果不想修改序列化结果，可以在解析完成后，将需要作为数组的字段强制转为数组：

import qs from 'qs';

console.clear();

const str = qs.stringify({ foo: true, arr: [1] }, { arrayFormat: 'comma' });

const parsed = qs.parse(str);
// 定义需要转为数组的字段列表
const arrayFields = ['arr'];

arrayFields.forEach(field => {
  if (parsed[field] !== undefined && !Array.isArray(parsed[field])) {
    parsed[field] = [parsed[field]];
  }
});

console.log(parsed); // 输出：{ foo: true, arr: [1] }

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