如何将Object序列化为URL查询参数列表？

Question

在不知道JavaScript的键的情况下Object,我怎么能像...

var obj = {
   param1: 'something',
   param2: 'somethingelse',
   param3: 'another'
}

obj[param4] = 'yetanother';

... INTO ...

var str = 'param1=something&param2=somethingelse&param3=another&param4=yetanother';

...？

Answer 1

如果你使用jQuery,它就是用来参数化GET ajax请求的选项:

$.param( obj )

http://api.jquery.com/jQuery.param/

Answer 2

优雅的:(假设您正在运行现代浏览器或节点)

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('&');

注意:encodeURIComponent()如果键/值不是URL编码,您可能希望使用.

Answer 3

var str = "";
for (var key in obj) {
    if (str != "") {
        str += "&";
    }
    str += key + "=" + encodeURIComponent(obj[key]);
}

示例:http: //jsfiddle.net/WFPen/

Answer 4

ES6:

function params(data) {
  return Object.keys(data).map(key => `${key}=${encodeURIComponent(data[key])}`).join('&');
}

console.log(params({foo: 'bar'}));
console.log(params({foo: 'bar', baz: 'qux$'}));

Answer 5

ES2017方法

Object.entries(obj).map(([key, val]) => `${key}=${val}`).join('&')

Answer 6

一层深......

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().

Answer 7

这个怎么样？这是一行，没有依赖项：

new URLSearchParams(obj).toString();
// OUT: param1=something&param2=somethingelse&param3=another&param4=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);

Answer 8

仅供记录,如果您有支持ES6的浏览器,这里有一个解决方案reduce:

Object.keys(obj).reduce((prev, key, i) => (
  `${prev}${i!==0?'&':''}${key}=${obj[key]}`
), '');

这是一个行动片段!

// Just for test purposes
let obj = {param1: 12, param2: "test"};

// Actual solution
let result = Object.keys(obj).reduce((prev, key, i) => (
  `${prev}${i!==0?'&':''}${key}=${obj[key]}`
), '');

// Run the snippet to show what happens!
console.log(result);

Answer 9

Object.keys(obj).map(k => `${encodeURIComponent(k)}=${encodeURIComponent(obj[k])}`).join('&')

Answer 10

由于我对递归函数做了大量的讨论,这是我自己的版本.

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/

Answer 11

如果您使用的是 NodeJS 13.1 或更高版本，则可以使用本机 querystring 模块来解析查询字符串。

const qs = require('querystring');
let str = qs.stringify(obj)