JavaScriptによるフォーム直列型データのオブジェクト化処理（オブジェクトにオブジェクトを内包できるようにする）_javascriptスキル

フォームシリアル化タイプのデータは、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 によって渡されるシリアル化されたデータは 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()+"\";"); 

これは非常に問題があります。1 つは、4 つのオブジェクト内のオブジェクトにオブジェクトが含まれているという問題 (特に、「test.id=1&test.name='chua' など、2 つの要素が同じ親オブジェクトを持つ場合」) を正しく処理できないことです。 ") は親オブジェクト test) を所有します。もう1つは、値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の処理に基づいています(オブジェクトにはオブジェクトを含めることができます)。この記事が皆様のお役に立てれば幸いです。