Js将对象转换为URL参数及将URL参数转换为对象的方法

文章来源：技术库 地址：www.ctoku.com/post/CFwLms…

Js将对象转换为URL参数及将URL参数转换为对象的方法

在开发小程序的时候，发现咱们获取到的path不包括其中的参数，可是微信小程序是将参数做为query对象过来，这对于咱们作路径二次跳转的时候及不方便，咱们在取到query时将其转换为URL参数和path拼装起来就是一个完整的路径。

JS 对象转URL参数

这里咱们来看一个测试： 假如咱们进入小程序时取到了以下参数

path: "pages/new/info",
query: {
	news_id: "144",
	scorce: "seo"
}
复制代码

对于这样的地址，咱们须要将其拼装起来，那么就须要将query对象转换成news_id=114&scorce=seo这样的格式。

第一种方式：正则表达式替换

第一种方式就是将其转换为字符串利用正则表达式将：转换为=，将 "转换为空，将,转换为&，再去掉两端的{} 就是一个完整的news_id=114&scorce=seo格式

看下过程

let query = {news_id: "144", scorce: "seo"}
let query_str = JSON.stringify(query)
console.log(query_str)
// {"news_id":"144","scorce":"seo"}
let query_str_a = query_str.replace(/:/g,"=")
console.log(query_str_a)
//{"news_id"="144","scorce"="seo"}
let query_str_b = query_str_a.reolace(/"/g, ''), console.lgo(quert_str_b) //{news_id=144,scorce=seo} let query_str_c = query_str_b.reolace(/,/g, '&') console.log(quert_str_c) //{news_id=144&scorce=seo} //去掉{} let query_str_d = query_str_c.match(/\{([^)]*)\}/) console.log(query_str_d[1]) //news_id=144&scorce=seo 复制代码

咱们获得了news_id=144&scorce=seo这样的数据格式，而后和path拼接能够获得一个完整的URL pages/new/info?news_id=144&scorce=seo 可是这种方法代码太多，只是能够参考

遍历循环处理

convertObj(data) {
    var _result = [];
    for (var key in data) {
      var value = data[key];
      if (value.constructor == Array) {
        value.forEach(function(_value) {
          _result.push(key + "=" + _value);
        });
      } else {
        _result.push(key + '=' + value);
      }
    }
    return _result.join('&');
  },

console.log(convertObj(query))
//news_id=144&scorce=seo
复制代码

此方法利用了遍历对象进行拼凑,将数据转换为key=value 的格式，而后将局中的= 转换为&，次方法是比较简单命令的一种。

JS将URL参数转换为对象

第一种

和对象转换为URL参数的正则处理相反，能够参考

截取、遍历

将URL中？后面的字符获取到，将其使用split('&') 转换为一个数组格式的数据，而后对数据进行循环，处理其中的=，根据=将其转换为两个数据，下标为[0]做为对象的key，下标为[1]则是key对应的值。 总结为如下方法

function urlToObj(str){
  var obj = {};
  var arr1 = str.split("?");
  var arr2 = arr1[1].split("&");
&emsp;&emsp;for(var i=0 ; i < arr2.length; i++){
&emsp;&emsp;&emsp;&emsp;var res = arr2[i].split("=");
&emsp;&emsp;&emsp;&emsp;obj[res[0]] = res[1];
&emsp;&emsp;}
&emsp;&emsp;return obj;
}
console.log(urlToObj('https://www.baidu.com/s?ie=utf-8&f=3&rsv_bp=1&tn=baidu&wd=%E7%99%BE%E5%BA%A6'))
//{ie: "utf-8", f: "3", rsv_bp: "1", tn: "baidu", wd: "%E7%99%BE%E5%BA%A6"}
复制代码