如何正确遍历URLSearchParams？两种错误写法问题排查

URLSearchParams是浏览器内置的特殊接口实例，不是普通JS对象，不能直接用普通对象的属性访问、枚举方式操作，两种写法的错误分别如下：

第一种写法错误 #

• for...of 遍历URLSearchParams时，每次迭代返回的是[参数名, 参数值]的二元数组，不是单独的参数名，拿到的k无法直接用来取值
• 不能用url.searchParams[参数名]的方式读取参数，该实例没有直接挂载参数属性，需要调用get(参数名)方法取值

第二种写法错误 #

• Object.keys()只能读取普通JS对象自身的可枚举属性，无法识别URLSearchParams上挂载的查询参数，执行后会得到空数组，filter逻辑完全不会生效
• 数组没有keys.first属性，就算filter有结果，也无法通过这个写法拿到第一个匹配的键

正确实现示例 #

遍历写法 #

let url = new URL(window.location.href);
let key = undefined;
// 解构二元组直接拿到键和值
for (let [k, v] of url.searchParams) {
    if(v == postID) {
        key = k;
        break; // 匹配到后提前退出循环
    }
}

筛选写法 #

let url = new URL(window.location.href);
// 先把URLSearchParams转为二元组数组再筛选
const filteredItems = [...url.searchParams].filter(([k, v]) => v == postID);
// 取第一个匹配结果的键，没匹配到时为undefined
let key = filteredItems[0]?.[0];

内容的提问来源于stack exchange，提问作者János