blocks|key|1410485|text|是像这样吗？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1410486|​|1410487|serialize+=+function(obj)+{
++var+str+=+[];
++for+(var+p+in+obj)
++++if+(obj.hasOwnProperty(p))+{
++++++str.push(encodeURIComponent(p)+%2B+"="+%2B+encodeURIComponent(obj[p]));
++++}
++return+str.join("&");
}

console.log(serialize({
++foo:+"hi+there",
++bar:+"100%25"
}));
//+foo=hi%2520there&bar=100%2525|code-block|syntax|javascript|1410488|1410489|Edit:它还可以转换递归对象(使用php+"array“表示法作为查询字符串)|1410490|1410491|serialize+=+function(obj,+prefix)+{
++var+str+=+[],
++++p;
++for+(p+in+obj)+{
++++if+(obj.hasOwnProperty(p))+{
++++++var+k+=+prefix+?+prefix+%2B+"["+%2B+p+%2B+"]"+:+p,
++++++++v+=+obj[p];
++++++str.push((v+!==+null+&&+typeof+v+===+"object")+?
++++++++serialize(v,+k)+:
++++++++encodeURIComponent(k)+%2B+"="+%2B+encodeURIComponent(v));
++++}
++}
++return+str.join("&");
}

console.log(serialize({
++foo:+"hi+there",
++bar:+{
++++blah:+123,
++++quux:+[1,+2,+3]
++}
}));
//+foo=hi%2520there&bar%255Bblah%255D=123&bar%255Bquux%255D%255B0%255D=1&bar%255Bquux%255D%255B1%255D=2&bar%255Bquux%255D%255B2%255D=3|1410492|1410493|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|T|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|V|8|@]|9|@]|A|$]]|$1|L|3|C|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|F|7|X|8|@]|9|@]|A|$G|H]]|$1|O|3|C|5|6|7|Y|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|Q|$]]

<p>like this?</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>serialize = function(obj) {
  var str = [];
  for (var p in obj)
    if (obj.hasOwnProperty(p)) {
      str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
    }
  return str.join("&amp;");
}

console.log(serialize({
  foo: "hi there",
  bar: "100%"
}));
// foo=hi%20there&amp;bar=100%25</code></pre>
</div>
</div>
</p>

<p>Edit: this one also converts recursive objects (using php "array" notation for the query string)</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>serialize = function(obj, prefix) {
  var str = [],
    p;
  for (p in obj) {
    if (obj.hasOwnProperty(p)) {
      var k = prefix ? prefix + "[" + p + "]" : p,
        v = obj[p];
      str.push((v !== null &amp;&amp; typeof v === "object") ?
        serialize(v, k) :
        encodeURIComponent(k) + "=" + encodeURIComponent(v));
    }
  }
  return str.join("&amp;");
}

console.log(serialize({
  foo: "hi there",
  bar: {
    blah: 123,
    quux: [1, 2, 3]
  }
}));
// foo=hi%20there&amp;bar%5Bblah%5D=123&amp;bar%5Bquux%5D%5B0%5D=1&amp;bar%5Bquux%5D%5B1%5D=2&amp;bar%5Bquux%5D%5B2%5D=3</code></pre>
</div>
</div>
</p>


blocks|key|1411495|text|只需使用URLSearchParams此works+in+all+current+browsers|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1411496|new+URLSearchParams(object).toString()|code-block|syntax|javascript|1411497|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams|1|https://caniuse.com/#feat=urlsearchparams^0|4|F|4|F|0|K|T|1|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@$9|X|A|Y|1|Z]|$9|10|A|11|1|12]]|E|$]]|$1|F|3|G|5|H|7|13|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|L|$M|$5|N|O|P|E|$Q|R]]|S|$5|N|O|P|E|$Q|T]]]]

<p>Just use <a href="https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams" rel="noreferrer"><code>URLSearchParams</code></a> This <a href="https://caniuse.com/#feat=urlsearchparams" rel="noreferrer">works in all current browsers</a></p>

<pre class="lang-js prettyprint-override"><code>new URLSearchParams(object).toString()
</code></pre>


blocks|key|1195201|text|jQuery有一个这样的函数，jQuery.param()，如果你已经在使用它，你可以使用它：http://api.jquery.com/jquery.param/|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1195202|示例：|1195203|var+params+=+{+width:1680,+height:1050+};
var+str+=+jQuery.param(+params+);|code-block|syntax|javascript|1195204|str现在包含width=1680&height=1050|1195205|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/jquery.param/^0|F|E|1B|Z|0|0|0|0|0|3|7|M|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|F|3|G|5|6|7|12|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|13|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|14|8|@$9|15|A|16|B|C]|$9|17|A|18|B|C]]|D|@]|E|$]]|$1|O|3|-4|5|6|7|19|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

<p>jQuery has a function for this, <code>jQuery.param()</code>, if you're already using it you can use that:
<a href="http://api.jquery.com/jquery.param/" rel="noreferrer">http://api.jquery.com/jquery.param/</a></p>

<p>example:</p>

<pre><code>var params = { width:1680, height:1050 };
var str = jQuery.param( params );
</code></pre>

<p><code>str</code> now contains <code>width=1680&amp;height=1050</code></p>


blocks|key|1410817|text|Object.keys(obj).reduce(function(a,k){a.push(k%2B'='%2BencodeURIComponent(obj[k]));return+a},[]).join('&')|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1410818|编辑:我喜欢这一行，但我敢打赌，如果它在语义上与公认的答案相匹配，它将是更受欢迎的答案：|unstyled|1410819|function+serialize(+obj+)+{
++++let+str+=+'?'+%2B+Object.keys(obj).reduce(function(a,+k){
++++++++a.push(k+%2B+'='+%2B+encodeURIComponent(obj[k]));
++++++++return+a;
++++},+[]).join('&');
++++return+str;
}|1410820|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|L|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|I|3|-4|5|F|7|N|8|@]|9|@]|A|$]]]|J|$]]

<pre><code>Object.keys(obj).reduce(function(a,k){a.push(k+'='+encodeURIComponent(obj[k]));return a},[]).join('&amp;')
</code></pre>

<p>Edit: I like this one-liner, but I bet it would be a more popular answer if it matched the accepted answer semantically:</p>

<pre><code>function serialize( obj ) {
    let str = '?' + Object.keys(obj).reduce(function(a, k){
        a.push(k + '=' + encodeURIComponent(obj[k]));
        return a;
    }, []).join('&amp;');
    return str;
}
</code></pre>


blocks|key|1195875|text|我建议使用URLSearchParams接口：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1195876|​|1195877|const+searchParams+=+new+URLSearchParams();
const+params+=+{foo:+"hi+there",+bar:+"100%25"+};
Object.keys(params).forEach(key+=>+searchParams.append(key,+params[key]));
console.log(searchParams.toString())|code-block|syntax|javascript|1195878|1195879|或者将搜索对象传递给构造函数，如下所示：|1195880|1195881|const+params+=+{foo:+"hi+there",+bar:+"100%25"+};
const+queryString+=+new+URLSearchParams(params).toString();
console.log(queryString);|1195882|1195883|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams^0|5|F|5|F|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@$9|12|A|13|B|C]]|D|@$9|14|A|15|1|16]]|E|$]]|$1|F|3|G|5|6|7|17|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|18|8|@]|D|@]|E|$K|L]]|$1|M|3|G|5|6|7|19|8|@]|D|@]|E|$]]|$1|N|3|O|5|6|7|1A|8|@]|D|@]|E|$]]|$1|P|3|G|5|6|7|1B|8|@]|D|@]|E|$]]|$1|Q|3|R|5|J|7|1C|8|@]|D|@]|E|$K|L]]|$1|S|3|G|5|6|7|1D|8|@]|D|@]|E|$]]|$1|T|3|-4|5|6|7|1E|8|@]|D|@]|E|$]]]|U|$V|$5|W|X|Y|E|$Z|10]]]]

<p>I suggest using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams" rel="noreferrer"><code>URLSearchParams</code></a> interface:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const searchParams = new URLSearchParams();
const params = {foo: "hi there", bar: "100%" };
Object.keys(params).forEach(key =&gt; searchParams.append(key, params[key]));
console.log(searchParams.toString())</code></pre>
</div>
</div>
</p>
<p>Or by passing the search object into the constructor like this:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const params = {foo: "hi there", bar: "100%" };
const queryString = new URLSearchParams(params).toString();
console.log(queryString);</code></pre>
</div>
</div>
</p>


blocks|key|1410872|text|下面是ES6中的一行代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1410873|Object.keys(obj).map(k+=>+`${encodeURIComponent(k)}=${encodeURIComponent(obj[k])}`).join('&');|code-block|syntax|javascript|1410874|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Here's a one liner in ES6:</p>

<pre><code>Object.keys(obj).map(k =&gt; `${encodeURIComponent(k)}=${encodeURIComponent(obj[k])}`).join('&amp;');
</code></pre>


blocks|key|1410955|text|使用Node.js+v6.6.3|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1410956|const+querystring+=+require('querystring')

const+obj+=+{
++foo:+'bar',
++baz:+'tor'
}

let+result+=+querystring.stringify(obj)
//+foo=bar&baz=tor|code-block|syntax|javascript|1410957|参考：https://nodejs.org/api/querystring.html|offset|length|1410958|entityMap|0|LINK|mutability|MUTABLE|url|https://nodejs.org/api/querystring.html^0|0|0|3|13|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<h2>With Node.js v6.6.3</h2>

<pre><code>const querystring = require('querystring')

const obj = {
  foo: 'bar',
  baz: 'tor'
}

let result = querystring.stringify(obj)
// foo=bar&amp;baz=tor
</code></pre>

<p>Reference: <a href="https://nodejs.org/api/querystring.html">https://nodejs.org/api/querystring.html</a></p>


blocks|key|1195426|text|对user187291接受的解决方案进行了小小的修改：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1195427|serialize+=+function(obj)+{
+++var+str+=+[];
+++for(var+p+in+obj){
+++++++if+(obj.hasOwnProperty(p))+{
+++++++++++str.push(encodeURIComponent(p)+%2B+"="+%2B+encodeURIComponent(obj[p]));
+++++++}
+++}
+++return+str.join("&");
}|code-block|syntax|javascript|1195428|检查对象上的hasOwnProperty会让JSLint/JSHint感到高兴，而且如果对象不是简单的字典，它可以防止意外地序列化对象的方法或其他东西。有关本页中的语句，请参阅上的段落：http://javascript.crockford.com/code.html|offset|length|1195429|entityMap|0|LINK|mutability|MUTABLE|url|http://javascript.crockford.com/code.html^0|0|0|2L|15|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>A small amendment to the accepted solution by user187291:</p>

<pre><code>serialize = function(obj) {
   var str = [];
   for(var p in obj){
       if (obj.hasOwnProperty(p)) {
           str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
       }
   }
   return str.join("&amp;");
}
</code></pre>

<p>Checking for hasOwnProperty on the object makes JSLint/JSHint happy, and it prevents accidentally serializing methods of the object or other stuff if the object is anything but a simple dictionary. See the paragraph on for statements in this page: <a href="http://javascript.crockford.com/code.html">http://javascript.crockford.com/code.html</a></p>


blocks|key|1196046|text|好吧，似乎每个人都把他的一行放在这里，所以我的是这样的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1196047|const+encoded+=+Object.entries(obj).map(([k,+v])+=>+`${k}=${encodeURIComponent(v)}`).join("&");|code-block|syntax|javascript|1196048|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Well, everyone seems to put his one-liner here so here goes mine:</p>

<pre><code>const encoded = Object.entries(obj).map(([k, v]) =&gt; `${k}=${encodeURIComponent(v)}`).join("&amp;");
</code></pre>


blocks|key|1195161|text|你需要发送任意对象吗？如果是这样的话，GET不是一个好主意，因为用户代理和web服务器接受的URL长度是有限制的。我的建议是构建一个要发送的名称-值对数组，然后构建一个查询字符串：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1195162|function+QueryStringBuilder()+{
++++var+nameValues+=+[];

++++this.add+=+function(name,+value)+{
++++++++nameValues.push(+{name:+name,+value:+value}+);
++++};

++++this.toQueryString+=+function()+{
++++++++var+segments+=+[],+nameValue;
++++++++for+(var+i+=+0,+len+=+nameValues.length;+i+<+len;+i%2B%2B)+{
++++++++++++nameValue+=+nameValues[i];
++++++++++++segments[i]+=+encodeURIComponent(nameValue.name)+%2B+"="+%2B+encodeURIComponent(nameValue.value);
++++++++}
++++++++return+segments.join("&");
++++};
}

var+qsb+=+new+QueryStringBuilder();
qsb.add("veg",+"cabbage");
qsb.add("vegCount",+"5");

alert(+qsb.toQueryString()+);|code-block|syntax|javascript|1195163|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Do you need to send arbitrary objects? If so, GET is a bad idea since there are limits to the lengths of URLs that user agents and web servers will accepts. My suggestion would be to build up an array of name-value pairs to send and then build up a query string:</p>

<pre><code>function QueryStringBuilder() {
    var nameValues = [];

    this.add = function(name, value) {
        nameValues.push( {name: name, value: value} );
    };

    this.toQueryString = function() {
        var segments = [], nameValue;
        for (var i = 0, len = nameValues.length; i &lt; len; i++) {
            nameValue = nameValues[i];
            segments[i] = encodeURIComponent(nameValue.name) + "=" + encodeURIComponent(nameValue.value);
        }
        return segments.join("&amp;");
    };
}

var qsb = new QueryStringBuilder();
qsb.add("veg", "cabbage");
qsb.add("vegCount", "5");

alert( qsb.toQueryString() );
</code></pre>


blocks|key|1410674|text|这是接受答案的coffeescript版本。这可能会节省一些人的时间。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1410675|serialize+=+(obj,+prefix)+->
++str+=+[]
++for+p,+v+of+obj
++++k+=+if+prefix+then+prefix+%2B+"["+%2B+p+%2B+"]"+else+p
++++if+typeof+v+==+"object"
++++++str.push(serialize(v,+k))
++++else
++++++str.push(encodeURIComponent(k)+%2B+"="+%2B+encodeURIComponent(v))

++str.join("&")|code-block|syntax|javascript|1410676|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Here's the coffeescript version of accepted answer. This might save time to someone.</p>

<pre><code>serialize = (obj, prefix) -&gt;
  str = []
  for p, v of obj
    k = if prefix then prefix + "[" + p + "]" else p
    if typeof v == "object"
      str.push(serialize(v, k))
    else
      str.push(encodeURIComponent(k) + "=" + encodeURIComponent(v))

  str.join("&amp;")
</code></pre>


blocks|key|1411127|text|这是一个简洁的Object.entries递归版本。它处理任意嵌套的数组，但不处理嵌套的对象。它还会删除空元素：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1411128|const+format+=+(k,v)+=>+v+!==+null+?+`${k}=${encodeURIComponent(v)}`+:+''

const+to_qs+=+(obj)+=>+{
++++return+[].concat(...Object.entries(obj)
+++++++++++++++++++++++.map(([k,v])+=>+Array.isArray(v)+
++++++++++++++++++++++++++?+v.map(arr+=>+to_qs({[k]:arr}))+
++++++++++++++++++++++++++:+format(k,v)))
+++++++++++.filter(x+=>+x)
+++++++++++.join('&');
}|code-block|syntax|javascript|1411129|例如：|1411130|let+json+=+{+
++++a:+[1,+2,+3],
++++b:+[],++++++++++++++//+omit+b
++++c:+1,
++++d:+"test&encoding",+//+uriencode
++++e:+[[4,5],[6,7]],+++//+flatten+this
++++f:+null,++++++++++++//+omit+nulls
++++g:+0
};

let+qs+=+to_qs(json)

=>+"a=1&a=2&a=3&c=1&d=test%2526encoding&e=4&e=5&e=6&e=7&g=0"|1411131|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/entries^0|7|E|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@]|C|$]]|$1|K|3|L|5|F|7|10|8|@]|9|@]|C|$G|H]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

<p>Here's a concise &amp; recursive version with <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/entries" rel="noreferrer">Object.entries</a>.  It handles arbitrarily nested arrays, but not nested objects.  It also removes empty elements:</p>



<pre><code>const format = (k,v) =&gt; v !== null ? `${k}=${encodeURIComponent(v)}` : ''

const to_qs = (obj) =&gt; {
    return [].concat(...Object.entries(obj)
                       .map(([k,v]) =&gt; Array.isArray(v) 
                          ? v.map(arr =&gt; to_qs({[k]:arr})) 
                          : format(k,v)))
           .filter(x =&gt; x)
           .join('&amp;');
}
</code></pre>

<p>E.g.:</p>



<pre><code>let json = { 
    a: [1, 2, 3],
    b: [],              // omit b
    c: 1,
    d: "test&amp;encoding", // uriencode
    e: [[4,5],[6,7]],   // flatten this
    f: null,            // omit nulls
    g: 0
};

let qs = to_qs(json)

=&gt; "a=1&amp;a=2&amp;a=3&amp;c=1&amp;d=test%26encoding&amp;e=4&amp;e=5&amp;e=6&amp;e=7&amp;g=0"
</code></pre>


blocks|key|1195678|text|看起来更好一点|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1195679|objectToQueryString(obj,+prefix)+{
++++return+Object.keys(obj).map(objKey+=>+{
++++++++if+(obj.hasOwnProperty(objKey))+{
++++++++++++const+key+=+prefix+?+`${prefix}[${objKey}]`+:+objKey;
++++++++++++const+value+=+obj[objKey];

++++++++++++return+typeof+value+===+"object"+?
++++++++++++++++this.objectToQueryString(value,+key)+:
++++++++++++++++`${encodeURIComponent(key)}=${encodeURIComponent(value)}`;
++++++++}

++++++++return+null;
++++}).join("&");
}|code-block|syntax|javascript|1195680|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>A little bit look better</p>

<pre><code>objectToQueryString(obj, prefix) {
    return Object.keys(obj).map(objKey =&gt; {
        if (obj.hasOwnProperty(objKey)) {
            const key = prefix ? `${prefix}[${objKey}]` : objKey;
            const value = obj[objKey];

            return typeof value === "object" ?
                this.objectToQueryString(value, key) :
                `${encodeURIComponent(key)}=${encodeURIComponent(value)}`;
        }

        return null;
    }).join("&amp;");
}
</code></pre>


blocks|key|1411070|text|此命令跳过null/未定义的值|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1411071|export+function+urlEncodeQueryParams(data)+{
++++const+params+=+Object.keys(data).map(key+=>+data[key]+?+`${encodeURIComponent(key)}=${encodeURIComponent(data[key])}`+:+'');
++++return+params.filter(value+=>+!!value).join('&');
}|code-block|syntax|javascript|1411072|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This one skips null/undefined values</p>

<pre><code>export function urlEncodeQueryParams(data) {
    const params = Object.keys(data).map(key =&gt; data[key] ? `${encodeURIComponent(key)}=${encodeURIComponent(data[key])}` : '');
    return params.filter(value =&gt; !!value).join('&amp;');
}
</code></pre>


blocks|key|1196021|text|在ES7中，您可以在一行中编写以下代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1196022|const+serialize+=+(obj)+=>+(Object.entries(obj).map(i+=>+[i[0],+encodeURIComponent(i[1])].join('=')).join('&'))|code-block|syntax|javascript|1196023|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>In ES7 you can write this in one line:</p>

<pre class="lang-js prettyprint-override"><code>const serialize = (obj) =&gt; (Object.entries(obj).map(i =&gt; [i[0], encodeURIComponent(i[1])].join('=')).join('&amp;'))
</code></pre>


blocks|key|1411265|text|单行代码将对象转换为查询字符串，以防有人再次需要它|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1411266|let+Objs+=+{+a:+'obejct-a',+b:+'object-b'+}

Object.keys(objs).map(key+=>+key+%2B+'='+%2B+objs[key]).join('&')

//+result+will+be+a=object-a&b=object-b|code-block|syntax|javascript|1411267|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Single line to convert Object into Query String in case somebody need it again</p>

<pre><code>let Objs = { a: 'obejct-a', b: 'object-b' }

Object.keys(objs).map(key =&gt; key + '=' + objs[key]).join('&amp;')

// result will be a=object-a&amp;b=object-b
</code></pre>


blocks|key|1195305|text|如果你想递归地转换一个嵌套的对象，并且该对象可能包含数组，也可能不包含数组(数组可能包含对象或数组等)，那么解决方案就会变得稍微复杂一些。这是我的尝试。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1195306|我还添加了一些选项，用于选择是否要记录每个对象成员在主对象中的深度，以及是否要向来自转换后的数组的成员添加标签。|1195307|理想情况下，您应该测试thing参数是否真的接收对象或数组。|1195308|function+thingToString(thing,maxDepth,recordLevel,markArrays){
++++//thing:+object+or+array+to+be+recursively+serialized
++++//maxDepth+(int+or+false):
++++//+(int)+how+deep+to+go+with+converting+objects/arrays+within+objs/arrays
++++//+(false)+no+limit+to+recursive+objects/arrays+within+objects/arrays
++++//recordLevel+(boolean):
++++//++true+-+insert+"(level+1)"+before+transcript+of+members+at+level+one+(etc)
++++//++false+-+just+
++++//markArrays+(boolean):
++++//++insert+text+to+indicate+any+members+that+came+from+arrays
++++var+result+=+"";
++++if+(maxDepth+!==+false+&&+typeof+maxDepth+!=+'number')+{maxDepth+=+3;}
++++var+runningDepth+=+0;//Keeps+track+how+deep+we're+into+recursion

++++//First+prepare+the+function,+so+that+it+can+call+itself+recursively
++++function+serializeAnything(thing){
++++++++//Set+path-finder+values
++++++++runningDepth+%2B=+1;
++++++++if(recordLevel){result+%2B=+"(level+"+%2B+runningDepth+%2B+")";}

++++++++//First+convert+any+arrays+to+object+so+they+can+be+processed
++++++++if+(thing+instanceof+Array){
++++++++++++var+realObj+=+{};var+key;
++++++++++++if+(markArrays)+{realObj['type']+=+"converted+array";}
++++++++++++for+(var+i+=+0;i+<+thing.length;i%2B%2B){
++++++++++++++++if+(markArrays)+{key+=+"a"+%2B+i;}+else+{key+=+i;}
++++++++++++++++realObj[key]+=+thing[i];
++++++++++++}
++++++++++++thing+=+realObj;
++++++++++++console.log('converted+one+array+to+'+%2B+typeof+realObj);
++++++++++++console.log(thing);
++++++++}

++++++++//Then+deal+with+it
++++++++for+(var+member+in+thing){
++++++++++++if+(typeof+thing[member]+==+'object'+&&+runningDepth+<+maxDepth){
++++++++++++++++serializeAnything(thing[member]);
++++++++++++++++//When+a+sub-object/array+is+serialized,+it+will+add+one+to
++++++++++++++++//running+depth.+But+when+we+continue+to+this+object/array's
++++++++++++++++//next+sibling,+the+level+must+go+back+up+by+one
++++++++++++++++runningDepth+-=+1;
++++++++++++}+else+if+(maxDepth+!==+false+&&+runningDepth+>=+maxDepth)+{
++++++++++++++++console.log('Reached+bottom');
++++++++++++}+else+
++++++++++++if+(
++++++++++++++++typeof+thing[member]+==+"string"+%7C%7C+
++++++++++++++++typeof+thing[member]+==+'boolean'+%7C%7C
++++++++++++++++typeof+thing[member]+==+'number'
++++++++++++){
++++++++++++++++result+%2B=+"("+%2B+member+%2B+":+"+%2B+thing[member]+%2B+")+";
++++++++++++}++else+{
++++++++++++++++result+%2B=+"("+%2B+member+%2B+":+["+%2B+typeof+thing[member]+%2B+"+not+supported])+";
++++++++++++}
++++++++}
++++}
++++//Actually+kick+off+the+serialization
++++serializeAnything(thing);

++++return+result;

}|code-block|syntax|javascript|1195309|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|O|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|P|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>If you want to convert a nested object recursively and the object may or may not contain arrays (and the arrays may contain objects or arrays, etc), then the solution gets a little more complex. This is my attempt.</p>

<p>I've also added some options to choose if you want to record for each object member at what depth in the main object it sits, and to choose if you want to add a label to the members that come from converted arrays.</p>

<p>Ideally you should test if the thing parameter really receives an object or array.</p>

<pre><code>function thingToString(thing,maxDepth,recordLevel,markArrays){
    //thing: object or array to be recursively serialized
    //maxDepth (int or false):
    // (int) how deep to go with converting objects/arrays within objs/arrays
    // (false) no limit to recursive objects/arrays within objects/arrays
    //recordLevel (boolean):
    //  true - insert "(level 1)" before transcript of members at level one (etc)
    //  false - just 
    //markArrays (boolean):
    //  insert text to indicate any members that came from arrays
    var result = "";
    if (maxDepth !== false &amp;&amp; typeof maxDepth != 'number') {maxDepth = 3;}
    var runningDepth = 0;//Keeps track how deep we're into recursion

    //First prepare the function, so that it can call itself recursively
    function serializeAnything(thing){
        //Set path-finder values
        runningDepth += 1;
        if(recordLevel){result += "(level " + runningDepth + ")";}

        //First convert any arrays to object so they can be processed
        if (thing instanceof Array){
            var realObj = {};var key;
            if (markArrays) {realObj['type'] = "converted array";}
            for (var i = 0;i &lt; thing.length;i++){
                if (markArrays) {key = "a" + i;} else {key = i;}
                realObj[key] = thing[i];
            }
            thing = realObj;
            console.log('converted one array to ' + typeof realObj);
            console.log(thing);
        }

        //Then deal with it
        for (var member in thing){
            if (typeof thing[member] == 'object' &amp;&amp; runningDepth &lt; maxDepth){
                serializeAnything(thing[member]);
                //When a sub-object/array is serialized, it will add one to
                //running depth. But when we continue to this object/array's
                //next sibling, the level must go back up by one
                runningDepth -= 1;
            } else if (maxDepth !== false &amp;&amp; runningDepth &gt;= maxDepth) {
                console.log('Reached bottom');
            } else 
            if (
                typeof thing[member] == "string" || 
                typeof thing[member] == 'boolean' ||
                typeof thing[member] == 'number'
            ){
                result += "(" + member + ": " + thing[member] + ") ";
            }  else {
                result += "(" + member + ": [" + typeof thing[member] + " not supported]) ";
            }
        }
    }
    //Actually kick off the serialization
    serializeAnything(thing);

    return result;

}
</code></pre>


blocks|key|1410921|text|此外，对于接受的解决方案，这适用于对象和对象数组：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1410922|parseJsonAsQueryString+=+function+(obj,+prefix,+objName)+{
++++var+str+=+[];
++++for+(var+p+in+obj)+{
++++++++if+(obj.hasOwnProperty(p))+{
++++++++++++var+v+=+obj[p];
++++++++++++if+(typeof+v+==+"object")+{
++++++++++++++++var+k+=+(objName+?+objName+%2B+'.'+:+'')+%2B+(prefix+?+prefix+%2B+"["+%2B+p+%2B+"]"+:+p);
++++++++++++++++str.push(parseJsonAsQueryString(v,+k));
++++++++++++}+else+{
++++++++++++++++var+k+=+(objName+?+objName+%2B+'.'+:+'')+%2B+(prefix+?+prefix+%2B+'.'+%2B+p+:+p);
++++++++++++++++str.push(encodeURIComponent(k)+%2B+"="+%2B+encodeURIComponent(v));
++++++++++++++++//str.push(k+%2B+"="+%2B+v);
++++++++++++}
++++++++}
++++}
++++return+str.join("&");
}|code-block|syntax|javascript|1410923|如果你正在使用对象参数，比如在asp.net+mvc+action方法中，我也添加了objName。|1410924|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Addition for accepted solution, this works with objects &amp; array of objects:</p>

<pre><code>parseJsonAsQueryString = function (obj, prefix, objName) {
    var str = [];
    for (var p in obj) {
        if (obj.hasOwnProperty(p)) {
            var v = obj[p];
            if (typeof v == "object") {
                var k = (objName ? objName + '.' : '') + (prefix ? prefix + "[" + p + "]" : p);
                str.push(parseJsonAsQueryString(v, k));
            } else {
                var k = (objName ? objName + '.' : '') + (prefix ? prefix + '.' + p : p);
                str.push(encodeURIComponent(k) + "=" + encodeURIComponent(v));
                //str.push(k + "=" + v);
            }
        }
    }
    return str.join("&amp;");
}
</code></pre>

<p>Also have added objName if you're using object parameters like in asp.net mvc action methods.</p>


blocks|key|1411441|text|我做了一个comparison+of+JSON+stringifiers，结果如下：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1411442|JSON:++++{"_id":"5973782bdb9a930533b05cb2","isActive":true,"balance":"$1,446.35","age":32,"name":"Logan+Keller","email":"logankeller@artiq.com","phone":"%2B1+(952)+533-2258","friends":[{"id":0,"name":"Colon+Salazar"},{"id":1,"name":"French+Mcneil"},{"id":2,"name":"Carol+Martin"}],"favoriteFruit":"banana"}
Rison:+++(_id:'5973782bdb9a930533b05cb2',age:32,balance:'$1,446.35',email:'logankeller@artiq.com',favoriteFruit:banana,friends:!((id:0,name:'Colon+Salazar'),(id:1,name:'French+Mcneil'),(id:2,name:'Carol+Martin')),isActive:!t,name:'Logan+Keller',phone:'%2B1+(952)+533-2258')
O-Rison:+_id:'5973782bdb9a930533b05cb2',age:32,balance:'$1,446.35',email:'logankeller@artiq.com',favoriteFruit:banana,friends:!((id:0,name:'Colon+Salazar'),(id:1,name:'French+Mcneil'),(id:2,name:'Carol+Martin')),isActive:!t,name:'Logan+Keller',phone:'%2B1+(952)+533-2258'
JSURL:+++~(_id~'5973782bdb9a930533b05cb2~isActive~true~balance~'!1*2c446.35~age~32~name~'Logan*20Keller~email~'logankeller*40artiq.com~phone~'*2b1*20*28952*29*20533-2258~friends~(~(id~0~name~'Colon*20Salazar)~(id~1~name~'French*20Mcneil)~(id~2~name~'Carol*20Martin))~favoriteFruit~'banana)
QS:++++++_id=5973782bdb9a930533b05cb2&isActive=true&balance=$1,446.35&age=32&name=Logan+Keller&email=logankeller@artiq.com&phone=%2B1+(952)+533-2258&friends[0][id]=0&friends[0][name]=Colon+Salazar&friends[1][id]=1&friends[1][name]=French+Mcneil&friends[2][id]=2&friends[2][name]=Carol+Martin&favoriteFruit=banana
URLON:+++$_id=5973782bdb9a930533b05cb2&isActive:true&balance=$1,446.35&age:32&name=Logan%2520Keller&email=logankeller@artiq.com&phone=%2B1%2520(952)%2520533-2258&friends@$id:0&name=Colon%2520Salazar;&$id:1&name=French%2520Mcneil;&$id:2&name=Carol%2520Martin;;&favoriteFruit=banana
QS-JSON:+isActive=true&balance=%25241%252C446.35&age=32&name=Logan%2BKeller&email=logankeller%2540artiq.com&phone=%252B1%2B(952)%2B533-2258&friends(0).id=0&friends(0).name=Colon%2BSalazar&friends(1).id=1&friends(1).name=French%2BMcneil&friends(2).id=2&friends(2).name=Carol%2BMartin&favoriteFruit=banana|code-block|syntax|javascript|1411443|其中最短的是URL+Object+Notation。|1411444|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/1g5xoc8p/3/|1|https://github.com/cerebral/urlon^0|5|V|0|0|0|6|J|1|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@$A|10|B|11|1|12]]|C|$]]|$1|K|3|-4|5|6|7|13|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]|S|$5|N|O|P|C|$Q|T]]]]

<p>I made a <a href="https://jsfiddle.net/1g5xoc8p/3/" rel="nofollow noreferrer">comparison of JSON stringifiers</a> and the results are as follows:</p>

<pre><code>JSON:    {"_id":"5973782bdb9a930533b05cb2","isActive":true,"balance":"$1,446.35","age":32,"name":"Logan Keller","email":"logankeller@artiq.com","phone":"+1 (952) 533-2258","friends":[{"id":0,"name":"Colon Salazar"},{"id":1,"name":"French Mcneil"},{"id":2,"name":"Carol Martin"}],"favoriteFruit":"banana"}
Rison:   (_id:'5973782bdb9a930533b05cb2',age:32,balance:'$1,446.35',email:'logankeller@artiq.com',favoriteFruit:banana,friends:!((id:0,name:'Colon Salazar'),(id:1,name:'French Mcneil'),(id:2,name:'Carol Martin')),isActive:!t,name:'Logan Keller',phone:'+1 (952) 533-2258')
O-Rison: _id:'5973782bdb9a930533b05cb2',age:32,balance:'$1,446.35',email:'logankeller@artiq.com',favoriteFruit:banana,friends:!((id:0,name:'Colon Salazar'),(id:1,name:'French Mcneil'),(id:2,name:'Carol Martin')),isActive:!t,name:'Logan Keller',phone:'+1 (952) 533-2258'
JSURL:   ~(_id~'5973782bdb9a930533b05cb2~isActive~true~balance~'!1*2c446.35~age~32~name~'Logan*20Keller~email~'logankeller*40artiq.com~phone~'*2b1*20*28952*29*20533-2258~friends~(~(id~0~name~'Colon*20Salazar)~(id~1~name~'French*20Mcneil)~(id~2~name~'Carol*20Martin))~favoriteFruit~'banana)
QS:      _id=5973782bdb9a930533b05cb2&amp;isActive=true&amp;balance=$1,446.35&amp;age=32&amp;name=Logan Keller&amp;email=logankeller@artiq.com&amp;phone=+1 (952) 533-2258&amp;friends[0][id]=0&amp;friends[0][name]=Colon Salazar&amp;friends[1][id]=1&amp;friends[1][name]=French Mcneil&amp;friends[2][id]=2&amp;friends[2][name]=Carol Martin&amp;favoriteFruit=banana
URLON:   $_id=5973782bdb9a930533b05cb2&amp;isActive:true&amp;balance=$1,446.35&amp;age:32&amp;name=Logan%20Keller&amp;email=logankeller@artiq.com&amp;phone=+1%20(952)%20533-2258&amp;friends@$id:0&amp;name=Colon%20Salazar;&amp;$id:1&amp;name=French%20Mcneil;&amp;$id:2&amp;name=Carol%20Martin;;&amp;favoriteFruit=banana
QS-JSON: isActive=true&amp;balance=%241%2C446.35&amp;age=32&amp;name=Logan+Keller&amp;email=logankeller%40artiq.com&amp;phone=%2B1+(952)+533-2258&amp;friends(0).id=0&amp;friends(0).name=Colon+Salazar&amp;friends(1).id=1&amp;friends(1).name=French+Mcneil&amp;friends(2).id=2&amp;friends(2).name=Carol+Martin&amp;favoriteFruit=banana
</code></pre>

<p>The shortest among them is <a href="https://github.com/cerebral/urlon" rel="nofollow noreferrer">URL Object Notation</a>.</p>


blocks|key|1411511|text|这是一个开箱即用的适用于.NET后端的解决方案。我已经接受了这个帖子的主要答案，并更新了它，以满足我们的.NET需求。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1411512|function+objectToQuerystring(params)+{
var+result+=+'';

++++function+convertJsonToQueryString(data,+progress,+name)+{
++++++++name+=+name+%7C%7C+'';
++++++++progress+=+progress+%7C%7C+'';
++++++++if+(typeof+data+===+'object')+{
++++++++++++Object.keys(data).forEach(function+(key)+{
++++++++++++++++var+value+=+data[key];
++++++++++++++++if+(name+==+'')+{
++++++++++++++++++++convertJsonToQueryString(value,+progress,+key);
++++++++++++++++}+else+{
++++++++++++++++++++if+(isNaN(parseInt(key)))+{
++++++++++++++++++++++++convertJsonToQueryString(value,+progress,+name+%2B+'.'+%2B+key);
++++++++++++++++++++}+else+{
++++++++++++++++++++++++convertJsonToQueryString(value,+progress,+name+%2B+'['+%2B+key%2B+']');
++++++++++++++++++++}
++++++++++++++++}
++++++++++++})
++++++++}+else+{
++++++++++++result+=+result+?+result.concat('&')+:+result.concat('?');
++++++++++++result+=+result.concat(`${name}=${data}`);
++++++++}
++++}

++++convertJsonToQueryString(params);
++++return+result;
}|code-block|syntax|javascript|1411513|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This is a solution that will work for .NET backends out of the box. I have taken the primary answer of this thread and updated it to fit our .NET needs.</p>

<pre><code>function objectToQuerystring(params) {
var result = '';

    function convertJsonToQueryString(data, progress, name) {
        name = name || '';
        progress = progress || '';
        if (typeof data === 'object') {
            Object.keys(data).forEach(function (key) {
                var value = data[key];
                if (name == '') {
                    convertJsonToQueryString(value, progress, key);
                } else {
                    if (isNaN(parseInt(key))) {
                        convertJsonToQueryString(value, progress, name + '.' + key);
                    } else {
                        convertJsonToQueryString(value, progress, name + '[' + key+ ']');
                    }
                }
            })
        } else {
            result = result ? result.concat('&amp;') : result.concat('?');
            result = result.concat(`${name}=${data}`);
        }
    }

    convertJsonToQueryString(params);
    return result;
}
</code></pre>


blocks|key|1195733|text|如果你有很多嵌套的对象，上面的答案fill就不起作用了。相反，你可以从这里选择函数param+-+https://github.com/knowledgecode/jquery-param/blob/master/jquery-param.js，它对我来说工作得很好！|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1195734|++++var+param+=+function+(a)+{
++++var+s+=+[],+rbracket+=+/\[\]$/,
++++++++isArray+=+function+(obj)+{
++++++++++++return+Object.prototype.toString.call(obj)+===+'[object+Array]';
++++++++},+add+=+function+(k,+v)+{
++++++++++++v+=+typeof+v+===+'function'+?+v()+:+v+===+null+?+''+:+v+===+undefined+?+''+:+v;
++++++++++++s[s.length]+=+encodeURIComponent(k)+%2B+'='+%2B+encodeURIComponent(v);
++++++++},+buildParams+=+function+(prefix,+obj)+{
++++++++++++var+i,+len,+key;

++++++++++++if+(prefix)+{
++++++++++++++++if+(isArray(obj))+{
++++++++++++++++++++for+(i+=+0,+len+=+obj.length;+i+<+len;+i%2B%2B)+{
++++++++++++++++++++++++if+(rbracket.test(prefix))+{
++++++++++++++++++++++++++++add(prefix,+obj[i]);
++++++++++++++++++++++++}+else+{
++++++++++++++++++++++++++++buildParams(prefix+%2B+'['+%2B+(typeof+obj[i]+===+'object'+?+i+:+'')+%2B+']',+obj[i]);
++++++++++++++++++++++++}
++++++++++++++++++++}
++++++++++++++++}+else+if+(obj+&&+String(obj)+===+'[object+Object]')+{
++++++++++++++++++++for+(key+in+obj)+{
++++++++++++++++++++++++buildParams(prefix+%2B+'['+%2B+key+%2B+']',+obj[key]);
++++++++++++++++++++}
++++++++++++++++}+else+{
++++++++++++++++++++add(prefix,+obj);
++++++++++++++++}
++++++++++++}+else+if+(isArray(obj))+{
++++++++++++++++for+(i+=+0,+len+=+obj.length;+i+<+len;+i%2B%2B)+{
++++++++++++++++++++add(obj[i].name,+obj[i].value);
++++++++++++++++}
++++++++++++}+else+{
++++++++++++++++for+(key+in+obj)+{
++++++++++++++++++++buildParams(key,+obj[key]);
++++++++++++++++}
++++++++++++}
++++++++++++return+s;
++++++++};

++++return+buildParams('',+a).join('&').replace(/%2520/g,+'%2B');
};|code-block|syntax|javascript|1195735|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/knowledgecode/jquery-param/blob/master/jquery-param.js^0|1D|21|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>The above answers fill not work if you have a lot of nested objects.
Instead you can pick the function param from here - <a href="https://github.com/knowledgecode/jquery-param/blob/master/jquery-param.js" rel="nofollow noreferrer">https://github.com/knowledgecode/jquery-param/blob/master/jquery-param.js</a>
It worked very well for me!</p>

<pre><code>    var param = function (a) {
    var s = [], rbracket = /\[\]$/,
        isArray = function (obj) {
            return Object.prototype.toString.call(obj) === '[object Array]';
        }, add = function (k, v) {
            v = typeof v === 'function' ? v() : v === null ? '' : v === undefined ? '' : v;
            s[s.length] = encodeURIComponent(k) + '=' + encodeURIComponent(v);
        }, buildParams = function (prefix, obj) {
            var i, len, key;

            if (prefix) {
                if (isArray(obj)) {
                    for (i = 0, len = obj.length; i &lt; len; i++) {
                        if (rbracket.test(prefix)) {
                            add(prefix, obj[i]);
                        } else {
                            buildParams(prefix + '[' + (typeof obj[i] === 'object' ? i : '') + ']', obj[i]);
                        }
                    }
                } else if (obj &amp;&amp; String(obj) === '[object Object]') {
                    for (key in obj) {
                        buildParams(prefix + '[' + key + ']', obj[key]);
                    }
                } else {
                    add(prefix, obj);
                }
            } else if (isArray(obj)) {
                for (i = 0, len = obj.length; i &lt; len; i++) {
                    add(obj[i].name, obj[i].value);
                }
            } else {
                for (key in obj) {
                    buildParams(key, obj[key]);
                }
            }
            return s;
        };

    return buildParams('', a).join('&amp;').replace(/%20/g, '+');
};
</code></pre>


blocks|key|1196500|text|似乎到目前为止还没有人提到另一个流行的库qs。您可以添加它|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1196501|$+yarn+add+qs|code-block|syntax|javascript|1196502|然后像这样使用它|1196503|import+qs+from+'qs'

const+array+=+{+a:+{+b:+'c'+}+}
const+stringified+=+qs.stringify(array,+{+encode:+false+})

console.log(stringified)+//--+outputs+a[b]=c|1196504|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>It seems that till now nobody mention another popular library qs. You can add it</p>
<pre><code>$ yarn add qs
</code></pre>
<p>And then use it like that</p>
<pre><code>import qs from 'qs'

const array = { a: { b: 'c' } }
const stringified = qs.stringify(array, { encode: false })

console.log(stringified) //-- outputs a[b]=c
</code></pre>


blocks|key|1195455|text|好吧，这是一个较老的帖子，但我正在面对这个问题，我已经找到了我个人的解决方案。也许可以帮助其他人..|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1195456|+++++function+objToQueryString(obj){
++++++++var+k+=+Object.keys(obj);
++++++++var+s+=+"";
++++++++for(var+i=0;i<k.length;i%2B%2B)+{
++++++++++++s+%2B=+k[i]+%2B+"="+%2B+encodeURIComponent(obj[k[i]]);
++++++++++++if+(i+!=+k.length+-1)+s+%2B=+"&";
++++++++}
++++++++return+s;
+++++};|code-block|syntax|javascript|1195457|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>ok, it's a older post but i'm facing this problem and i have found my personal solution.. maybe can help someone else..</p>

<pre><code>     function objToQueryString(obj){
        var k = Object.keys(obj);
        var s = "";
        for(var i=0;i&lt;k.length;i++) {
            s += k[i] + "=" + encodeURIComponent(obj[k[i]]);
            if (i != k.length -1) s += "&amp;";
        }
        return s;
     };
</code></pre>


blocks|key|1411649|text|我为此编写了一个包：object-query-string+:)|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1411650|支持嵌套的对象，数组，自定义编码函数等。轻量级&免费的jQuery。|1411651|//+TypeScript
import+{+queryString+}+from+'object-query-string';

//+Node.js
const+{+queryString+}+=+require("object-query-string");

const+query+=+queryString({
++++filter:+{
++++++++brands:+["Audi"],
++++++++models:+["A4",+"A6",+"A8"],
++++++++accidentFree:+true
++++},
++++sort:+'mileage'
});|code-block|syntax|javascript|1411652|返回|1411653|filter[brands][]=Audi&filter[models][]=A4&filter[models][]=A6&filter[models][]=A8&filter[accidentFree]=true&sort=milage|1411654|entityMap|0|LINK|mutability|MUTABLE|url|https://www.npmjs.com/package/object-query-string^0|A|J|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|11|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|13|8|@]|9|@]|C|$I|J]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]]]

<p>I've written a package just for that: <a href="https://www.npmjs.com/package/object-query-string" rel="nofollow noreferrer">object-query-string</a> :)</p>

<p>Supports nested objects, arrays, custom encoding functions etc. Lightweight &amp; jQuery free.</p>

<pre class="lang-js prettyprint-override"><code>// TypeScript
import { queryString } from 'object-query-string';

// Node.js
const { queryString } = require("object-query-string");

const query = queryString({
    filter: {
        brands: ["Audi"],
        models: ["A4", "A6", "A8"],
        accidentFree: true
    },
    sort: 'mileage'
});

</code></pre>

<p>returns</p>

<pre><code>filter[brands][]=Audi&amp;filter[models][]=A4&amp;filter[models][]=A6&amp;filter[models][]=A8&amp;filter[accidentFree]=true&amp;sort=milage
</code></pre>


blocks|key|1196541|text|在通过了这里的一些热门答案之后，我编写了另一个实现，它也解决了一些边缘情况|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1196542|function+serialize(params,+prefix)+{++++++++++++++++
++++return+Object.entries(params).reduce((acc,+[key,+value])+=>+{
++++++++//+remove+whitespace+from+both+sides+of+the+key+before+encoding
++++++++key+=+encodeURIComponent(key.trim());

++++++++if+(params.constructor+===+Array+)+{
++++++++++key+=+`${prefix}[]`;
++++++++}+else+if+(params.constructor+===+Object)+{
++++++++++key+=+(prefix+?+`${prefix}[${key}]`+:+key);
++++++++}

++++++++/**
+++++++++*++-+undefined+and+NaN+values+will+be+skipped+automatically
+++++++++*++-+value+will+be+empty+string+for+functions+and+null
+++++++++*++-+nested+arrays+will+be+flattened
+++++++++*/
++++++++if+(value+===+null+%7C%7C+typeof+value+===+'function')+{
++++++++++++acc.push(`${key}=`);
++++++++}+else+if+(typeof+value+===+'object')+{
++++++++++++acc+=+acc.concat(serialize(value,+key));
++++++++}+else+if(['number',+'boolean',+'string'].includes(typeof+value)+&&+value+===+value)+{+//+self-check+to+avoid+NaN
++++++++++++acc.push(`${key}=${encodeURIComponent(value)}`);
++++++++}

++++++++return+acc;
++++},+[]);
}

function+objectToQueryString(queryParameters)+{
++++return+queryParameters+?+serialize(queryParameters).join('&'):+'';
}

let+x+=+objectToQueryString({
++++foo:+'hello+world',
++++bar:+{
++++++blah:+123,
++++++list:+[1,+2,+3],
++++++++'nested+array':+[[4,5],[6,7]]+//+will+be+flattened
++++},
++++page:+1,
++++limit:+undefined,+//+field+will+be+ignored
++++check:+false,
++++max:+NaN,+//+field+will+be+ignored
++++prop:+null,
++++'+key+value':+'with+spaces'+//+space+in+key+will+be+trimmed+out
});
++
console.log(x);+//+foo=hello%2520world&bar[blah]=123&bar[list][]=1&bar[list][]=2&bar[list][]=3&bar[nested%2520array][][]=4&bar[nested%2520array][][]=5&bar[nested%2520array][][]=6&bar[nested%2520array][][]=7&page=1&check=false&prop=&key%2520value=with%2520spaces|code-block|syntax|javascript|1196543|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>After going through some top answers here, I have wrote another implementation that tackles some edge cases as well</p>
<pre><code>function serialize(params, prefix) {                
    return Object.entries(params).reduce((acc, [key, value]) =&gt; {
        // remove whitespace from both sides of the key before encoding
        key = encodeURIComponent(key.trim());

        if (params.constructor === Array ) {
          key = `${prefix}[]`;
        } else if (params.constructor === Object) {
          key = (prefix ? `${prefix}[${key}]` : key);
        }

        /**
         *  - undefined and NaN values will be skipped automatically
         *  - value will be empty string for functions and null
         *  - nested arrays will be flattened
         */
        if (value === null || typeof value === 'function') {
            acc.push(`${key}=`);
        } else if (typeof value === 'object') {
            acc = acc.concat(serialize(value, key));
        } else if(['number', 'boolean', 'string'].includes(typeof value) &amp;&amp; value === value) { // self-check to avoid NaN
            acc.push(`${key}=${encodeURIComponent(value)}`);
        }

        return acc;
    }, []);
}

function objectToQueryString(queryParameters) {
    return queryParameters ? serialize(queryParameters).join('&amp;'): '';
}

let x = objectToQueryString({
    foo: 'hello world',
    bar: {
      blah: 123,
      list: [1, 2, 3],
        'nested array': [[4,5],[6,7]] // will be flattened
    },
    page: 1,
    limit: undefined, // field will be ignored
    check: false,
    max: NaN, // field will be ignored
    prop: null,
    ' key value': 'with spaces' // space in key will be trimmed out
});
  
console.log(x); // foo=hello%20world&amp;bar[blah]=123&amp;bar[list][]=1&amp;bar[list][]=2&amp;bar[list][]=3&amp;bar[nested%20array][][]=4&amp;bar[nested%20array][][]=5&amp;bar[nested%20array][][]=6&amp;bar[nested%20array][][]=7&amp;page=1&amp;check=false&amp;prop=&amp;key%20value=with%20spaces
</code></pre>


blocks|key|1412083|text|PHP符号的Typescript版本(无url转义版本)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1412084|/**
+*+Converts+an+object+into+a+Cookie-like+string.
+*+@param+toSerialize+object+or+array+to+be+serialized
+*+@param+prefix+used+in+deep+objects+to+describe+the+final+query+parameter
+*+@returns+ampersand+separated+key=value+pairs
+*
+*+Example:
+*+```js
+*+serialize({hello:[{world:+"nice"}]});+//+outputs++"hello[0][world]=nice"
+*+```
+*+---
+*+Adapted+to+TS+from+a+StackOverflow+answer+https://stackoverflow.com/a/1714899/4537906
+*/
const+serialize+=+(toSerialize:+unknown+=+{},+prefix?:+string)+=>+{
++const+keyValuePairs+=+[];

++Object.keys(toSerialize).forEach((attribute)+=>+{
++++if+(Object.prototype.hasOwnProperty.call(toSerialize,+attribute))+{
++++++const+key+=+prefix+?+`${prefix}[${attribute}]`+:+attribute;
++++++const+value+=+toSerialize[attribute];
++++++const+toBePushed+=
++++++++value+!==+null+&&+typeof+value+===+"object"
++++++++++?+serialize(value,+key)
++++++++++:+`${key}=${value}`;
++++++keyValuePairs.push(toBePushed);
++++}
++});

++return+keyValuePairs.join("&");
};|code-block|syntax|javascript|1412085|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<h2 id="typescript-version-for-php-notation-no-url-escaped-version-559n">Typescript version for PHP notation (no url escaped version)</h2>
<pre><code>/**
 * Converts an object into a Cookie-like string.
 * @param toSerialize object or array to be serialized
 * @param prefix used in deep objects to describe the final query parameter
 * @returns ampersand separated key=value pairs
 *
 * Example:
 * ```js
 * serialize({hello:[{world: &quot;nice&quot;}]}); // outputs  &quot;hello[0][world]=nice&quot;
 * ```
 * ---
 * Adapted to TS from a StackOverflow answer https://stackoverflow.com/a/1714899/4537906
 */
const serialize = (toSerialize: unknown = {}, prefix?: string) =&gt; {
  const keyValuePairs = [];

  Object.keys(toSerialize).forEach((attribute) =&gt; {
    if (Object.prototype.hasOwnProperty.call(toSerialize, attribute)) {
      const key = prefix ? `${prefix}[${attribute}]` : attribute;
      const value = toSerialize[attribute];
      const toBePushed =
        value !== null &amp;&amp; typeof value === &quot;object&quot;
          ? serialize(value, key)
          : `${key}=${value}`;
      keyValuePairs.push(toBePushed);
    }
  });

  return keyValuePairs.join(&quot;&amp;&quot;);
};
</code></pre>


blocks|key|1412252|text|const+toQueryString+=+obj+=>+"?".concat(Object.keys(obj).map(e+=>+`${encodeURIComponent(e)}=${encodeURIComponent(obj[e])}`).join("&"));

const+data+=+{
++offset:+5,
++limit:+10
};

toQueryString(data);+//+=>+?offset=5&limit=10|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1412253|或使用预定义的功能|unstyled|1412254|const+data+=+{
++offset:+5,
++limit:+10
};

new+URLSearchParams(data).toString();+//+=>+?offset=5&limit=10|1412255|备注|1412256|以上两种方法都会将Value设置为null如果不存在如果不想设置query+param如果value为null，则使用|1412257|const+toQueryString+=+obj+=>+"?".concat(Object.keys(obj).map(e+=>+obj[e]+?+`${encodeURIComponent(e)}=${encodeURIComponent(obj[e])}`+:+null).filter(e+=>+!!e).join("&"));


const+data+=+{
++offset:+null,
++limit:+10
};

toQueryString(data);+//+=>+"?limit=10"+else+with+above+methods+"?offset=null&limit=10"|1412258|你可以自由地使用任何方法|1412259|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|T|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$B|C]]|$1|I|3|J|5|F|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$B|C]]|$1|O|3|P|5|F|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|F|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<pre class="lang-js prettyprint-override"><code>const toQueryString = obj =&gt; &quot;?&quot;.concat(Object.keys(obj).map(e =&gt; `${encodeURIComponent(e)}=${encodeURIComponent(obj[e])}`).join(&quot;&amp;&quot;));

const data = {
  offset: 5,
  limit: 10
};

toQueryString(data); // =&gt; ?offset=5&amp;limit=10
</code></pre>
<h3>Or Use Pre Defined Feature</h3>
<pre class="lang-js prettyprint-override"><code>const data = {
  offset: 5,
  limit: 10
};

new URLSearchParams(data).toString(); // =&gt; ?offset=5&amp;limit=10
</code></pre>
<h2>Note</h2>
<p>Both Above Methods will Set Value as null if not present
if you want not to set query param if value is null then use</p>
<pre class="lang-js prettyprint-override"><code>const toQueryString = obj =&gt; &quot;?&quot;.concat(Object.keys(obj).map(e =&gt; obj[e] ? `${encodeURIComponent(e)}=${encodeURIComponent(obj[e])}` : null).filter(e =&gt; !!e).join(&quot;&amp;&quot;));


const data = {
  offset: null,
  limit: 10
};

toQueryString(data); // =&gt; &quot;?limit=10&quot; else with above methods &quot;?offset=null&amp;limit=10&quot;
</code></pre>
<h3>You Can Freely Use Any Method</h3>


blocks|key|1195384|text|只是另一种方式(没有递归对象)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1195385|+++getQueryString+=+function(obj)
+++{
++++++result+=+"";

++++++for(param+in+obj)
+++++++++result+%2B=+(+encodeURIComponent(param)+%2B+'='+%2B+encodeURIComponent(obj[param])+%2B+'&'+);

++++++if(result)+//it's+not+empty+string+when+at+least+one+key/value+pair+was+added.+In+such+case+we+need+to+remove+the+last+'&'+char
+++++++++result+=+result.substr(0,+result.length+-+1);+//If+length+is+zero+or+negative,+substr+returns+an+empty+string+[ref.+http://msdn.microsoft.com/en-us/library/0esxc5wy(v=VS.85).aspx]

++++++return+result;
+++}

alert(+getQueryString({foo:+"hi+there",+bar:+123,+quux:+2+})+);|code-block|syntax|javascript|1195386|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Just another way (no recursive object):</p>

<pre><code>   getQueryString = function(obj)
   {
      result = "";

      for(param in obj)
         result += ( encodeURIComponent(param) + '=' + encodeURIComponent(obj[param]) + '&amp;' );

      if(result) //it's not empty string when at least one key/value pair was added. In such case we need to remove the last '&amp;' char
         result = result.substr(0, result.length - 1); //If length is zero or negative, substr returns an empty string [ref. http://msdn.microsoft.com/en-us/library/0esxc5wy(v=VS.85).aspx]

      return result;
   }

alert( getQueryString({foo: "hi there", bar: 123, quux: 2 }) );
</code></pre>


blocks|key|1411234|text|参考答案@user187291，添加"isArray“作为参数，以转换json嵌套数组。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1411235|data+:+{
++++++++++++++++++++staffId+:+"00000001",
++++++++++++++++++++Detail+:+[+{
++++++++++++++++++++++++"identityId"+:+"123456"
++++++++++++++++++++},+{
++++++++++++++++++++++++"identityId"+:+"654321"
++++++++++++++++++++}+],

++++++++++++++++}|code-block|syntax|javascript|1411236|要生成结果，请执行以下操作：|1411237|staffId=00000001&Detail.identityId=123456&Detail1.identityId=654321|1411238|serialize+=+function(obj,+prefix,+isArray)+{
++++++++var+str+=+[],p+=+0;
++++++++for+(p+in+obj)+{
++++++++++++if+(obj.hasOwnProperty(p))+{
++++++++++++++++var+k,+v;
++++++++++++++++if+(isArray)
++++++++++++++++++++k+=+prefix+?+prefix+%2B+"["+%2B+p+%2B+"]"+:+p,+v+=+obj[p];
++++++++++++++++else
++++++++++++++++++++k+=+prefix+?+prefix+%2B+"."+%2B+p+%2B+""+:+p,+v+=+obj[p];

++++++++++++++++if+(v+!==+null+&&+typeof+v+===+"object")+{
++++++++++++++++++++if+(Array.isArray(v))+{
++++++++++++++++++++++++serialize(v,+k,+true);
++++++++++++++++++++}+else+{
++++++++++++++++++++++++serialize(v,+k,+false);
++++++++++++++++++++}
++++++++++++++++}+else+{
++++++++++++++++++++var+query+=+k+%2B+"="+%2B+v;
++++++++++++++++++++str.push(query);
++++++++++++++++}
++++++++++++}
++++++++}
++++++++return+str.join("&");
++++};

++++serialize(data,+"prefix",+false);|1411239|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Refer from the answer @user187291, add "isArray" as parameter to make the json nested array to be converted.</p>

<pre><code>data : {
                    staffId : "00000001",
                    Detail : [ {
                        "identityId" : "123456"
                    }, {
                        "identityId" : "654321"
                    } ],

                }
</code></pre>

<p>To make the result : </p>

<p>staffId=00000001&amp;Detail[0].identityId=123456&amp;Detail[1].identityId=654321</p>

<pre><code>serialize = function(obj, prefix, isArray) {
        var str = [],p = 0;
        for (p in obj) {
            if (obj.hasOwnProperty(p)) {
                var k, v;
                if (isArray)
                    k = prefix ? prefix + "[" + p + "]" : p, v = obj[p];
                else
                    k = prefix ? prefix + "." + p + "" : p, v = obj[p];

                if (v !== null &amp;&amp; typeof v === "object") {
                    if (Array.isArray(v)) {
                        serialize(v, k, true);
                    } else {
                        serialize(v, k, false);
                    }
                } else {
                    var query = k + "=" + v;
                    str.push(query);
                }
            }
        }
        return str.join("&amp;");
    };

    serialize(data, "prefix", false);
</code></pre>


blocks|key|1411378|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1411379|const+buildSortedQuery+=+(args)+=>+{
++++return+Object.keys(args)
++++++++.sort()
++++++++.map(key+=>+{
++++++++++++return+window.encodeURIComponent(key)
++++++++++++++++%2B+'='
++++++++++++++++%2B+window.encodeURIComponent(args[key]);
++++++++})
++++++++.join('&');
};

console.log(buildSortedQuery({
++foo:+"hi+there",
++bar:+"100%25"
}));

//bar=100%2525&foo=hi%2520there|code-block|syntax|javascript|1411380|1411381|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|K|8|@]|9|@]|A|$E|F]]|$1|G|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|M|8|@]|9|@]|A|$]]]|I|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const buildSortedQuery = (args) =&gt; {
    return Object.keys(args)
        .sort()
        .map(key =&gt; {
            return window.encodeURIComponent(key)
                + '='
                + window.encodeURIComponent(args[key]);
        })
        .join('&amp;');
};

console.log(buildSortedQuery({
  foo: "hi there",
  bar: "100%"
}));

//bar=100%25&amp;foo=hi%20there</code></pre>
</div>
</div>
</p>


blocks|key|1411468|text|只需使用以下内容：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1411469|encodeURIComponent(JSON.stringify(obj))|code-block|syntax|javascript|1411470|​|1411471|//+elastic+search+example
let+story+={
++"query":+{
++++"bool":+{
++++++"must":+[
++++++++{
++++++++++"term":+{+
++++++++++++"revision.published":+0,+
++++++++++}
++++++++},
++++++++{
++++++++++"term":+{+
++++++++++++"credits.properties.by.properties.name":+"Michael+Guild"
++++++++++}
++++++++},
++++++++{
++++++++++"nested":+{
++++++++++++"path":+"taxonomy.sections",
++++++++++++"query":+{
++++++++++++++"bool":+{
++++++++++++++++"must":+[
++++++++++++++++++{
++++++++++++++++++++"term":+{
++++++++++++++++++++++"taxonomy.sections._id":+"/science"
++++++++++++++++++++}
++++++++++++++++++},
++++++++++++++++++{
++++++++++++++++++++"term":+{
++++++++++++++++++++++"taxonomy.sections._website":+"staging"
++++++++++++++++++++}
++++++++++++++++++}
++++++++++++++++]
++++++++++++++}
++++++++++++}
++++++++++}
++++++++}
++++++]
++++}
++}
}


const+whateva+=+encodeURIComponent(JSON.stringify(story))
console.log(whateva)|1411472|1411473|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|O|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|P|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Q|8|@]|9|@]|A|$E|F]]|$1|K|3|H|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>Just use the following:</p>

<pre><code>encodeURIComponent(JSON.stringify(obj))
</code></pre>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>// elastic search example
let story ={
  "query": {
    "bool": {
      "must": [
        {
          "term": { 
            "revision.published": 0, 
          }
        },
        {
          "term": { 
            "credits.properties.by.properties.name": "Michael Guild"
          }
        },
        {
          "nested": {
            "path": "taxonomy.sections",
            "query": {
              "bool": {
                "must": [
                  {
                    "term": {
                      "taxonomy.sections._id": "/science"
                    }
                  },
                  {
                    "term": {
                      "taxonomy.sections._website": "staging"
                    }
                  }
                ]
              }
            }
          }
        }
      ]
    }
  }
}


const whateva = encodeURIComponent(JSON.stringify(story))
console.log(whateva)</code></pre>
</div>
</div>
</p>


blocks|key|1411584|text|下面是一个简单的实现，它获取一个对象并将其转换为查询参数字符串|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1411585|export+function+objectToQueryParams(queryParams:+object):+string+{
++return+queryParams+?
++++Object.entries(queryParams).reduce((acc,+[key,+val],+index)+=>+{
++++++const+sign+=+index+===+0+?+'?'+:+'&';
++++++acc+%2B=+`${sign}${encodeURIComponent(key)}=${encodeURIComponent(val)}`;
++++++return+acc;
++++},+'')
++++:+'';
}|code-block|syntax|javascript|1411586|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>here is a simple implementation that gets an object and converts it to query params string</p>

<pre><code>export function objectToQueryParams(queryParams: object): string {
  return queryParams ?
    Object.entries(queryParams).reduce((acc, [key, val], index) =&gt; {
      const sign = index === 0 ? '?' : '&amp;';
      acc += `${sign}${encodeURIComponent(key)}=${encodeURIComponent(val)}`;
      return acc;
    }, '')
    : '';
}
</code></pre>


blocks|key|1196339|text|我使用reduce将对象编码为查询字符串的实现|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1196340|export+const+encodeAsQueryString+=+(params)+=>+(
++Object.keys(params).reduce((acc,+key)=>(
++++params.hasOwnProperty(key)+?+(
++++++[...acc,+encodeURIComponent(key)+%2B+'='+%2B+encodeURIComponent(params[key])]
++++)+:+acc
++),+[]).join('&')
);|code-block|syntax|javascript|1196341|entityMap^0|3|6|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>My implementation of encoding object as query string, using <code>reduce</code>:</p>

<pre class="lang-js prettyprint-override"><code>export const encodeAsQueryString = (params) =&gt; (
  Object.keys(params).reduce((acc, key)=&gt;(
    params.hasOwnProperty(key) ? (
      [...acc, encodeURIComponent(key) + '=' + encodeURIComponent(params[key])]
    ) : acc
  ), []).join('&amp;')
);
</code></pre>


blocks|key|1411694|text|如果希望将整个对象作为单个参数传递，例如?filter={param1："val1"，param2："val2"}|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1411695|const+serializeObject+=+(obj)+=>+{
++let+objStr+=+JSON.stringify(obj);

++objStr+=+objStr.replace(/\{/g,+encodeURIComponent("{"));
++objStr+=+objStr.replace(/}/g,+encodeURIComponent("}"));
++objStr+=+objStr.replace(/:/g,+encodeURIComponent(":"));

++return+objStr;
};

let+res+=+serializeObject({param1:+"val1",+param2:+"val2"});
console.log("serializeObject:",+res);+//%257B"param1"%253A"val1","param2"%253A"val2"%257D
console.log("serializeObject-decoded:",+decodeURIComponent(res));+//{"param1":"val1","param2":"val2"}|code-block|syntax|javascript|1411696|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>If you want to pass an entire object as a single param, e.g ?filter={param1: "val1", param2: "val2"}</p>

<pre><code>const serializeObject = (obj) =&gt; {
  let objStr = JSON.stringify(obj);

  objStr = objStr.replace(/\{/g, encodeURIComponent("{"));
  objStr = objStr.replace(/}/g, encodeURIComponent("}"));
  objStr = objStr.replace(/:/g, encodeURIComponent(":"));

  return objStr;
};

let res = serializeObject({param1: "val1", param2: "val2"});
console.log("serializeObject:", res); //%7B"param1"%3A"val1","param2"%3A"val2"%7D
console.log("serializeObject-decoded:", decodeURIComponent(res)); //{"param1":"val1","param2":"val2"}
</code></pre>


blocks|key|1196910|text|您可以使用未定义的属性将对象传递给此函数，如果该属性存在，则会将其转换为查询字符串并返回查询字符串|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1196911|​|1196912|++++function+convertToQueryString(props)+{
++++++const+objQueryString+=+{+...props+};
++++
++++++for+(const+key+in+objQueryString)+{
++++++++if+(!key)+{
++++++++++delete+objQueryString[key];
++++++++}
++++++}
++++
++++++const+params+=+JSON.stringify(objQueryString);
++++
++++
++++
++++++const+qs+=+params
++++++++.replace(/[/''""{}]/g,+'')
++++++++.replace(/[:]/g,+'=')
++++++++.replace(/[,]/g,+'&');
++++
++++++console.log(qs)
++++
++++++return+qs;
++++}
++++
++++convertToQueryString({order:+undefined,+limit:+5,+page:+1})|code-block|syntax|javascript|1196913|1196914|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>you can pass an object to this function with undefined properties, if the property exist will be converted to query string and the query string will be returned</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>    function convertToQueryString(props) {
      const objQueryString = { ...props };
    
      for (const key in objQueryString) {
        if (!key) {
          delete objQueryString[key];
        }
      }
    
      const params = JSON.stringify(objQueryString);
    
    
    
      const qs = params
        .replace(/[/''""{}]/g, '')
        .replace(/[:]/g, '=')
        .replace(/[,]/g, '&amp;');
    
      console.log(qs)
    
      return qs;
    }
    
    convertToQueryString({order: undefined, limit: 5, page: 1})</code></pre>
</div>
</div>
</p>


blocks|key|1412183|text|+let+data+=+{
++++id:1,
++++name:'Newuser'
++++};
const+getqueryParam+=+data+=>+{
++let+datasize+=+Object.keys(data).length;
++let+initial+=+'?';

++Object.keys(data).map(function+(key,+index)+{
++++initial+=+initial.concat(`${key}=${data[key]}`);
++++index+!=+datasize+-+1+&&+(initial+=+initial.concat('&'));
++});
++console.log(initial,+'MyqueryString');
++return+initial;
};

console.log(getqueryParam(data))//You+can+get+the+query+string+here

If+you+have+baseUrl+means+to+get+full+query+use+|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1412184|baseUrl.concat(getqueryParam(data))|unstyled|offset|length|style|CODE|1412185|entityMap^0|0|0|Z|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|N|8|@$G|O|H|P|I|J]]|9|@]|A|$]]|$1|K|3|-4|5|F|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<pre><code> let data = {
    id:1,
    name:'Newuser'
    };
const getqueryParam = data =&gt; {
  let datasize = Object.keys(data).length;
  let initial = '?';

  Object.keys(data).map(function (key, index) {
    initial = initial.concat(`${key}=${data[key]}`);
    index != datasize - 1 &amp;&amp; (initial = initial.concat('&amp;'));
  });
  console.log(initial, 'MyqueryString');
  return initial;
};

console.log(getqueryParam(data))//You can get the query string here

If you have baseUrl means to get full query use 
</code></pre>
<p><code>baseUrl.concat(getqueryParam(data))</code></p>


blocks|key|1196222|text|const+serialize+=+obj+=>+Object.keys(obj).reduce((a,+b)+=>
++++a.push(encodeURIComponent(b)+%2B+"="+%2B+encodeURIComponent(obj[b]))+&&+a,
++++[]).join("&");|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1196223|呼叫：|unstyled|1196224|console.log(serialize({a:1,b:2}));
//+output:+'a=1&b=2|1196225|‘|1196226|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$B|C]]|$1|I|3|J|5|F|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|F|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<pre><code>const serialize = obj =&gt; Object.keys(obj).reduce((a, b) =&gt;
    a.push(encodeURIComponent(b) + "=" + encodeURIComponent(obj[b])) &amp;&amp; a,
    []).join("&amp;");
</code></pre>

<p>Call:</p>

<pre><code>console.log(serialize({a:1,b:2}));
// output: 'a=1&amp;b=2
</code></pre>

<p>'</p>


blocks|key|1196263|text|这是一个在转换过程中同时处理字符串和数组的简单答案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1196264|jsonToQueryString:+function+(data)+{
++++++++return+Object.keys(data).map((key)+=>+{
++++++++++++if+(Array.isArray(data[key]))+{
++++++++++++++++return+(`${encodeURIComponent(key)}=${data[key].map((item)+=>+encodeURIComponent(item)).join('%252C')}`);
++++++++++++}
++++++++++++return(`${encodeURIComponent(key)}=${encodeURIComponent(data[key])}`);
++++++++}).join('&');
++++}|code-block|syntax|javascript|1196265|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Here is a simple answer that deals with strings and arrays at the same time during conversion.</p>

<pre><code>jsonToQueryString: function (data) {
        return Object.keys(data).map((key) =&gt; {
            if (Array.isArray(data[key])) {
                return (`${encodeURIComponent(key)}=${data[key].map((item) =&gt; encodeURIComponent(item)).join('%2C')}`);
            }
            return(`${encodeURIComponent(key)}=${encodeURIComponent(data[key])}`);
        }).join('&amp;');
    }
</code></pre>


blocks|key|1196462|text|使用Ramda：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1196463|++++R.pipe(R.toPairs,+R.map(R.join('=')),+R.join('&'))({a:+'b',+b:+'a'})|code-block|syntax|javascript|1196464|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>With Ramda:</p>

<pre class="lang-js prettyprint-override"><code>    R.pipe(R.toPairs, R.map(R.join('=')), R.join('&amp;'))({a: 'b', b: 'a'})
</code></pre>


<p>Do you know a fast and simple way to encode a Javascript Object into a <code>string</code> that I can pass via a <code>GET</code> Request?</p>

<p>No <code>jQuery</code>, no other frameworks - just plain Javascript :)</p>


Query-string encoding of a Javascript Object

TypeScript

服务器

jQuery

JSON

您知道一种快速而简单的方法将Javascript对象编码成我可以通过GET请求传递的string吗？没有jQuery，没有其他框架--只是简单的Javascript :)

问查询- Javascript对象的字符串编码
EN

回答 39

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问查询- Javascript对象的字符串编码EN

回答 39

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问查询- Javascript对象的字符串编码
EN