Panduan untuk menapis susunan objek bersarang secara efisien berdasarkan keadaan kompleks dalam javascript

Tutorial ini akan menyelam cara menggunakan penapis (), beberapa (), dan setiap () kaedah dalam JavaScript untuk menapis dengan cekap satu lagi pilihan objek bersarang berdasarkan set susunan bersyarat kompleks. Kami akan menggunakan kes sebenar untuk menganalisis secara terperinci bagaimana untuk membina logik untuk mencapai penapisan data yang tepat, memastikan bahawa hanya item yang sepadan dengan semua syarat yang ditentukan dikekalkan.

Pengenalan

Dalam pembangunan web moden, pemprosesan dan penapisan struktur data kompleks adalah tugas yang sama. Terutama apabila data wujud dalam bentuk tatasusunan objek bersarang dan keadaan penapisan adalah sama rumit, bagaimana menulis kod yang efisien dan mudah dibaca menjadi cabaran. Tutorial ini akan memberi tumpuan kepada senario tipikal: Penapisan pelbagai data utama berdasarkan pelbagai objek yang mengandungi beberapa sub-kondisi, di mana setiap elemen array data primer juga mengandungi pelbagai objek pilihan. Kami akan menggunakan penapis fungsi pesanan tinggi JavaScript yang kuat (), beberapa () dan setiap () untuk menyelesaikan masalah ini dengan anggun.

Senario masalah dan struktur data

Katakan kami mempunyai pelbagai produk, setiap objek produk mengandungi pelbagai pilihan, yang menggambarkan pelbagai sifat produk (seperti saiz, warna). Pada masa yang sama, kami juga mempunyai pelbagai keadaan yang mentakrifkan syarat -syarat yang mesti kita temui untuk produk yang kita mahu menapis. Setiap keadaan itu sendiri juga merupakan array yang mengandungi pelbagai atribut/pasangan nilai, menunjukkan bahawa produk perlu memenuhi atribut ini pada masa yang sama sebelum ia dapat dipilih.

Contoh data asal:

 produk const = [
  {
    Pilihan: [
       {id: 1, nama: 'saiz', nilai: '10'},
       {id: 2, nama: 'warna', nilai: 'kuning'},
    ],
  },
  {
    Pilihan: [
       {id: 1, nama: 'saiz', nilai: '20'},
       {id: 2, nama: 'warna', nilai: 'kuning'},
    ],
  },
  {
    Pilihan: [
      {id: 1, nama: 'saiz', nilai: '10'},
      {id: 2, nama: 'warna', nilai: 'merah jambu'},
    ],
  },
  { 
    Pilihan: [
      {id: 1, nama: 'saiz', nilai: '20'},
      {id: 2, nama: 'warna', nilai: 'merah jambu'}
    ],
  },
  {
    Pilihan: [
      {id: 1, nama: 'saiz', nilai: '39'},
      {id: 2, nama: 'warna', nilai: 'merah jambu'},
    ],
   },
];

Contoh kriteria penapis:

 syarat const = [
  [
    {name: 'saiz', nilai: '10'},
    {name: 'color', value: 'yellow'},
  ],
  [
    {name: 'saiz', nilai: '10'},
    {Nama: 'Warna', Nilai: 'Pink'},
  ],
];

Matlamat kami adalah untuk menyaring semua produk yang memenuhi sebarang array bersyarat. Sebagai contoh, jika produk memenuhi kedua -dua "saiz 10 dan warna kuning" atau "saiz 10 dan warna merah jambu" pada masa yang sama, produk harus dimasukkan ke dalam hasilnya.

Output yang dijangkakan:

 const outputProducts = [
  {
    Pilihan: [
      {id: 1, nama: 'saiz', nilai: '10'},
      {id: 2, nama: 'warna', nilai: 'kuning'},
    ],
  },
  {
    Pilihan: [
      {id: 1, nama: 'saiz', nilai: '10'},
      {id: 2: 'warna', nilai: 'merah jambu'},
    ],
  },
];

Analisis salah faham yang biasa

Apabila cuba menyelesaikan masalah sedemikian, kesilapan biasa bagi pemula adalah mengelirukan beberapa () dan setiap () senario yang berkenaan, atau gagal untuk memadankan logik dengan betul dalam gelung bersarang. Sebagai contoh, kod tentatif berikut, walaupun menggunakan penapis, cari dan setiap, gagal mencapai hasil yang diharapkan:

 const filterProducts = products.filter ((el) => {
   kembali el.options.find ((o) => {// Pilihan Produk Traversal Return Conditions.Find ((m) => {// Traversal Condition Groups // Logic di sini adalah salah: ia cuba membuat pilihan produk `o` memadankan semua subkondisi dalam keseluruhan kumpulan keadaan` m`.
       // Malah, kita harus memeriksa sama ada semua pilihan `el.Options` produk memenuhi semua subkondisi dalam kumpulan keadaan` m`.
       kembali m.every (({name, value}) => o.name == name && o.value === value);
     });
   });
 });

Kesalahan kod di atas ialah apa yang diharapkan secara dalaman oleh M.Every (...) adalah untuk memeriksa sama ada setiap subkondisi dalam array M dipenuhi oleh O (pilihan produk tunggal). Walau bagaimanapun, pilihan produk o biasanya mewakili hanya satu atribut (seperti saiz atau warna), dan mustahil untuk memenuhi semua sub-kondisi dalam kumpulan keadaan M pada masa yang sama (mis., O tidak boleh kedua-dua saiz: '10' dan warna: 'kuning'). Logik yang betul adalah untuk setiap subkondisi dalam kumpulan keadaan M, kita perlu menyemak sama ada terdapat pilihan yang sepadan dalam pelbagai pilihan produk semasa.

Penyelesaian: Gunakan penapis (), beberapa (), setiap () gabungan

Kunci untuk menyelesaikan masalah ini adalah dengan betul penapis sarang (), beberapa (), dan setiap () untuk membina aliran logik yang tepat.

1. Penapis () : Lapisan paling luar, digunakan untuk melintasi pelbagai produk dan menapis produk individu yang memenuhi kriteria.
2. Sesetengah () (lapisan pertama dalaman) : melintasi pelbagai keadaan. Bagi setiap produk, kita perlu menyemak sama ada ia memenuhi mana -mana kumpulan keadaan dalam pelbagai syarat. Selagi kumpulan keadaan dipenuhi, produk harus dikekalkan.
3. setiap () (lapisan kedua dalaman) : melangkah ke atas keadaan yang dipilih sekarang (kumpulan keadaan, contohnya [{name: 'saiz', nilai: '10'}, {name: 'color', value: 'yellow'}]). Untuk setiap subkondisi dalam kumpulan keadaan ini (mis. {Nama: 'Saiz', nilai: '10'}), produk mesti memuaskannya.
4. Sesetengah () (lapisan ketiga dalaman) : melangkah ke atas pelbagai pilihan produk semasa. Bagi setiap subkondisi dalam setiap (), kita perlu menyemak sama ada sekurang -kurangnya satu pilihan dalam pilihan produk yang sepadan dengannya.

Kod Penyelesaian Lengkap:

 produk const = [
  {
    Pilihan: [
       {id: 1, nama: 'saiz', nilai: '10'},
       {id: 2, nama: 'warna', nilai: 'kuning'},
    ],
  },
  {
    Pilihan: [
       {id: 1, nama: 'saiz', nilai: '20'},
       {id: 2, nama: 'warna', nilai: 'kuning'},
    ],
  },
  {
    Pilihan: [
      {id: 1, nama: 'saiz', nilai: '10'},
      {id: 2, nama: 'warna', nilai: 'merah jambu'},
    ],
  },
  { 
    Pilihan: [
      {id: 1, nama: 'saiz', nilai: '20'},
      {id: 2, nama: 'warna', nilai: 'merah jambu'}
    ],
  },
  {
    Pilihan: [
      {id: 1, nama: 'saiz', nilai: '39'},
      {id: 2, nama: 'warna', nilai: 'merah jambu'},
    ],
   },
];

syarat const = [
  [
    {name: 'saiz', nilai: '10'},
    {name: 'color', value: 'yellow'},
  ],
  [
    {name: 'saiz', nilai: '10'},
    {Nama: 'Warna', Nilai: 'Pink'},
  ],
];

const filterProducts = products.filter (Product =>
  // 1. Bagi setiap produk, periksa sama ada ia memenuhi mana -mana kumpulan keadaan dalam keadaan array 'syarat' (keadaan =>
    // 2. Untuk keadaan 'keadaan' keadaan semasa, periksa sama ada semua subkondisinya berpuas hati dengan keadaan produk.every (({name, value}) =>
      // 3. Bagi setiap subkondisi dalam 'keadaan' (seperti {name: 'saiz', nilai: '10'}),
      // Periksa sama ada terdapat pilihan yang sepadan dalam pelbagai 'Pilihan' produk produk semasa.options.some (option => option.name === name && option.value === Value)
    )
  )
);

Console.log (FilterProducts);
/*
Hasil output:
[
  {
    Pilihan: [
      {id: 1, nama: 'saiz', nilai: '10'},
      {id: 2, nama: 'warna', nilai: 'kuning'}
    ]
  },
  {
    Pilihan: [
      {id: 1, nama: 'saiz', nilai: '10'},
      {id: 2, nama: 'warna', nilai: 'merah jambu'}
    ]
  }
]
*/

Kod parsing

• Products.Filter (Product => ...) : Ini adalah titik permulaan keseluruhan operasi penapisan. Ia melangkah ke atas setiap objek produk dalam pelbagai produk. Jika fungsi tanpa nama dalaman kembali benar, produk akan dimasukkan ke dalam array hasil FilterProducts.
• Conditions.Some (Condition => ...) : Untuk produk semasa, kami menyemak pelbagai syarat. Kaedah beberapa () akan melelehkan setiap keadaan dalam keadaan (iaitu, kumpulan keadaan). Selagi fungsi panggilan balik dalaman kumpulan keadaan kembali benar, sesetengah () akan segera kembali benar, menunjukkan bahawa produk semasa memenuhi sekurang -kurangnya satu kumpulan keadaan dan dikekalkan oleh penapis.
• Condition.every (({name, value}) => ...) : Apabila beberapa () melintasi kumpulan keadaan, kaedah setiap () memeriksa semua subkondisi dalam kumpulan keadaan ini (dapatkan nama dan nilai dengan membuat keputusan semula). Setiap () mengembalikan benar hanya apabila semua keadaan kanak -kanak dalam kumpulan keadaan berpuas hati. Ini memastikan bahawa produk yang kami tapis mesti memenuhi semua atribut dalam kumpulan keadaan pada masa yang sama.
• product.options.some (option => option.name === name && option.value === Value) : Ini adalah logik yang sepadan dalam. Untuk setiap keadaan kanak -kanak bahawa kaedah setiap () adalah memeriksa (mis. {Name: 'saiz', nilai: '10'}), kami melangkah melalui pelbagai pilihan produk semasa. Kaedah beberapa () memeriksa sama ada terdapat sekurang -kurangnya satu pilihan dalam Product.Options, yang namanya dan nilai tepat sesuai dengan keadaan kanak -kanak. Sekiranya dijumpai, benar dikembalikan, menunjukkan bahawa sub-keadaan berpuas hati.

Struktur bersarang ini dengan tepat melaksanakan logik bahawa "produk memenuhi mana -mana kumpulan keadaan dalam pelbagai keadaan, dan semua subkondisi dalam setiap kumpulan keadaan dipadankan dengan sebarang pilihan produk itu sendiri."

Nota dan amalan terbaik

1. Kejelasan Logik : Walaupun fungsi berbilang lapisan ini bersarang lebih tinggi pesanan berkuasa, ia boleh membuat kod sukar untuk difahami dan diselenggarakan jika disalahgunakan atau logiknya tidak jelas. Pastikan tanggungjawab setiap penapis, beberapa, dan setiap jelas.
2. Pertimbangan Prestasi : Untuk set data yang sangat besar, gelung bersarang berbilang lapisan mungkin mempunyai overhead prestasi. Sekiranya prestasi menjadi kesesakan, strategi pengoptimuman lain boleh dipertimbangkan, seperti data pra -proses, menggunakan peta untuk mencari cepat, atau dalam beberapa kes menggunakan tradisional untuk gelung untuk kawalan yang lebih baik. Walau bagaimanapun, untuk kebanyakan senario aplikasi web, pendekatan ini boleh diterima dan mempunyai kebolehbacaan kod yang lebih baik.
3. Pemprosesan Arus Kosong : Pertimbangkan tingkah laku apabila produk atau keadaan adalah tatasusunan kosong. Apabila memproses tatasusunan kosong, penapis, beberapa, setiap, dan lain -lain. Kaedah biasanya mengembalikan hasil yang diharapkan (contohnya, beberapa pulangan palsu pada tatasusunan kosong, dan semuanya kembali benar), tetapi mereka masih perlu diuji mengikut logik perniagaan tertentu.
4. Kesaksamaan yang ketat : Apabila membandingkan nama dan nilai, gunakan === (ketat kesamaan) dan bukannya == untuk mengelakkan masalah penukaran jenis yang berpotensi.

Meringkaskan

Dengan menggabungkan penapis (), beberapa () dan setiap () kaedah JavaScript, kita dapat menyelesaikan masalah penapisan objek bersarang berdasarkan keadaan kompleks. Corak ini bukan sahaja menyediakan keupayaan pemeriksaan data yang kuat, tetapi juga meningkatkan kebolehbacaan dan deklarasi kod. Memahami tingkah laku fungsi pesanan yang lebih tinggi dan kebolehgunaannya dalam senario yang berbeza adalah langkah utama untuk menjadi pemaju JavaScript yang sangat baik. Apabila berhadapan dengan cabaran pemprosesan data yang sama, mengutamakan penyelesaian ini untuk pengaturcaraan berfungsi.

Atas ialah kandungan terperinci Panduan untuk menapis susunan objek bersarang secara efisien berdasarkan keadaan kompleks dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!