Question

我有两个URLSearchParams个对象，我希望将这两个对象合并为第三个。

例如，我可以

let params1 = new URLSearchParams();
params1.set('page', 'one');
params1.set('size', 'hundred');

let params2 = new URLSearchParams();
params2.set('orderBy', 'size');
params2.set('order', 'asc');

let params = params1 + params2; // yes, that's illegal, but how to do that?

我需要在params对象中包含所有4个参数。

我想使用.entries()方法迭代对象键值对，但TypeScript隐藏了此方法。以下是我在lib.dom.d.ts文件中找到的内容：

interface URLSearchParams {
    append(name: string, value: string): void;
    delete(name: string): void;
    get(name: string): string | null;
    getAll(name: string): string[];
    has(name: string): boolean;
    set(name: string, value: string): void;
}

declare var URLSearchParams: {
    prototype: URLSearchParams;
    new (init?: string | URLSearchParams): URLSearchParams;
};

所以看起来没有可能在TS中迭代URLSearchParams的选项。有什么想法吗？

Answer 1

您可以使用appendAll()方法查看Docs，如下所示

let params1 = new URLSearchParams();
params1.set('page', 'one');
params1.set('size', 'hundred');

let params2 = new URLSearchParams();
params2.set('orderBy', 'size');
params2.set('order', 'asc');
let params=new URLSearchParams();
params.appendAll(params1);
params.appendAll(params2);
console.log(params)

<强> LIVE DEMO

Answer 2

由于公认的解决方案是针对 Angular 的，这里有一个适用于 vanilla JS 的解决方案：

let params1 = new URLSearchParams();
params1.set('page', 'one');
params1.set('size', 'hundred');

let params2 = new URLSearchParams();
params2.set('page', 'two');
params2.set('orderBy', 'size');
params2.set('order', 'asc');

let combined = new URLSearchParams({
  ...Object.fromEntries(params1),
  ...Object.fromEntries(params2)
});

console.log(combined.toString());
// page=two&size=hundred&orderBy=size&order=asc

Answer 3

现在您已经解决了定义问题，以下是您其他困境的一些答案。

let params = params1 + params2; //是的，那是非法的，但是该怎么做？

URLSearchParams通过toString（）转换为查询字符串。

let params = params1.toString() + params2.toString();

注意：URLSearchParams创建一个搜索查询，在该查询中，将数组转换为等效于array.toString（）的示例，例如：q=x%2Cy%2Cz，与 querystring.stringify（）输出不同，后者将键映射到每个数组中的值，例如q=x&q=y&q=z。如果您要通过append / appendAll合并URLSearchParams，并且具有重复的键，则需要注意这一点。

要具有重复的键（更像是查询字符串），请使用迭代器创建。

let params = new URLSearchParams([
    ['page', 'one'],
    ['size', 'hundred'],
    ['orderBy', 'size'],
    ['order', 'asc']
]);

或者，params.forEach((value, name[, searchParams]) => {})也可以迭代。

手动设置每个键值会错过此构造函数的最佳功能之一-它具有解析功能！很好地将参数添加到url查询字符串的字符串都忽略了任何前导?。

let params1 = new URLSearchParams(('?page=one&size=hundred');
let params2 = new URLSearchParams({
    orderBy: 'size',
    order: 'asc'
});

如何在Angular / TypeScript中组合两个URLSearchParams？

3 个答案: