javascript - 将任意嵌套对象转换为字符串的递归函数

Question

我有一个简单的对象:

   let obj = {
      season: 'winter',
      data: {
          month: ['December', 'January', 'February']
         }
    };

我需要得到一个像这样的字符串:

`season=winter&data[month][0]=December&data[month][1]=January&data[month][2]=February`

我试过了，但没有完全成功

function convertToText(obj) {
  let string = [];
  if (typeof(obj) == "object") {
    for (prop in obj) {
      if (obj.hasOwnProperty(prop))
        string.push(prop + "=" + convertToText(obj[prop]));
    };
    return string.join("&");
  } else {
    string.push(JSON.stringify(obj))
  }

  return string.join();
}

let obj = {
  season: 'winter',
  data: {
    month: ['December', 'January', 'February']
  }
};

console.log(convertToText(obj));

得到这个:

"season='winter'&data=month=0='December'&1='January'&2='February'"

Answer 1

保留一组实用函数通常很有帮助。我有一个，pathEntries ，它创建的东西类似于 Object.entries 所做的，但是它没有字符串键，而是一个字符串/整数键数组，给出了嵌套对象中的整个路径。此处使用的版本仅包括到根节点的路径。它会将您的输入转换为这种格式:

[
  [["season"], "winter"],
  [["data", "month", 0], "December"],
  [["data", "month", 1], "January"],
  [["data", "month", 2], "February"]
]

使用它，它非常简单:

const pathEntries = (obj) => Object (obj) === obj
  ? Object .entries (obj) .flatMap (([k, x]) => pathEntries (x) .map (
      ([p, v]) => [[Array .isArray (obj) ? Number (k) : k, ... p], v] 
    )) 
  : [[[], obj]]

const toQuery = (obj) => pathEntries (obj) .map (
  ([[p, ...ps], v]) => `${p}${ ps .map (n => `[${ n }]`) .join ('') }=${ v }`
) .join ('&')


const obj = {season: 'winter', data: {month: ['December', 'January', 'February']}}

console .log (toQuery (obj))

因为我们知道路径不能为空，所以我们可以轻松地从中提取第一个元素并区别对待。 (它没有包含在 [ - ] 中)，我们可以直接使用路径中的第一个节点 p 直接构建响应字符串的一部分code>、剩余节点 ps 和值 v。然后我们使用 & 将这些部分连接在一起，我们就完成了。

pathEntries 更有趣。如果我们不在对象上工作，我们只返回一个包含一对的数组:路径的空数组和我们的输入值。如果它是一个对象，那么我们使用 Object .entries 将其分解为键值对，在值上重复出现，并将键添加到每个结果的路径中。

对于这个问题，我们可以通过替换这一行来简化:

      ([p, v]) => [[Array .isArray (obj) ? Number (k) : k, ... p], v] 

与

      ([p, v]) => [[k, ... p], v] 

原始版本提供了足够的信息来重构对象，包括嵌套在任意深度的数组。通过此更改，我们会将它们变成带有 “0”、“1” 等键的普通对象。这对解决这个问题很好。但我通常选择更强大的版本，因为我可能想在应用程序的多个地方重用它。

注意事项

用户 Mulan 建议，在我们 recur 时不断检查我们的 key 是否是数字是次优的。有很多方法可以解决这个问题，包括将其存储在 IIFE 中，使用 call/bind 帮助程序，或使用(滥用？) Object 。条目 返回对 的集合，双元素数组，默认第三个参数，如下所示:

const pathEntries = (obj) => Object (obj) === obj
  ? Object .entries (obj) .flatMap (
      ([k, x, k1 = Array .isArray (obj) ? Number (k) : k]) => 
        pathEntries (x) .map (([p, v]) => [[k1, ... p], v])
    ) 
  : [[[], obj]]

花木兰还提到 URLSearchParams API 是构建健壮 URL 的更好方法。这是完全正确的。我们可以这样做:

const pathEntries = (obj) => Object (obj) === obj
  ? Object .entries (obj) .flatMap (
      ([k, x, k1 = Array .isArray (obj) ? Number (k) : k]) => 
        pathEntries (x) .map (([p, v]) => [[k1, ... p], v])
    ) 
  : [[[], obj]]

const toQuery = (obj) => pathEntries (obj) .map (
  ([[p, ...ps], v]) => [`${p}${ ps .map (n => `[${ n }]`) .join ('') }`, v]
) .reduce ((usp, [k, v]) => ((usp .append (k, v)), usp), new URLSearchParams (''))


const obj = {season: 'winter', data: {month: ['December', 'January', 'February']}}

console .log (toQuery (obj) .toString()) 

请注意，括号现在已正确编码。但是，这不是所请求的确切输出。您必须决定这是否适合您的需求。