遍历URLSearchParams后为何第二个参数仍未被删除？

问题原因 #

你遇到的问题源于URLSearchParams.entries()返回的是实时迭代器，它会动态反映实例的当前状态：

1. 初始迭代器指向第一个元素first，删除后剩余的second和third会向前移位
2. 迭代器接着指向原第二个位置，此时对应元素变为third，删除后循环结束
3. 原本的second此时处于第一个位置，从未被迭代器访问到，因此保留了下来

解决方案 #

有几种简单的处理方式：

方法1：直接用clear()清空（最简便）

如果只是需要清空所有参数，直接调用内置的clear()方法即可：

const queryParams = new URLSearchParams({
  first: 'something',
  second: 'something',
  third: 'something',
})

console.log('before', queryParams.toString())

queryParams.clear() // 一键清空所有键值对

console.log('after', queryParams.toString())

方法2：转静态数组后遍历

如果需要在遍历中做额外操作，先把entries()转为静态数组，遍历副本就不会受原实例动态变化影响：

const queryParams = new URLSearchParams({
  first: 'something',
  second: 'something',
  third: 'something',
})

console.log('before', queryParams.toString())

// 转换为数组后遍历静态副本
for (const [key, value] of Array.from(queryParams.entries())) {
    queryParams.delete(key)
}

console.log('after', queryParams.toString())

方法3：使用forEach()遍历

URLSearchParams的forEach()会基于遍历开始时的快照迭代，不受中途删除操作干扰：

const queryParams = new URLSearchParams({
  first: 'something',
  second: 'something',
  third: 'something',
})

console.log('before', queryParams.toString())

queryParams.forEach((value, key) => {
    queryParams.delete(key)
})

console.log('after', queryParams.toString())

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