基於JavaScript將表單序列化類型的資料轉換成物件的處理（允許物件中包含物件）

基於JavaScript將表單序列化類型的資料轉換成物件的處理（允許物件中包含物件）_javascript技巧

WBOY

發布： 2016-05-16 15:23:08

原創

1859 人瀏覽過

表單序列化類型的資料是指url傳遞的資料的格式，形如"key=value&key=value&key=value"這樣的key/value的鍵值對。一般來說使用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'"都擁有父物件test）。另外一個就是值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將表單序列化類型的資料轉換成物件的處理（允許物件中包含物件），希望本文分享能為大家帶來幫助。