Rumah > Artikel > hujung hadapan web > Ekstrak objek unik daripada tatasusunan objek mengikut sifat dalam JavaScript

Ekstrak objek unik daripada tatasusunan objek mengikut sifat dalam JavaScript

PHPzke hadapan: 2023-08-29 15:33:12968semak imbas

在 JavaScript 中按属性从对象数组中提取唯一对象

Dalam tutorial ini, kita akan belajar mengekstrak objek unik daripada pelbagai objek mengikut sifat. Kadangkala, kita perlu menapis objek daripada pelbagai objek berdasarkan sifat tertentu.

Sebagai contoh, kami mempunyai id sebagai kunci yang mengenal pasti objek. Oleh itu, kita perlu memastikan bahawa tatasusunan hanya mengandungi satu objek dengan satu id. Jika dua atau lebih objek mengandungi nilai kunci utama yang sama, ini boleh membawa kepada masalah dengan pengenalan unik objek.

Di sini kita akan mempelajari cara yang berbeza untuk menapis semua objek unik daripada tatasusunan berdasarkan sifat tertentu.

Gunakan peta dan untuk gelung

Dalam JavaScript, Map boleh menyimpan pasangan nilai kunci yang unik. Tambahan pula, kita boleh mendapatkan sebarang nilai daripada Peta menggunakan kekunci Peta dalam kerumitan masa O(1). Jadi, kami akan mengulangi tatasusunan objek dan menyimpan pasangan nilai kunci dalam Peta. Selain itu, kami akan menyemak sama ada Peta mengandungi objek dengan nilai sifat tertentu kami tidak akan menambah objek pada tatasusunan objek baharu.

Tatabahasa

Anda boleh mengekstrak objek unik daripada tatasusunan menggunakan peta mengikut sintaks berikut.

const employees = [
   { emp_id: 1, emp_name: "Shubham", emp_age: 22 },
   { emp_id: 1, emp_name: "Joe", emp_age: 23 },
];     
var map = new Map();
for (let employee of employees) {
   map.set(employee["emp_id"], employee);
}
var iteratorValues = map.values();
var uniqueEmployess = [...iteratorValues];

Dalam sintaks di atas, kami menggunakan pemetaan untuk menyimpan objek dengan emp_id unik.

Algoritma

Langkah 1 - Buat tatasusunan objek yang mengandungi berbilang objek dengan emp_id pendua.
Langkah 2 - Buat objek Map() menggunakan pembina Peta.
Langkah 3 - Gunakan gelung for-of untuk melelaran melalui setiap objek tatasusunan "pekerja".
Langkah 4 - Untuk peta, gunakan emp_id sebagai kunci dan keseluruhan objek sebagai nilai. Dalam gelung for-of, gunakan kaedah set() objek Map untuk menetapkan objek kepada nilai kunci emp_id.
Langkah 5 - Peta ialah lelaran. Jadi, untuk mendapatkan semua nilai iterator, gunakan kaedah values().
Langkah 6 - Salin semua objek daripada iteratorValues ke array uniqueEmployees menggunakan operator spread.
Langkah 7 - tatasusunan pekerja unik mengandungi semua objek dengan emp_id yang unik, pengguna boleh mengulanginya untuk mendapatkan nilai objek.

Contoh

Dalam contoh di bawah, kami telah melaksanakan algoritma untuk mengekstrak objek unik mengikut atribut menggunakan Map dan for-of loop. Kami telah mencipta pelbagai pekerja yang mengandungi empat objek berbeza dengan nilai emp_id pendua dan kami menggunakan algoritma di atas untuk mengekstrak semua objek unik.

<html>
<body>
   <h3>Extracting the unique objects by the emp_id attribute of an array of objects using the <i> Map and for-loop. </i></h3>
   <div id="output"></div>
   <script>
      let output = document.getElementById("output");
      // creating the array of employees, which contains multiple objects.
      const employees = [
         { emp_id: 1, emp_name: "Shubham", emp_age: 22 },
         { emp_id: 2, emp_name: "Joe", emp_age: 23 },
         { emp_id: 2, emp_name: "Sam", emp_age: 62 },
      ];
      var map = new Map();
      for (let employee of employees) {
         // setting up the employee object for unique emp_id value
         map.set(employee["emp_id"], employee);
      }
      var iteratorValues = map.values();
      var uniqueEmployess = [...iteratorValues];
      for (let uniqueEmp of uniqueEmployess) {
         output.innerHTML += "The new unique object values is </br>";
         output.innerHTML +=  "emp_id :- " + uniqueEmp.emp_id +
            ", emp_name :-  " + uniqueEmp.emp_name +
            ", emp_age :- " + uniqueEmp.emp_age +" </br> ";
      }
   </script>
</body>
</html>

Gunakan kaedah array.filter() dan Peta

Kita boleh menggunakan kaedah penapis() untuk menapis nilai dalam tatasusunan. Ia memerlukan fungsi panggil balik sebagai parameter dan menapis nilai berdasarkan nilai boolean yang dikembalikan oleh fungsi panggil balik.

Sama seperti contoh di atas, kami akan menggunakan peta untuk menyimpan nilai atribut dan menyemak sama ada peta sudah mengandungi nilai. Jika ya, kami meneruskan; sebaliknya, kami menambah nilai pada tatasusunan peta dan penapis.

Tatabahasa

Pengguna boleh menapis semua objek dengan nilai atribut unik dengan mengikut sintaks berikut.

var map = new Map();
let uniqueObjects = websites.filter((web) => {
   if (map.get(web.website_name)) {
      return false;
   }
   map.set(web.website_name, web);
   return true;
});

Algoritma

Langkah 1 - Buat peta menggunakan objek Map().
Langkah 2 - Gunakan kaedah penapis() untuk menapis nilai daripada tatasusunan.
Langkah 3 - Lulus fungsi panggil balik sebagai hujah kepada kaedah penapis yang mengambil rangkaian sebagai parameter. Rangkaian ialah objek dalam tatasusunan rujukan.
Langkah 4 - Semak sama ada peta sudah mengandungi nama_tapak web sebagai kunci dan teruskan dengan mengembalikan palsu daripada fungsi panggil balik.
Langkah 5 - Jika peta tidak mengandungi nama_tapak web, tambahkan nama_tapak web dan objek sebagai pasangan nilai kunci pada peta dan kembalikan benar untuk menapisnya dalam tatasusunan Objek unik.

Contoh

Dalam contoh ini, kami menggunakan kaedah penapis() untuk menapis semua objek tapak web mengikut nama_tapak web daripada tatasusunan. Dalam output, pengguna boleh melihat bahawa kaedah penapis() hanya mengembalikan dua objek yang mengandungi nama_laman web yang unik.

<html>
<body>
   <h3>Extracting the unique objects by the website_name attribute of an array of objects using the <i> Map and filter() method. </i></h3>
   <div id="output"></div>
   <script>
      let output = document.getElementById("output");
         //creating the array of websites object. A single website can have multiple domains
      const websites = [
         { website_name: "TutorialsPoint", domain: "tutorialspoint.com" },
         { website_name: "TutorialsPoint", domain: "qries.com" },
         { website_name: "Tutorix", domain: "tutorix.com" },
      ];
      var map = new Map();
      let uniqueObjects = websites.filter((web) => {
         if (map.get(web.website_name)) {
            return false;
         }
         // If website_name is not found in the map, return true.
         map.set(web.website_name, web);
         return true;
      });
      // iterating through the unique objects and printing its value
      for (let web of uniqueObjects) {
         output.innerHTML += "The new unique object values is </br>";
         output.innerHTML += "website_name :- " + web.website_name +
            ", domain :-  " +  web.domain +  " </br> ";
     }
   </script>
</body>
</html>

Tutorial ini mengajar kita dua kaedah untuk mengekstrak objek unik mengikut nilai atribut tertentu. Kami menggunakan peta dalam kedua-dua kaedah tetapi menggunakan kaedah lelaran yang berbeza untuk mengulangi tatasusunan objek. Pengguna boleh mengulangi tatasusunan menggunakan gelung untuk-bagi atau kaedah penapis().

Atas ialah kandungan terperinci Ekstrak objek unik daripada tatasusunan objek mengikut sifat dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript Array 运算符 for 构造函数 Filter 回调函数循环 map 对象算法

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Backbone.js menguasakan aplikasi ToDo satu halamanArtikel seterusnya：Backbone.js menguasakan aplikasi ToDo satu halaman

Artikel berkaitan

Lihat lagi