关于javascript: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"}