JS实现表单序列化数据转对象，支持嵌套结构

表单序列化数据转对象的处理

表单序列化数据通常指URL传递的参数格式，表现为"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传递的序列化数据通常经过编码）。


    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]]?"":(curObj[attriNames[i]] = {});
      curObj = curObj[attriNames[i]];
    }
    curObj[attriNames[i]] = attributeValue.trim();

网上有些文章对赋值部分的处理方式如下。


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

存在缺陷，无法妥善解决四种对象嵌套对象的情形（特别是当两个元素共享同一父对象时，例如"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]]?"":(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将表单序列化类型数据转化为对象的方法（支持对象中包含对象），希望本文分享能够给大家带来帮助。

JavaScript将表单序列化字符串转换为嵌套对象的方法

表单序列化数据转对象的处理

实用工具推荐