Question

我发现了很多关于如何将对象键/值转换为URL编码查询字符串的示例，但我需要使用对象数组并将它们转换为查询字符串。

我想使用纯JS或lodash来完成这项任务。

我以这种格式提供一系列对象：

[
  { points: "30.09404881287048,-96.064453125" },
  { points: "30.09404881287048,-94.63485717773439" },
  { points: "29.345072482286373,-96.064453125" },
  { points: "29.345072482286373,-94.63485717773439"}
]

我需要它采用这种格式：

points=30.09404881287048%2C-96.064453125&points=30.09404881287048%2C-94.63485717773439&points=29.345072482286373%2C-96.064453125&points=29.345072482286373%2C-94.63485717773439

我目前正在使用这两种方法实现这一目标：

import { map as _map } from 'lodash';

const createQueryStringFromObject = object =>
  _map(object, (value, key) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
    .join('&');

const createQueryStringFromArray = array => array.reduce((queryString, object, index) => {
  return queryString + createQueryStringFromObject(object) + (index < array.length - 1 ? '&' : '');
}, '');

我发现reduce函数实现很邋and，我认为它可以更干净，更有效。有什么建议吗？

编辑：我希望保持该方法的通用性，以便它可以接受带有任何键的对象数组，而不仅仅是键points。我还想保留createQueryStringFromObject（）方法，因为我在网站的其他地方需要它。

Answer 1

我喜欢你的解决方案，但我认为只使用内置的原型方法会清理代码：

list.map(p => `points=${encodeURIComponent(p.points)}`).join('&')

导致

"points=30.09404881287048%2C-96.064453125&points=30.09404881287048%2C-94.63485717773439&points=29.345072482286373%2C-96.064453125&points=29.345072482286373%2C-94.63485717773439"

Answer 2

我正在寻找一种通用实现，它不是特定于包含points键的任何对象。感谢melpomene建议只使用另一张地图并加入，我给了他一个镜头，我非常喜欢这种格式。更短更清晰！

const createQueryStringFromArray = array =>
  _map(array, object => createQueryStringFromObject(object))
    .join('&');

如何从对象数组创建URL编码的查询字符串？

2 个答案: