如何循环 URLSearchParams？

Question

我尝试了这两个选项，但没有任何运气：

let url = new URL(window.location.href);
let key = undefined;

for (let k of url.searchParams) {
    if(url.searchParams[k] == postID) {
        key = k;
    }
}

和

let url = new URL(window.location.href);
const filteredItems = Object.keys(url.searchParams).filter(key =>
  url.searchParams[key] == postID
);
let key = filteredItems.keys.first;

怎么了？

Answer 1

两个问题：

\n

\n
1. 虽然URLSearchParams具有迭代器语义（即Symbol.iterator属性），但访问键不是通过正常的属性访问执行的，而是通过方法get：url.searchParams.get("someKey") === postID。
\n
2. 的迭代器协议将URLSearchParams元素作为[ key, value ]数组返回，而不仅仅是键本身，因此在您的for\xe2\x80\x93of循环中，url.searchParams[k] == postID类似于url.searchParams[[ "someKey", "somePostId" ]] == postID，它将被强制为url.searchParams["someKey,somePostId"] == postID。
\n

\n

查找值匹配的键（或多个键postID）的工作方法如下所示：

\n

const searchParams = new URL(window.location.href).searchParams;\n// const searchParams = new URLSearchParams(location.search); // Alternative.\n\nconst keyCandidates = Array.from(searchParams)\n    .filter(([ key, value ]) => value === postID)\n    .map(([ key ]) => key);\nconst keyCandidate = Array.from(searchParams)\n    .find(([ key, value ]) => value === postID)[0];\nconst lastKeyCandidate = Array.from(searchParams)\n    .reverse()\n    .find(([ key, value ]) => value === postID)[0];\n\nconsole.log("List of candidate keys: ", keyCandidates);\nconsole.log("Single candidate key: ", keyCandidate);\n

\n

如果您\xe2\x80\x99处于支持迭代器助手的环境中，则可以将其重写为：

\n

const keyCandidates = searchParams.entries()\n    .filter(([ key, value ]) => value === postID)\n    .map(([ key ]) => key)\n    .toArray();\nconst keyCandidate = searchParams.entries()\n    .find(([ key, value ]) => value === postID)[0];\n

\n

lastKeyCandidate将来可能会有一个简单的等效方案，即双端迭代器提案。

\n

const lastKeyCandidate = searchParams.entries()\n    .filter(([ key, value ]) => value === "1")\n    .map(([ key ]) => key)\n    .next("back") // Get last entry in iterator.\n    .value;\n

\n\n

更多迭代示例：

\n

\r\n

\r\n

const url = "https://example.com/?some=value&search=1&param=&etc";\n\n// Equivalent to `new URL(url).search`.\nconst urlSearch = "?some=value&search=1&param=&etc";\n\n// Equivalent to `new URLSearchParams(urlSearch)`.\nconst searchParams = new URL(url).searchParams;\n\n// Equivalent to `Array.from(searchParams.entries())`\nconsole.log(Array.from(searchParams));\n// Result: [ [ "some", "value" ], [ "search", "1" ], [ "param", "" ], [ "etc", "" ] ]\n\n// Equivalent to `new Map(searchParams.entries())`\nconsole.log(new Map(searchParams));\n// Result: Map { "some" \xe2\x86\x92 "value", "search" \xe2\x86\x92 "1", "param" \xe2\x86\x92 "", "etc" \xe2\x86\x92 "" }\n\nconsole.log(Array.from(searchParams.keys()));\n// Result: [ "some", "search", "param", "etc" ]\n\nconsole.log(Array.from(searchParams.values()));\n// Result: [ "value", "1", "", "" ]\n\nfor(const [ key, value ] of searchParams){\n  console.log(key, value); // "some", "value"; then "search", "1"; then "param", ""; then "etc", "".\n}

\r\n

\r\n

\r\n

\n