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

两个问题：

1. 虽然URLSearchParams具有迭代器语义(即Symbol.iterator属性)，但访问键不是通过正常的属性访问，而是通过get方法：url.searchParams.get("someKey") === postID执行。
2. URLSearchParams的迭代器协议以[ 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);

如果您所处的环境支持爱尔兰人帮手，则可以将其重写为：

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

lastKeyCandidate在未来可能与双端爱尔兰人提案有一个简单的等价关系。

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", "".
}

​