在不知道JavaScript对象的键的情况下，我如何将…
var obj = {
param1: 'something',
param2: 'somethingelse',
param3: 'another'
}
obj[param4] = 'yetanother';
…到…
var str = 'param1=something¶m2=somethingelse¶m3=another¶m4=yetanother';
...?
var str = "";
for (var key in obj) {
if (str != "") {
str += "&";
}
str += key + "=" + encodeURIComponent(obj[key]);
}
例如:http://jsfiddle.net/WFPen/
var str = '';
for( var name in obj ) {
str += (name + '=' + obj[name] + '&');
}
str = str.slice(0,-1);
试试吧。
例如:http://jsfiddle.net/T2UWT/
在一层深处…
var serialiseObject = function(obj) {
var pairs = [];
for (var prop in obj) {
if (!obj.hasOwnProperty(prop)) {
continue;
}
pairs.push(prop + '=' + obj[prop]);
}
return pairs.join('&');
}
jsFiddle。
有关于任意深度对象的递归函数的讨论……
var serialiseObject = function(obj) {
var pairs = [];
for (var prop in obj) {
if (!obj.hasOwnProperty(prop)) {
continue;
}
if (Object.prototype.toString.call(obj[prop]) == '[object Object]') {
pairs.push(serialiseObject(obj[prop]));
continue;
}
pairs.push(prop + '=' + obj[prop]);
}
return pairs.join('&');
}
jsFiddle。
这当然意味着在序列化中丢失了嵌套上下文。
如果这些值不是一开始就编码的URL，并且您打算在URL中使用它们，请检查JavaScript的encodeURIComponent()。
由于我对递归函数做了这么大的研究，下面是我自己的版本。
function objectParametize(obj, delimeter, q) {
var str = new Array();
if (!delimeter) delimeter = '&';
for (var key in obj) {
switch (typeof obj[key]) {
case 'string':
case 'number':
str[str.length] = key + '=' + obj[key];
break;
case 'object':
str[str.length] = objectParametize(obj[key], delimeter);
}
}
return (q === true ? '?' : '') + str.join(delimeter);
}
http://jsfiddle.net/userdude/Kk3Lz/2/
如果你需要一个递归函数来根据给定的对象生成正确的URL参数，试试我的Coffee-Script。
@toParams = (params) ->
pairs = []
do proc = (object=params, prefix=null) ->
for own key, value of object
if value instanceof Array
for el, i in value
proc(el, if prefix? then "#{prefix}[#{key}][]" else "#{key}[]")
else if value instanceof Object
if prefix?
prefix += "[#{key}]"
else
prefix = key
proc(value, prefix)
else
pairs.push(if prefix? then "#{prefix}[#{key}]=#{value}" else "#{key}=#{value}")
pairs.join('&')
或者JavaScript编译…
toParams = function(params) {
var pairs, proc;
pairs = [];
(proc = function(object, prefix) {
var el, i, key, value, _results;
if (object == null) object = params;
if (prefix == null) prefix = null;
_results = [];
for (key in object) {
if (!__hasProp.call(object, key)) continue;
value = object[key];
if (value instanceof Array) {
_results.push((function() {
var _len, _results2;
_results2 = [];
for (i = 0, _len = value.length; i < _len; i++) {
el = value[i];
_results2.push(proc(el, prefix != null ? "" + prefix + "[" + key + "][]" : "" + key + "[]"));
}
return _results2;
})());
} else if (value instanceof Object) {
if (prefix != null) {
prefix += "[" + key + "]";
} else {
prefix = key;
}
_results.push(proc(value, prefix));
} else {
_results.push(pairs.push(prefix != null ? "" + prefix + "[" + key + "]=" + value : "" + key + "=" + value));
}
}
return _results;
})();
return pairs.join('&');
};
这将构造如下的字符串:
toParams({a: 'one', b: 'two', c: {x: 'eight', y: ['g','h','j'], z: {asdf: 'fdsa'}}})
"a=one&b=two&c[x]=eight&c[y][0]=g&c[y][1]=h&c[y][2]=j&c[y][z][asdf]=fdsa"
如果你使用jQuery，这是它用来参数化GET XHR请求的选项:
$.param( obj )
http://api.jquery.com/jQuery.param/
一个优雅的例子:(假设你正在运行一个现代的浏览器或节点)
var str = Object.keys(obj).map(function(key) {
return key + '=' + obj[key];
}).join('&');
以及ES2017的等效版本:(感谢Lukas)
let str = Object.entries(obj).map(([key, val]) => `${key}=${val}`).join('&');
注意:如果键/值不是URL编码的，则可能需要使用encodeURIComponent()。
你可以使用jQuery的param方法:
var obj = { 参数1：“某物”， param2： 'somethingelse'， 参数3：“另一个” } obj['param4'] = 'yetother'; var str = jQuery.param（obj）; 警报; <script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js”></script>
只是为了记录，如果你有一个支持ES6的浏览器，这里有一个减少的解决方案:
Object.keys(obj).reduce((prev, key, i) => (
`${prev}${i!==0?'&':''}${key}=${obj[key]}`
), '');
这里有一个正在运行的片段!
//仅用于测试目的 让obj = {param1: 12, param2: "test"}; //实际解决方案 let result = Object.keys(obj)。Reduce ((prev, key, i) => ( “$ {prev} ${我! = = 0 ?“&”:“}${关键}= $ {obj[主要]}’ ),“); //运行代码片段来显示发生了什么! console.log(结果);
功能性方法。
var kvToParam = R.mapObjIndexed((val, key) => { 返回'&' + key + '=' + encodeURIComponent(val); }); var objToParams = R.compose( R.replace (/^&/, '?'), R.join(”), R.values, kvToParam ); 变量o = { 用户名:“sloughfeg9', 密码:澳大利亚 }; console.log (objToParams(的); < script src = " https://cdnjs.cloudflare.com/ajax/libs/ramda/0.22.1/ramda.min.js " > < / >脚本
ES6:
函数参数(data) { 返回种(数据)。地图(关键= > ' ${关键}= $ {encodeURIComponent(数据(关键))}”). join (' & '); ｝ console.log (params ({foo:“酒吧”})); Console.log (params({foo: 'bar'， baz: 'qux$'}));
Object.toparams = function ObjecttoParams(obj)
{
var p = [];
for (var key in obj)
{
p.push(key + '=' + encodeURIComponent(obj[key]));
}
return p.join('&');
};
ES2017方法
Object.entries(obj).map(([key, val]) => `${key}=${encodeURIComponent(val)}`).join('&')
该方法使用递归进入对象层次结构并生成rails样式参数，rails将其解释为嵌入的散列。objtoarams生成一个带有额外&号的查询字符串，objToQuery删除最后一个&号。
function objToQuery(obj){
let str = objToParams(obj,'');
return str.slice(0, str.length);
}
function objToParams(obj, subobj){
let str = "";
for (let key in obj) {
if(typeof(obj[key]) === 'object') {
if(subobj){
str += objToParams(obj[key], `${subobj}[${key}]`);
} else {
str += objToParams(obj[key], `[${key}]`);
}
} else {
if(subobj){
str += `${key}${subobj}=${obj[key]}&`;
}else{
str += `${key}=${obj[key]}&`;
}
}
}
return str;
}
一个有用的代码，当你有数组在你的查询:
var queryString = Object.keys(query).map(key => {
if (query[key].constructor === Array) {
var theArrSerialized = ''
for (let singleArrIndex of query[key]) {
theArrSerialized = theArrSerialized + key + '[]=' + singleArrIndex + '&'
}
return theArrSerialized
}
else {
return key + '=' + query[key] + '&'
}
}
).join('');
console.log('?' + queryString)
Object.keys(obj).map(k => `${encodeURIComponent(k)}=${encodeURIComponent(obj[k])}`).join('&')
你可以使用npm lib query-string
const queryString = require('query-string');
querystring.stringify({ foo: 'bar', baz: ['qux', 'quux'], corge: '' });
// Returns 'foo=bar&baz=qux&baz=quux&corge='
一行没有依赖项:
new URLSearchParams(obj).toString();
// OUT: param1=something¶m2=somethingelse¶m3=another¶m4=yetanother
使用它的URL内置如下:
let obj = { param1: 'something', param2: 'somethingelse', param3: 'another' }
obj['param4'] = 'yetanother';
const url = new URL(`your_url.com`);
url.search = new URLSearchParams(obj);
const response = await fetch(url);
[编辑2020年4月4日]:空值将被解释为字符串'null'。
[编辑2022年3月9日]:浏览器兼容性
const obj = { id： 1， name： 'Neel' }; 设 str = ''; str = Object.entries（obj）.map（（[key， val]） => '${key}=${val}'）.join（'&'）; console.log（str）;
如果你使用的是NodeJS 13.1或更高版本，你可以使用本地querystring模块来解析查询字符串。
const qs = require('querystring');
let str = qs.stringify(obj)
使用Axios和无限深度:
<pre> <style> textarea { width: 80%; margin-bottom: 20px; } label { font-size: 18px; font-weight: bold; } </style> <label>URI</label> <textarea id="uri" rows="7"></textarea> <label>All Defaults (Bonus): </label> <textarea id="defaults" rows="20"></textarea> </pre> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script> const instance = axios.create({ baseUrl: 'http://my-api-server', url: '/user' }) const uri = instance.getUri({ params: { id: '1234', favFruits: [ 'banana', 'apple', 'strawberry' ], carConfig: { items: ['keys', 'laptop'], type: 'sedan', other: { music: ['on', 'off', { foo: 'bar' }] } } } }) const defaults = JSON.stringify(instance.defaults, null, 2) document.getElementById('uri').value = uri document.getElementById('defaults').value = defaults </script>
祝你好运…
这个一行程序还处理嵌套对象和JSON。根据需要对它们进行字符串化:
let qs = Object.entries(obj).map(([k, v]) => `${k}=${encodeURIComponent(typeof (v) === "object" ? JSON.stringify(v) : v)}`).join('&')
我们还应该处理任何项的值是未定义的情况，该键不应该包含在序列化的字符串中。
const serialize = (obj) => {
return Object.entries(obj)
.filter(([, value]) => value)
.map(([key, value]) => `${key}=${encodeURIComponent(value)}`)
.join('&');
}
我需要处理嵌套对象和数组的东西。
const Util = {
isArray: function(val) {
return Object.prototype.toString.call(val) === '[object Array]';
},
isNil: function(val) {
return val === null || Util.typeOf(val)
},
typeOf: function(val, type) {
return (type || 'undefined') === typeof val;
},
funEach: function(obj, fun) {
if (Util.isNil(obj))
return; // empty value
if (!Util.typeOf(obj, 'object'))
obj = [obj]; // Convert to array
if (Util.isArray(obj)) {
// Iterate over array
for (var i = 0, l = obj.length; i < l; i++)
fun.call(null, obj[i], i, obj);
} else {
// Iterate over object
for (var key in obj)
Object.prototype.hasOwnProperty.call(obj, key) && fun.call(null, obj[key], key, obj);
}
}
};
const serialize = (params) => {
let pair = [];
const encodeValue = v => {
if (Util.typeOf(v, 'object'))
v = JSON.stringify(v);
return encodeURIComponent(v);
};
Util.funEach(params, (val, key) => {
let isNil = Util.isNil(val);
if (!isNil && Util.isArray(val))
key = `${key}[]`;
else
val = [val];
Util.funEach(val, v => {
pair.push(`${key}=${isNil ? "" : encodeValue(v)}`);
});
});
return pair.join('&');
};
用法:
serialize({
id: null,
lat: "27",
lng: "53",
polygon: ["27,53", "31,18", "22,62", "..."]
}); // "id=&lat=27&lng=53&polygon[]=27%2C53&polygon[]=31%2C18&polygon[]=22%2C62&polygon[]=..."
export const convertObjToUrlParams = (obj) =>
{
var paramString = '';
for (let key in obj)
{
if (obj[key] !== null && obj[key] !== undefined)
{
paramString += '&';
paramString += key + "=" + obj[key];
}
}
return paramString;
}
输出Ex: &firstName=NoDo&userId=2acf67ed-73c7-4707-9b49-17e78afce42e&email=n@n.dk&phoneNumber=12345678&password=123456
试试这个…这也适用于嵌套对象。
let my_obj = {'single':'this is single', 'nested':['child1','child2']};
((o)=>{ return Object.keys(o).map(function(key){ let ret=[]; if(Array.isArray(o[key])){ o[key].forEach((item)=>{ ret.push(`${key}[]=${encodeURIComponent(item)}`); }); }else{ ret.push(`${key}=${encodeURIComponent(o[key])}`); } return ret.join("&"); }).join("&"); })(my_obj);
ES6的一个快速回答:
const paramsObject = {
foo: "bar",
biz: "baz"
}
const params = Object.entries(paramsObject)
.map(([k, v]) => `${k}=${v}`)
.join('&');
// Output: foo=bar&biz=baz
