URLSearchParams构造函数如何通过传对象设置同键多值参数

平时开发中我习惯通过传入对象的方式创建URLSearchParams实例，这种写法简洁易读。但部分场景下需要为同一个参数设置多个值，生成类似foo=bar&foo=baz的查询串。
目前我通过多次调用.append()方法实现该效果，但参数值较多时，大量重复的append语句可读性很差，想确认是否可以直接通过构造函数传入对象的方式实现同参数多值配置。

当前使用的示例代码如下：

let params;

// 目前可用但写法繁琐的实现
params = new URLSearchParams()
params.append("foo", "bar");
params.append("foo", "baz");

console.log(params.toString()); // 能得到目标结果，但值多的时候代码冗余可读性差

// 期望能实现但目前得不到正确结果的写法
params = new URLSearchParams({
    "foo": ["bar", "baz"]
});
console.log(params.toString());

params = new URLSearchParams({
    "foo": "bar",
    "foo": "baz"
});
console.log(params.toString());

直接向URLSearchParams构造函数传入普通对象，无法实现同参数多值的配置，原因如下：

• 当传入的对象属性值为数组时，构造函数会直接将数组转为逗号分隔的字符串，最终生成的查询串是foo=bar%2Cbaz，逗号会被URL转义，不是预期的两个同名参数。
• 在普通JS对象中写同名键是无效语法，后定义的键值会直接覆盖前面的同名键，最终只会保留最后一个值，生成foo=baz的结果。

不需要重复写append语句的简洁实现方案有两种：

方案1：直接传入二维数组初始化 #

URLSearchParams构造函数原生支持传入[键名, 键值]格式的二维数组初始化，写法和传对象一样简洁，原生支持同参数多值，且会自动处理URL转义：

const params = new URLSearchParams([
  ["foo", "bar"],
  ["foo", "baz"],
  ["otherParam", "test"]
]);
console.log(params.toString()); // 输出：foo=bar&foo=baz&otherParam=test

方案2：提前做一次数据格式转换 #

如果你习惯用对象管理参数，且部分参数值为数组格式，可以写一段通用的转换逻辑，不用手动逐个调用append，单值、多值场景可以统一处理：

// 你习惯的参数定义格式
const rawParams = {
  foo: ["bar", "baz"],
  otherParam: "test"
};

const params = new URLSearchParams();
Object.entries(rawParams).forEach(([key, value]) => {
  // 单值自动转成单元素数组，统一处理逻辑
  const valueList = Array.isArray(value) ? value : [value];
  valueList.forEach(v => params.append(key, v));
});

console.log(params.toString()); // 输出：foo=bar&foo=baz&otherParam=test

注意：不要为了省事手动拼接查询字符串传给构造函数，这种写法如果参数值包含&、=、中文等特殊字符，很容易出现转义错误，上面两种方案都基于原生API实现，会自动处理特殊字符转义，没有兼容性问题。

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