JavaScript中URLSearchParams的set与append方法有何区别？

你给出的两段示例代码执行结果完全一致。因为两个示例都是在空的URLSearchParams实例上第一次操作name键，此时不存在已有的同名参数，不管是append还是set，最终生成的查询串都是name=Harry+Potter。
两个方法的差异只会在操作的键名已经存在对应参数时才会体现。

• append(key, value)：永远执行新增操作，不会修改、删除已有的同名参数。如果对同一个键多次调用append，最终查询串中会出现多个同名键值对。
• set(key, value)：永远执行覆盖操作，调用时会先清除当前实例下所有和传入键名同名的参数，再新增这一个键值对。不管之前有多少个同键的值，调用set后只会保留本次传入的单个值。

可以通过下面的对比代码直观看出区别：

// append 多值测试
const appendTest = new URLSearchParams();
appendTest.append("color", "red");
appendTest.append("color", "blue");
console.log(appendTest.toString()); // 输出 color=red&color=blue

// set 覆盖测试
const setTest = new URLSearchParams();
setTest.append("color", "red");
setTest.set("color", "blue");
console.log(setTest.toString()); // 输出 color=blue

• 选择append：当业务逻辑允许同一个查询键携带多个值时使用，比如多选筛选条件（多个标签、多个分类ID）、批量操作的ID传参等——这类场景后端通常会把同名参数解析为数组，需要逐个追加值。
• 选择set：当业务逻辑要求查询键全局唯一时使用，比如页码参数、搜索关键词、排序规则这类逻辑上只允许存在一个值的参数——用set可以直接覆盖旧值，避免出现重复参数导致后端解析出非预期的数组值，引发接口异常。

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