양식 직렬화 형태의 데이터를 JavaScript 기반의 객체로 변환 처리(객체가 객체를 포함할 수 있도록 함)_javascript 기술

직렬화형 데이터 형식은 URL이 전달하는 데이터의 형식을 의미하며, 이는 "키=값&키=값&키=값" 형식의 키/값 쌍입니다. 일반적으로 이 효과는 jQuery의 $.fn.serialize 함수를 사용하여 얻을 수 있습니다. 이러한 형식을 개체로 변환하는 방법은 무엇입니까?

우리는 jQuery의 $.fn.serializeArray 함수를 사용하면 다음 구조의 객체를 얻는다는 것을 알고 있습니다.

[
  {
    name: "startTime"
    value: "2015-12-02 00:00:00"
  },
  {
    name: "endTime"
    value: "2015-12-25 23:59:59"
  }
]

이것은 객체 배열이지만 때로는 다음 구조의 객체를 얻고 싶을 때가 있습니다

{
  "startTime": "2015-12-02 00:00:00"
  "endTime": "2015-12-25 23:59:59"
}

그래서 여기에 변환 기능이 필요합니다.

처리 단계는 다음과 같습니다.

1. "&"를 사용하여 각 키-값 쌍을 분리한 다음 각 키-값 쌍을 반복합니다.

  var properties = serializedParams.split("&");
  for (var i = 0; i < properties.length; i++) {
    //处理每一个键值对
    evalThem(properties[i]);
  }; 

2. "=" 기호에서 지정된 키-값 쌍을 분할하고 decodeURIComponent를 사용하여 각 키와 값에 대한 uri 구성 요소 인코딩을 구문 분석합니다(URL로 전달된 직렬화된 데이터는 일반적으로 uri 구성 요소에 의해 인코딩되기 때문입니다).

    var strAry = new Array();
    strAry = str.split("=");
    //使用decodeURIComponent解析uri 组件编码
    for(var i = 0; i < strAry.length; i++){
      strAry[i] = decodeURIComponent(strAry[i]);
    }
    var attributeName = strAry[0];
    var attributeValue = strAry[1].trim(); 

3. 값에 "=" 기호가 포함된 경우 추가 처리(값 병합)가 필요합니다.                           

 if(strAry.length > 2){
      for(var i = 2;i<strAry.length;i++){
        attributeValue += "="+strAry[i].trim();
      }
    } 

여기에는 프로세스가 있습니다. 즉, 값이 존재하지 않으면 최종 개체에 추가되지 않습니다. 귀하의 상황에 따라 이 코드를 삭제할지 여부를 선택하실 수 있습니다

   if(!attributeValue){
      return ;
    } 

4. 키가 "." 기호로 연결된 "obj.obj.obj"인 경우 개체를 포함하는 개체로 처리되어야 합니다. 처리 방법은 "."을 통해 키를 분해한 후 임시 객체 obj에 이미 분해된 객체가 포함되어 있는지 확인하는 것입니다. 그렇다면 기존 객체에 데이터를 추가합니다. 소스코드는 다음과 같습니다

 var attriNames = attributeName.split("."),
      curObj = obj;
    for(var i = 0; i < (attriNames.length - 1); i++){
      curObj[attriNames[i]]&#63;"":(curObj[attriNames[i]] = {});
      curObj = curObj[attriNames[i]];
    }
    curObj[attriNames[i]] = attributeValue.trim(); 

인터넷에서 과제 부분이 이런 방식으로 처리되는 것을 볼 수 있습니다

eval("obj."+attributeName+"=\""+attributeValue.trim()+"\";"); 

이는 매우 문제가 됩니다. 하나는 4개의 개체에 개체가 포함되어 있는 문제를 올바르게 처리할 수 없다는 것입니다(특히 "test.id=1&test.name='chua'와 같이 두 요소가 동일한 상위 개체를 갖는 경우). ")는 상위 개체 테스트를 소유합니다). 다른 하나는 attributeValue 값에 작은따옴표나 큰따옴표가 포함되어 있으면 올바르게 처리할 수 없다는 것입니다. 따라서 "=" 할당을 사용하는 것이 가장 안전합니다.

그래서 최종 완성된 소스코드는 다음과 같습니다

/*
serializedParams格式为"key1=value1&key2=value2". 
也支持'key.sonkey=value' 
 */
function paramString2obj (serializedParams) {  
  var obj={};
  function evalThem (str) {
    var strAry = new Array();
    strAry = str.split("=");
    //使用decodeURIComponent解析uri 组件编码
    for(var i = 0; i < strAry.length; i++){
      strAry[i] = decodeURIComponent(strAry[i]);
    }
    var attributeName = strAry[0];
    var attributeValue = strAry[1].trim();
    //如果值中包含"="符号，需要合并值
    if(strAry.length > 2){
      for(var i = 2;i<strAry.length;i++){
        attributeValue += "="+strAry[i].trim();
      }
    }
    if(!attributeValue){
      return ;
    }
    var attriNames = attributeName.split("."),
      curObj = obj;
    for(var i = 0; i < (attriNames.length - 1); i++){
      curObj[attriNames[i]]&#63;"":(curObj[attriNames[i]] = {});
      curObj = curObj[attriNames[i]];
    }
    //使用赋值方式obj[attributeName] = attributeValue.trim();替换
    //eval("obj."+attributeName+"=\""+attributeValue.trim()+"\";");
    //解决值attributeValue中包含单引号、双引号时无法处理的问题
    curObj[attriNames[i]] = attributeValue.trim();
  };
  var properties = serializedParams.split("&");
  for (var i = 0; i < properties.length; i++) {
    //处理每一个键值对
    evalThem(properties[i]);
  };
  return obj;
}

위 내용은 양식 직렬화 유형 데이터를 객체로 변환하는 JavaScript의 처리를 기반으로 합니다(객체는 객체를 포함할 수 있음). 이 기사를 공유하는 것이 모든 사람에게 도움이 되기를 바랍니다.