無法從 url 查詢數組參數

Question

如何使用URLSearchParams找到其鍵為數組的參數？

// Browser url:
const url = http://localhost:4000/leads?status%5B0%5D=1&page=2;

// What my code does:
const urlParams = new URLSearchParams(window.location.search);
const myParam = (urlParams.get('status%5B0%5D') || urlParams.get(key)) || "";

// Let's focus on the below myParam:
urlParams.get('status%5B0%5D') // or
urlParams.get('status[]') // or
urlParams.has('status%5B0%5D') // or
urlParams.has('status[]') // or
urlParams.getAll('status%5B0%5D') // or
urlParams.getAll('status[]')

……沒什么用。 目的是從 url 中刪除一個鍵。鍵可以是字符串、 status或數組， status%5B0%5D 。 我正在寫一個 function 可以找到密鑰，無論它是字符串還是數組。 為什么我做什么都沒有影響？ 我錯過了什么嗎？

我看過下面的內容，但沒有任何效果：

// Copyright (c) Microsoft Corporation. All rights reserved.
// ...

interface URLSearchParams {
    /** Appends a specified key/value pair as a new search parameter. */
    append(name: string, value: string): void;
    /** Deletes the given search parameter, and its associated value, from the list of all search parameters. */
    delete(name: string): void;
    /** Returns the first value associated to the given search parameter. */
    get(name: string): string | null;
    /** Returns all the values association with a given search parameter. */
    getAll(name: string): string[];
    /** Returns a Boolean indicating if such a search parameter exists. */
    has(name: string): boolean;
    /** Sets the value associated to a given search parameter to the given value. If there were several values, delete the others. */
    set(name: string, value: string): void;
    sort(): void;
    /** Returns a string containing a query string suitable for use in a URL. Does not include the question mark. */
    toString(): string;
    forEach(callbackfn: (value: string, key: string, parent: URLSearchParams) => void, thisArg?: any): void;
}

Answer 1

如果你能夠控制 URL，你可以這樣寫一個 URL：

some-url?status=status1&status=status2&status=status3

然后你可以做.getAll('status')返回一個數組。

Answer 2

看起來你必須在使用它之前解碼 URI

var url = new URL(decodeURI('http://localhost:4000/leads?status%5B0%5D=1&page=2;'));

console.log(url.search);
// '?status[0]=1&page=2;'

console.log(url.searchParams.get('status[0]'))
// '1'

console.log(url.searchParams.getAll('status[0]'))
// ['1']

Array.from(url.searchParams.entries()).forEach( console.log )
// ['status[0]', '1']
// ['page', '2;']