多值URLSearchParams

Question

我使用对象创建了多个URLSearchParams，主要是因为它更便于编写和读取，但是对于其中一些对象，我需要一个“变量”的多个值：foo=bar&foo=baz。

目前，我是用.append来做的，但是读起来很麻烦，多行内容完全相同。

有什么方法可以从构造函数中用对象来实现呢？

​

let params;

// Currently used (and working) code
params = new URLSearchParams()
params.append("foo", "bar");
params.append("foo", "baz");

console.log(params.toString()); //Wanted result but heavy to read with more values

// Wanted code (but not the wanted result for now)

params = new URLSearchParams({
    "foo": ["bar", "baz"]
});

console.log(params.toString());

params = new URLSearchParams({
    "foo": "bar",
    "foo": "baz"
});

console.log(params.toString());

​

Answer 1

URLSearchParams可以将init值作为其构造函数的参数，该构造函数包含以下内容：

其中之一：

• 一个字符串，它将从application/x-www-form-urlencoded格式中解析。忽略一个主要的'?'字符。
• 名称-值字符串对的文字序列，或任何对象--如FormData对象--具有生成字符串对序列的迭代器。注意，File条目将被序列化为[object File]，而不是它们的文件名(就像它们在application/x-www-form-urlencoded表单中那样)。
• 字符串键和字符串值的记录。

在你的例子中，第二个似乎是最好的，可以这样做：

​

const searchParams = new URLSearchParams([['foo', 'bar'],['foo', 'baz'],['foo', 'qux']])

console.log(searchParams.toString())

​

如果要处理对象，可以创建自己的结构，并使用函数创建想要的数据。

例如：

​

const params = [
  {name: "foo", values: ["bar", "baz", "qux"]},
  {name: "bar", values: ["foo", "foo2", "foo3"]},
]

const initParams = (params) => params.reduce((acc, curr) => {
  const arr = curr.values.map(x => [curr.name, x])
  return acc.concat(arr)
}, [])

const searchParams = new URLSearchParams(initParams(params))

console.log(searchParams.toString())

​

Answer 2

我将引入一个函数，从所需的结构(包含字符串或字符串数组的对象)构建所需的东西(URLSearchParams)，将“繁重”的细节推到您拥有的接口下面。一个简单的实现将只在适当的时候使用.append：

​

// For TypeScript (e.g. Angular) users:
// function createSearchParams(params: { [key: string]: string | string[] }): URLSearchParams {
function createSearchParams(params) {
  const searchParams = new URLSearchParams();
  Object.entries(params).forEach(([key, values]) => {
    if (Array.isArray(values)) {
      values.forEach((value) => {
        searchParams.append(key, value);
      });
    } else {
      searchParams.append(key, values);
    }
  });
  return searchParams;
}

console.log(createSearchParams({
  foo: ["bar", "baz"],
  hello: "world",
}).toString());

​

这提供了一个抽象，因此，如果您决定在幕后使用init方法，您可以这样做，例如：

​

function createSearchParams(params) {
  return new URLSearchParams(Object.entries(params).flatMap(([key, values]) => Array.isArray(values) ? values.map((value) => [key, value]) : [[key, values]]));

}

console.log(createSearchParams({
  foo: ["bar", "baz"],
  hello: "world",
}).toString());

​

您的所有测试都将继续通过，您不必更改所使用的代码。这比定义一个函数来将您想要的结构转换为URLSearchParams所需的结构要整洁得多，如雷诺德C5的回答所示。