JS实现JSON对象与URL参数的相互转换

在实际的开发过程中，可能会遇到需要将 JSON对象转换为URL参数，或者将URL参数转换为JSON对象的场景，比如有一个JSON对象如下：

{
    "type": 1,
    "keyword": "js"
}

需要转换成URL参数：type=1&keyword=js

1、JSON对象转换为URL参数

JSON对象转换为URL参数，主要有两种实现方式，一种是遍历JSON对象属性，另一种是使用 URLSearchParams ，下面分别结合代码介绍一下。

（1）遍历JSON对象属性

使用循环的方式遍历JSON对象的属性，然后将其拼接起来，这可能是最容易想到的一种方式，下面给出一种遍历JSON对象属性的实现方式：

function jsonToUrlParam(json) {
    return Object.keys(json).map(key => key + '=' + json[key]).join('&');
}

测试一下

let json = {
    "type": 1,
    "keyword": "js"
};
console.log(jsonToUrlParam(json));

输出的结果如下：

type=1&keyword=js

在实际的应用场景中，一个JSON对象可能有很多属性，但是URL参数只需要部分属性，这个时候可以改造一下上面的方法，从而实现忽略指定的属性即可，如下：

function jsonToUrlParam(json, ignoreFields) {
    return Object.keys(json)
        .filter(key => ignoreFields.indexOf(key) === -1)
        .map(key => key + '=' + json[key]).join('&');
}

测试一下忽略 type 属性

let json = {
    "type": 1,
    "keyword": "js"
};
console.log(jsonToUrlParam(json, ['type']));

输出的结果如下：

keyword=js

（2）URLSearchParams

关于 URLSearchParams，可以先来看看官方https://developer.mozilla.org/zh-CN/docs/Web/API/URLSearchParams的定义

URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串。

简单来说，它就是用来处理URL上的参数字符串的，即 ? 后面部分 A=B&C=D&E=F 的内容，开头的'?' 字符会被忽略，来看看它是如何使用的：

function jsonToUrlParam(json) {
    return new URLSearchParams(json).toString();
}

测试一下

let json = {
    "type": 1,
    "keyword": "js"
};
console.log(jsonToUrlParam(json));

输出的结果如下：

type=1&keyword=js

2、URL参数转换为JSON对象

比如有这样的一个 URL ：http://example.com?type=1&key...，它的参数部分为 type=1&keyword=js，如何将其转换为一个JSON对象呢？具体实现代码如下：

function urlParamToJson(urlParam) {
    let json = {};
    urlParam.trim()
        .split('&')
        .forEach(item => json[item.split('=')[0]] = item.split('=')[1]);

    return json;
}

测试一下

console.log(JSON.stringify(urlParamToJson('type=1&keyword=js')))

输出结果如下：

{"type":"1","keyword":"js"}

对于这个方法，也可以对其进行改造一下，直接传入一个url，然后在方法里面提取参数部分，最后再进行转换，代码如下：

function urlParamToJson(url) {
    if (!url) {
        return {};
    }

    let json = {};
    url.substring(url.indexOf('?') + 1)
        .trim()
        .split('&')
        .forEach(item => json[item.split('=')[0]] = item.split('=')[1]);

    return json;
}

传入一个url进行测试

console.log(JSON.stringify(urlParamToJson('http://example.com?type=1&keyword=js')))

输出结果如下：

{"type":"1","keyword":"js"}