在理论的开发过程中,可能会遇到须要将 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"}