Javascript Remove Duplicates From Array By Key

Javascript Remove Duplicates From Array By Key

5 min read Jun 20, 2024
Javascript Remove Duplicates From Array By Key

Cara Menghapus Duplikat dari Array berdasarkan Kunci di JavaScript

Dalam pemrograman JavaScript, kita seringkali berurusan dengan array yang berisi objek. Kadang-kadang, array tersebut mungkin memiliki objek duplikat berdasarkan kunci tertentu. Dalam situasi seperti ini, kita perlu menghapus duplikat tersebut untuk mendapatkan data yang unik.

Berikut adalah beberapa metode untuk menghapus duplikat dari array berdasarkan kunci di JavaScript:

1. Menggunakan Set

Set adalah objek JavaScript yang menyimpan nilai unik. Kita dapat memanfaatkannya untuk menghapus duplikat dari array berdasarkan kunci.

Langkah-langkah:

  1. Buat set baru.
  2. Iterasi melalui array dan tambahkan nilai kunci objek ke set.
  3. Buat array baru dengan nilai unik dari set.

Contoh:

const data = [
  { id: 1, name: "John" },
  { id: 2, name: "Jane" },
  { id: 1, name: "John" },
  { id: 3, name: "Peter" },
];

const uniqueData = [...new Set(data.map((item) => item.id))].map((id) =>
  data.find((item) => item.id === id)
);

console.log(uniqueData);
// Output: [{ id: 1, name: "John" }, { id: 2, name: "Jane" }, { id: 3, name: "Peter" }]

Penjelasan:

  • new Set(data.map((item) => item.id)) akan membuat set baru yang berisi nilai id yang unik.
  • [...new Set(...)] akan mengubah set menjadi array.
  • map((id) => data.find((item) => item.id === id)) akan mencari objek dengan id yang sesuai dari array asli dan menambahkannya ke array baru.

2. Menggunakan reduce

Metode reduce dapat digunakan untuk menghapus duplikat berdasarkan kunci.

Langkah-langkah:

  1. Buat objek kosong untuk menyimpan nilai unik.
  2. Iterasi melalui array dan cek apakah kunci sudah ada dalam objek.
  3. Jika belum ada, tambahkan objek ke objek.

Contoh:

const data = [
  { id: 1, name: "John" },
  { id: 2, name: "Jane" },
  { id: 1, name: "John" },
  { id: 3, name: "Peter" },
];

const uniqueData = data.reduce((acc, current) => {
  if (!acc[current.id]) {
    acc[current.id] = current;
  }
  return acc;
}, {});

console.log(Object.values(uniqueData));
// Output: [{ id: 1, name: "John" }, { id: 2, name: "Jane" }, { id: 3, name: "Peter" }]

Penjelasan:

  • reduce((acc, current) => {...}, {}) akan iterasi melalui array dan melakukan operasi pada setiap elemen.
  • if (!acc[current.id]) akan mengecek apakah kunci sudah ada dalam objek acc.
  • Jika tidak ada, objek akan ditambahkan ke objek acc.
  • Object.values(uniqueData) akan mengembalikan array dari nilai objek uniqueData.

3. Menggunakan filter dan findIndex

Metode filter dan findIndex dapat digunakan untuk menghapus duplikat berdasarkan kunci.

Langkah-langkah:

  1. Gunakan filter untuk iterasi melalui array dan mengembalikan objek yang unik.
  2. Gunakan findIndex untuk mengecek apakah objek sudah ada dalam array baru.
  3. Jika belum ada, tambahkan objek ke array baru.

Contoh:

const data = [
  { id: 1, name: "John" },
  { id: 2, name: "Jane" },
  { id: 1, name: "John" },
  { id: 3, name: "Peter" },
];

const uniqueData = data.filter((item, index, self) => {
  return self.findIndex((t) => t.id === item.id) === index;
});

console.log(uniqueData);
// Output: [{ id: 1, name: "John" }, { id: 2, name: "Jane" }, { id: 3, name: "Peter" }]

Penjelasan:

  • filter((item, index, self) => {...}) akan iterasi melalui array dan mengembalikan elemen yang sesuai dengan kondisi.
  • self.findIndex((t) => t.id === item.id) akan mengecek apakah objek dengan id yang sama sudah ada dalam array.
  • === index akan memastikan bahwa objek hanya ditambahkan ke array baru jika merupakan objek pertama dengan id tersebut.

Kesimpulan

Ada beberapa metode untuk menghapus duplikat dari array berdasarkan kunci di JavaScript. Metode yang terbaik untuk digunakan tergantung pada kebutuhan dan preferensi Anda. Pastikan untuk memilih metode yang paling efisien dan mudah dipahami untuk proyek Anda.