기사 출처: 기술 라이브러리 주소: 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와 연결하면 완전한 URLpages/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 매개 변수를 객체로 변환

제1종

객체가 URL 매개 변수로 변환되는 일반 프로세스와는 반대로 참조할 수 있습니다.

두루

URL？ 뒤에 있는 문자를 가져와 split('&')를 하나의 그룹 형식으로 변환한 다음에 데이터를 순환시켜 그 중의 =를 처리한다. =에 따라 두 개의 데이터로 변환하고 [0]를 대상으로 하는 key, [1]로 표시하면 키에 대응하는 값이다.다음과 같은 방법으로 요약

function urlToObj(str){
  var obj = {};
  var arr1 = str.split("?");
  var arr2 = arr1[1].split("&");
  for(var i=0 ; i < arr2.length; i++){
    var res = arr2[i].split("=");
    obj[res[0]] = res[1];
  }
  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"}

전재 대상:https://juejin.im/post/5cef52c3f265da1b7401e0a6