如何循环 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

两个问题：

虽然 URLSearchParams 具有迭代器语义（即 Symbol.iterator 属性），但访问键不是通过正常的属性访问，而是通过 get方法：url.searchParams.get("someKey") === postID.
URLSearchParams returns 元素的迭代器协议作为 [ key, value ] 数组，而不仅仅是键本身，所以在你的 for–of 循环中， url.searchParams[k] == postID 类似于 url.searchParams[[ "someKey", "somePostId" ]] == postID，将被强制转换为 url.searchParams["someKey,somePostId"] == postID。

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

const searchParams = new URL(window.location.href).searchParams;
// const searchParams = new URLSearchParams(location.search); // Alternative.

const keyCandidates = Array.from(searchParams)
    .filter(([ key, value ]) => value === postID)
    .map(([ key ]) => key);
const keyCandidate = Array.from(searchParams)
    .find(([ key, value ]) => value === postID)[0];
const lastKeyCandidate = Array.from(searchParams)
    .reverse()
    .find(([ key, value ]) => value === postID)[0];

console.log("List of candidate keys: ", keyCandidates);
console.log("Single candidate key: ", keyCandidate);

如果您处于支持 Iterator Helpers 的环境中，则可以将其重写为：

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

lastKeyCandidate 将来可能与 Double-Ended Iterator proposal 有一个简单的等价物。

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

更多迭代示例：

const url = "https://example.com/?some=value&search=1&param=&etc";

// Equivalent to `new URL(url).search`.
const urlSearch = "?some=value&search=1&param=&etc";

// Equivalent to `new URLSearchParams(urlSearch)`.
const searchParams = new URL(url).searchParams;

// Equivalent to `Array.from(searchParams.entries())`
console.log(Array.from(searchParams));
// Result: [ [ "some", "value" ], [ "search", "1" ], [ "param", "" ], [ "etc", "" ] ]

// Equivalent to `new Map(searchParams.entries())`
console.log(new Map(searchParams));
// Result: Map { "some" → "value", "search" → "1", "param" → "", "etc" → "" }

console.log(Array.from(searchParams.keys()));
// Result: [ "some", "search", "param", "etc" ]

console.log(Array.from(searchParams.values()));
// Result: [ "value", "1", "", "" ]

for(const [ key, value ] of searchParams){
  console.log(key, value); // "some", "value"; then "search", "1"; then "param", ""; then "etc", "".
}

如何循环 URLSearchParams？

How to loop URLSearchParams?

javascript

urlsearchparams