将 javascript 对象转换为 URL 参数答案

【问题标题】：Convert javascript object to URL parameters将 javascript 对象转换为 URL 参数
【发布时间】：2014-05-05 21:06:12
【问题描述】：

我意识到，从根本上说，我可能会以错误的方式解决这个问题，所以我愿意接受任何朝着正确方向的推动。

我正在尝试使用 HipChat API 向房间发送通知，如下所示：

https://www.hipchat.com/docs/api/method/rooms/message

我正在尝试使用 js 对象的参数构建示例中的 URL，所以基本上我正在尝试转换它：

var hipChatSettings = {
            format:"json",
            auth_token:token,
            room_id: 1,
            from: "Notifications",
            message: "Message"
        }

到这里：

https://api.hipchat.com/v1/rooms/message?format=json&auth_token=token&room_id=1&from=Notifications&message=Message

【问题讨论】：

How to serialize an Object into a list of parameters?的可能重复

标签： javascript jquery url

【解决方案1】：

舞会迟到了，但我很喜欢这种简洁：

  Object.entries(hipChatSettings)
    .map(
      ([key, val]) => `${encodeURIComponent(key)}=${encodeURIComponent(val)}`
    )
    .join("&");

【讨论】：

【解决方案2】：

ES6 版本，可以用数组做真正的嵌套对象

encodeURI(getUrlString({a: 1, b: [true, 12.3, "string"]}))

getUrlString (params, keys = [], isArray = false) {
  const p = Object.keys(params).map(key => {
    let val = params[key]

    if ("[object Object]" === Object.prototype.toString.call(val) || Array.isArray(val)) {
      if (Array.isArray(params)) {
        keys.push("")
      } else {
        keys.push(key)
      }
      return getUrlString(val, keys, Array.isArray(val))
    } else {
      let tKey = key

      if (keys.length > 0) {
        const tKeys = isArray ? keys : [...keys, key]
        tKey = tKeys.reduce((str, k) => { return "" === str ? k : `${str}[${k}]` }, "")
      }
      if (isArray) {
        return `${ tKey }[]=${ val }`
      } else {
        return `${ tKey }=${ val }`
      }

    }
  }).join('&')

  keys.pop()
  return p
}

【讨论】：

实际上只有这个答案适用于多级嵌套对象/数组，除了 jQuery 之一，但如果只用于这个单一目的，jQuery 库太大了
适用于嵌套对象，这是我发现的最好的，我只添加了 encodeURIComponent(val)。

【解决方案3】：

你应该检查这个jQuery.param function。

var params = { width:1680, height:1050 };
var str = jQuery.param( params );
console.log(str);

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

（我应该说我使用的是 jQuery，但你显然读懂了我的想法）:)
他没有读懂你的心思。就在 Stack Overflow 上，当您询问有关 JavaScript 的问题时，您会得到 90 个 jQuery 答案，即使您明确表示您不想要 jQuery 答案。将来当您需要非 jQuery JavaScript 答案时请记住这一点。 ;)
@L0j1k 你是对的，但是 jQuery 答案对于从谷歌来到这里的其他人来说可能很有用，即使它们对 OP 毫无用处。所以我认为这是一种很好的时尚。
他没有读懂你的心思。他看着你的关键词。所以这逃脱了我通常对这种做法的反对意见。

【解决方案4】：

这样的东西可能对你有用

var str = "?" + Object.keys(hipChatSettings).map(function(prop) {
  return [prop, hipChatSettings[prop]].map(encodeURIComponent).join("=");
}).join("&");

// "?format=json&auth_token=token&room_id=1&from=Notifications&message=Message"

如果你不能依赖 ECMAScript 5，你可以使用一个简单的 for 循环

var pairs = [];

for (var prop in hipChatSettings) {
  if (hipChatSettings.hasOwnProperty(prop)) {
    var k = encodeURIComponent(prop),
        v = encodeURIComponent(hipChatSettings[prop]);
    pairs.push( k + "=" + v);
  }
}

var str = "?" + pairs.join("&");

【讨论】：

我喜欢这个答案。对于 ES6，您可以进一步调整到 function makeParams(params) => { return params ? '?' + Object.keys(params).map((key) => ([key, params[key]].map(encodeURIComponent).join("="))).join("&") : '' }，您可以将其附加到您的路径上，path + makeParams(params)，它可以处理 undefined、null 和 {}

【解决方案5】：

Object.keys(hipChatSettings).map(function(k) {
    return encodeURIComponent(k) + "=" + encodeURIComponent(hipChatSettings[k]);
}).join('&')
// => "format=json&auth_token=token&room_id=1&from=Notifications&message=Message"

警告：新的 JavaScript。如果您希望它适用于古人，请填充或重写为for。

【讨论】：