Artikel ini memperincikan cara menggunakan JavaScript untuk menukar objek yang mengandungi sifat bersarang ke dalam parameter pertanyaan URL yang mematuhi spesifikasi medan yang jarang berlaku. Dengan menyesuaikan fungsi rekursif, {type: {name: 's'}} dapat dengan cekap ditukar kepada bentuk parameter url jenis [name] = s, yang menyelesaikan masalah yang urlsearchparams standard tidak dapat mengendalikan struktur bersarang secara langsung, memastikan url yang dihasilkan memenuhi syarat -syarat tertentu.

Pengenalan: Parameter pertanyaan URL dan medan jarang

Dalam pembangunan web, kita sering perlu menukar objek JavaScript ke dalam parameter pertanyaan URL untuk menghantar data ke API Backend. Untuk pasangan nilai kunci mudah, seperti {Limit: 0, Offset: 10} ditukar kepada Limit = 0 & Offset = 10, antara muka UrlSearchParams JavaScript boleh mengendalikannya dengan baik. Walau bagaimanapun, apabila objek mengandungi struktur bersarang dan API memerlukan ekspresi dalam format "lapangan jarang", seperti penukaran {type: {name: 's', umur: 'n'}} untuk menaip [name] = s & type [umur] = n, kaedah standard menjadi tidak mencukupi. Format ini sangat biasa dalam beberapa reka bentuk API yang tenang dan digunakan untuk menentukan dengan tepat bidang yang perlu diperoleh atau diubah suai.

Cabaran: Batasan Kaedah Standard

Marilah kita pertimbangkan objek JavaScript berikut:

 const page = {
  Had: 0,
  mengimbangi: 10,
  Jenis: {
    Nama: 'S',
    Umur: 'N'
  }
};

Rentetan pertanyaan URL yang kami harapkan untuk menghasilkan adalah: had = 0 & offset = 10 & type [name] = s & type [usia] = n

Jika anda cuba menggunakan URLSearchParams, ia akan merentasi keseluruhan objek jenis, menyebabkan hasilnya tidak seperti yang diharapkan:

 const params = urlSearchParams baru (halaman);
console.log (params.toString ());
// Hasilnya mungkin sama dengan: had = 0 & offset = 10 & type = [objek objek]

Jelas sekali, ini tidak memenuhi keperluan untuk medan jarang. Oleh itu, kita memerlukan penyelesaian tersuai untuk mengendalikan objek bersarang secara rekursif dan menghasilkan format parameter pertanyaan yang betul.

Penyelesaian: Membina fungsi parameter pertanyaan secara rekursif

Untuk menyelesaikan masalah di atas, kita boleh menulis fungsi rekursif yang meleleh melalui sifat objek dan membina rentetan pertanyaan berdasarkan jenis harta (nilai mentah atau objek bersarang).

Pelaksanaan fungsi teras

Berikut adalah fungsi JavaScript yang melakukan ini:

 /**
 * Menukar objek JavaScript ke dalam rentetan parameter pertanyaan URL yang mematuhi spesifikasi medan yang jarang.
 * Menyokong objek bersarang dan kunci dan nilai encode url.
 *
 * @param {object} obj - objek javascript untuk ditukar.
 * @param {string} [parentkey = ''] - Nama kunci induk atribut yang sedang diproses, digunakan untuk membina struktur bersarang, seperti 'jenis' dalam 'jenis [nama]'.
 * @returns {String} Parameter Parameter Pertanyaan URL yang dihasilkan.
 */
const createesparsefieldSetQuery = (obj, parentKey = '') => {
  returnObject.Keys (OBJ)
    .Reduce ((acc, kekunci) => {
      // Membina nama kunci lengkap harta semasa, seperti 'jenis' atau 'jenis [nama]'
      const currentKey = ParentKey? `$ {parentkey} [$ {key}]`: key;
      const value = obj [key];

      jika (typeof value === 'object' && value! == null) {
        // Jika nilai itu adalah objek dan tidak batal, panggil dirinya secara rekursif untuk memproses objek bersarang pulangan acc.concat (CreateSparsefieldSetQuery (nilai, CurrentKey));
      } else {
        // Jika ia adalah nilai mentah (termasuk null), URL dikodkan dan ditambah kepada array hasil // encodeuricomponent digunakan untuk memastikan watak -watak khas (seperti ruang, &, =) dikodkan dengan betul acc.concat (`$ {encodeuriceMPonent)}}
      }
    }, []) // Inisialisasi array kosong untuk mengumpul semua serpihan parameter.join ('&'); // Akhirnya menyertai semua serpihan parameter dengan '&'};

Analisis fungsi

1. CreateSparsefieldSetery (OBJ, ParentKey = '') : Fungsi ini menerima dua parameter: OBJ adalah objek yang sedang diproses, ParentKey adalah pilihan, dan digunakan untuk membina laluan penuh atribut bersarang (contohnya, jika atribut nama dalam objek jenis kini diproses, ParentKey akan menjadi jenis).
2. Object.keys (obj) .reduce (...) : melintasi semua sifat langsung objek. Kaedah mengurangkan digunakan untuk mengumpul bahagian parameter pertanyaan yang dibina.
3. const currentKey = parentKey? $ {parentkey} [$ {key}]: key; : Garis ini adalah kunci untuk membina format medan yang jarang. Jika ParentKey wujud (menunjukkan bahawa pemprosesan semasa adalah atribut bersarang), bungkus kunci dalam kurungan persegi dan masukkannya ke parentkey, membentuk format seperti jenis [nama]. Jika tidak, gunakan kekunci secara langsung.
4. jika (typeof value === 'object' && value! == null) : Tentukan sama ada nilai atribut semasa adalah objek (dan tidak null).
   • Jika ia adalah objek, ini bermakna ada bersarang. Fungsi ini akan memanggil dirinya secara rekursif dan lulus CurrentKey sebagai parentkey baru untuk memproses tahap bersarang seterusnya.
   • Jika bukan objek (iaitu, nilai primitif seperti rentetan, nombor, nilai boolean, atau null), cawangan lain dimasukkan.
5. kembali acc.concat ($ {encodeuricomponent (currentKey)} = $ {encodeuricomponent (value)}); : Untuk nilai mentah, kami menggunakan fungsi encodeuricomponent () untuk mengodkan kunci dan nilai. Ini adalah langkah yang sangat penting untuk mencegah watak -watak khas dalam URL (seperti ruang, &, =,?, Dan sebagainya) daripada merosakkan struktur URL atau menyebabkan kesilapan parsing. Kemudian, tambah kekunci yang dikodkan = pasangan nilai ke array pengumpulan.
6. .Join ('&') : Kaedah Mengurangkan akhirnya akan mengembalikan array yang mengandungi semua kunci = nilai pasangan nilai, dan akhirnya menyertai mereka dengan & simbol melalui Join ('&') untuk membentuk rentetan pertanyaan lengkap.

Contoh penggunaan

Sekarang, kita boleh menggunakan fungsi ini untuk mengubah objek halaman kami:

 const page = {
  Had: 0,
  mengimbangi: 10,
  Jenis: {
    Nama: 'S',
    Umur: 'N',
    Butiran: {
      Warna: 'merah',
      Saiz: 'M'
    }
  },
  Status: 'Aktif'
};

const queryString = CreateSparsFieldSetQuery (Page);
console.log (queryString);

// output yang diharapkan:
// had = 0 & offset = 10 & type [name] = s & type [usia] = n & type [details] [color] = red & type [details] [size] = m & status = aktif
// selepas penyahkodan: had = 0 & offset = 10 & type [name] = s & type [usia] = n & type [details] [color] = red & type [details] [size] = m & status = aktif

// menganggap kita mempunyai URL asas
const baseUrl = "https://api.example.com/products";
const fulturl = `$ {baseUrl}? $ {querystring}`;
console.log (fulturl);
// Contoh URL Lengkap: https://api.example.com/products?limit=0&offset=10&type… nama=s &type ceren

Nota dan sambungan

1. Kepentingan pengekodan URL : Seperti yang ditunjukkan oleh kod, encodeuricomponent () adalah sangat diperlukan. Ia memastikan bahawa semua aksara bukan alphanumerik dikodkan dengan betul, mengelakkan masalah parsing URL dan lubang keselamatan.
2. Sokongan bersarang pelbagai peringkat : Fungsi rekursif di atas secara semulajadi dapat mengendalikan objek bersarang dari mana-mana kedalaman, selagi mereka mematuhi struktur lapangan jarang ibu bapa [anak] = nilai.
3. Pemprosesan Array : Fungsi semasa terutamanya bertujuan untuk bersarang objek. Jika anda perlu memproses tatasusunan (contohnya, item [] = Apple & Item [] = oren atau item [0] = Apple & Item [1] = oren), anda perlu melanjutkan fungsi dan menambah penghakiman jenis array dan logik pembinaan nama utama yang sepadan. Ini biasanya melibatkan menggunakan indeks array sebagai nama utama.
4. Nilai kosong dan tidak ditentukan :
   • Nilai null akan ditukar kepada rentetan "null" oleh encodeuricomponent (null).
   • Nilai yang tidak ditentukan akan ditukar kepada rentetan "undefined" rentetan dalam encodeuricomponent (undefined). Jika anda mahu atribut yang tidak ditentukan untuk diabaikan, anda perlu menambah logik penghakiman tambahan di dalam fungsi tersebut.
5. Pertimbangan Prestasi : Untuk objek yang sangat besar dan sangat bersarang, fungsi rekursif mungkin mempunyai overhead prestasi. Tetapi dalam kebanyakan senario aplikasi web, overhead ini biasanya boleh diterima.
6. Pemilihan Perpustakaan : Dalam projek sebenar, jika anda mempunyai keperluan yang lebih kompleks untuk pemprosesan parameter URL (contohnya, menyokong pelbagai format array, mengabaikan nilai null, peraturan pengekodan tersuai, dan lain-lain), anda boleh mempertimbangkan menggunakan perpustakaan pihak ketiga yang matang, seperti QS (penggantian untuk pertanyaan), yang menyediakan lebih banyak fungsi dan keserasian yang lebih komprehensif.

Meringkaskan

Dengan melaksanakan fungsi rekursif tersuai CreateSparsefieldSetQuery, kami berjaya menyelesaikan masalah menukarkan objek JavaScript yang mengandungi sifat bersarang ke dalam parameter pertanyaan URL yang mematuhi spesifikasi lapangan yang jarang. Penyelesaian ini bukan sahaja fleksibel dan mudah difahami, tetapi juga memastikan ketepatan dan keselamatan URL yang dihasilkan dengan mengintegrasikan encodeuricomponent. Kaedah tersuai ini menyediakan alat yang kuat dan praktikal apabila berhadapan dengan senario yang memerlukan kawalan yang tepat ke atas format parameter permintaan API.

Atas ialah kandungan terperinci Membina Parameter Pertanyaan Bidang Ringkas URL yang Menyokong Objek Bersarang dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!