Memproses menukar data jenis siri bentuk kepada objek berdasarkan JavaScript (membenarkan objek mengandungi objek)_kemahiran javascript

Data jenis siri bentuk merujuk kepada format data yang diluluskan oleh URL, iaitu pasangan kunci/nilai dalam bentuk "key=value&key=value&key=value". Secara umumnya, kesan ini boleh dicapai menggunakan fungsi $.fn.serialize jQuery. Bagaimana untuk menukar format sedemikian menjadi objek?

Kami tahu bahawa menggunakan fungsi $.fn.serializeArray jQuery mendapat objek dengan struktur berikut

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

Ini ialah tatasusunan objek, tetapi kadangkala kita ingin mendapatkan objek dengan struktur berikut

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

Jadi fungsi penukaran diperlukan di sini.

Langkah pemprosesan adalah seperti berikut:

1. Gunakan "&" untuk memisahkan setiap pasangan nilai kunci dan kemudian gelung setiap pasangan nilai kunci

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

2. Pisahkan pasangan nilai kunci yang ditentukan daripada simbol "=" dan gunakan decodeURIComponent untuk menghuraikan pengekodan komponen uri untuk setiap kunci dan nilai (kerana data bersiri yang diluluskan oleh URL biasanya dikodkan oleh komponen 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. Jika nilai mengandungi simbol "=", pemprosesan tambahan (penggabungan nilai) diperlukan.                           

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

Terdapat proses di sini, iaitu, jika nilai tidak wujud, ia tidak akan ditambahkan pada objek akhir. Anda boleh memilih sama ada mahu memadam kod ini atau tidak mengikut situasi anda sendiri

   if(!attributeValue){
      return ;
    } 

4. Jika kunci ialah "obj.obj.obj" dipautkan oleh simbol ", ia perlu dianggap sebagai objek yang mengandungi objek. Kaedah pemprosesan adalah untuk menguraikan kunci melalui ".", dan kemudian semak sama ada obj objek sementara sudah mengandungi objek terurai Jika ya, tambahkan data pada objek sedia ada. Kod sumber adalah seperti berikut

 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(); 

Di sini kita melihat bahawa bahagian tugasan dikendalikan dengan cara ini di Internet

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

Ini sangat bermasalah ialah ia tidak dapat menangani masalah dengan betul bahawa objek dalam 4 objek mengandungi objek (terutama apabila dua elemen mempunyai objek induk yang sama, seperti "test.id=1&test.name='chua' ") memiliki ujian objek induk). Yang lain ialah apabila nilai attributeValue mengandungi petikan tunggal atau petikan berganda, ia tidak boleh diproses dengan betul. Jadi menggunakan tugasan "=" adalah yang paling selamat.

Jadi kod sumber lengkap terakhir adalah seperti berikut

/*
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;
}

Kandungan di atas adalah berdasarkan pemprosesan JavaScript untuk menukar data jenis siri bentuk kepada objek (objek dibenarkan mengandungi objek, saya harap perkongsian artikel ini dapat membantu semua orang).