JavaScript를 사용하여 중첩 된 객체/연관 배열을 쿼리 문자열로 변환

Question

자바 스크립트를 사용하여 객체를 쿼리 문자열로 변환하고 싶습니다.

{ 
    a: 'hello', 
    b: { 
     b1: 'my', 
     b2: 'friend' 
     b3: { 
      c: 90 
     } 
    } 
} 

에 : 나는 여기에 꽤 많은 답을 발견

?a=hello&b%5Bb1%5D=my&b%5Bb2%5D=friend&b%5Bb3%5D%5Bc%5D=90 

: Flatten a javascript object to pass as querystring, 그러나 처리하지 않는 것

예를 들어, 나는 변환 할 연관 배열 (또는 객체 내의 객체)의 문제

jQuery.param을 사용하여 정상적으로 작동하는 JQuery에 대한 좋은 답변을 찾았지만 네이티브 JS 또는 Underscore.js를 사용하는 답변을 원합니다.

어떻게하면됩니까?

Answer 1

기존의 바퀴를 재발 명하지 않으실 것을 적극 권장합니다. 구현 자체가 훨씬 덜 유연하고 오류가 발생하는 경향이 있습니다 (쿼리 문자열 매개 변수를 올바르게 인코딩하는 방법에 대해 생각해 보셨습니까?) 대신 query-string 모듈을 살펴보십시오.

Answer 2

당신은이 작업을 수행 할 수 있습니다

let obj = { 
     a: 'hello', 
     b: { 
      b1: 'my', 
      b2: 'friend', 
      b3: { 
       c: 90 
      } 
     } 
    } 

function getQueryString(obj, encode) { 

     function getPathToObj(obj, path = []) { 
     let result = []; 

     for (let key in obj) { 
      if (!obj.hasOwnProperty(key)) return; 

      //deep copy 
      let newPath = path.slice(); 
      newPath.push(key); 

      let everyPath = []; 
      if (typeof obj[key] === "object") { 
      everyPath = getPathToObj(obj[key], newPath); 
      } else { 
      everyPath.push({ 
       path: newPath, 
       val: obj[key] 
      }); 
      } 

      everyPath.map((item) => result.push(item)) 
     } 

     return result; 
     } 

     function composeQueryString(paths) { 
     let result = ""; 
     paths.map((item) => { 
      let pathString = ""; 
      if (item.path.length > 1) { 
      pathString = item.path.reduce((a, b, index) => { 
       return a + '['+ b +']'; 
      }) 
      } else { 
      pathString = item.path[0]; 
      } 

      if (result) { 
      pathString = "&" + pathString + '=' + item.val; 
      } else { 
      pathString = "?" + pathString + '=' + item.val; 
      } 

      result += pathString; 
     }); 

     return result; 
     } 

     const str = composeQueryString(getPathToObj(obj)); 
     return encode === true ? encodeURI(str) : str; 
    } 
    console.log(getQueryString(obj, true)); 

GET : A = 안녕하세요 & ㄴ % 5Bb1 % 5D = 내 & ㄴ % 5Bb2 % 5D = 친구 & ㄴ % 5Bb3 %의 5D을 % 5Bc % 5D = 90