基于JavaScript将表单序列化类型的数据转化成对象的处理（允许对象中包含对象）

前端技术 2023/09/06 JavaScript

表单序列化类型的数据是指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]]?\"\":(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]]?\"\":(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将表单序列化类型的数据转化成对象的处理（允许对象中包含对象），希望本文分享能够给大家带来帮助。

本文地址：https://www.stayed.cn/item/17377

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案