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"}
複製代碼