Cara Membandingkan (berbeza) dua Objek

Perbandingan Objek dalam JavaScript

Perbandingan objek dalam JavaScript sangat rumit. Walaupun membandingkan nilai primitif seperti nombor dan rentetan adalah mudah, membandingkan objek boleh membawa kepada hasil yang tidak dijangka. Mari kita terokai pendekatan berbeza untuk perbandingan objek dan bina penyelesaian yang mantap untuk mengesan perubahan antara objek.

Perangkap Perbandingan Langsung

Apabila pembangun mula-mula menemui perbandingan objek dalam JavaScript, mereka sering mencuba sesuatu seperti ini:

const user1 = { name: "John", age: 30 };
const user2 = { name: "John", age: 30 };

console.log(user1 === user2); // false

Anehnya, ini mengembalikan palsu walaupun kedua-dua objek mempunyai kandungan yang sama. Ini berlaku kerana JavaScript membandingkan rujukan objek, bukan nilainya. Kedua-dua objek menghala ke lokasi yang berbeza dalam ingatan.

Pendekatan Perbandingan Mudah

1. JSON.stringify

Cara cepat untuk membandingkan objek menggunakan JSON.stringify:

const areEqual = (obj1, obj2) => 
  JSON.stringify(obj1) === JSON.stringify(obj2);

console.log(areEqual(user1, user2)); // true

Walaupun ini berfungsi untuk kes mudah, ia mempunyai had:

• Tidak mengendalikan fungsi
• Tempahan hartanah penting
• Tidak boleh mengendalikan rujukan bulat
• Tidak memberikan maklumat tentang perkara yang berbeza

2. Membina Perbezaan Objek yang Lebih Baik

Mari kita cipta penyelesaian yang lebih canggih yang bukan sahaja mengesan perbezaan tetapi juga memberitahu kita perkara yang berubah:

function getObjectDiff(original, current) {
  const changes = {};

  // Check current object's properties
  for (const [key, value] of Object.entries(current)) {
    if (!(key in original)) {
      changes[key] = {
        oldValue: undefined,
        newValue: value
      };
      continue;
    }

    const originalValue = original[key];
    const currentValue = value;

    // Handle different types of comparisons
    if (
      originalValue !== currentValue &&
      String(originalValue) !== String(currentValue) &&
      JSON.stringify(originalValue) !== JSON.stringify(currentValue)
    ) {
      changes[key] = {
        oldValue: originalValue,
        newValue: currentValue
      };
    }
  }

  // Check for removed properties
  for (const key of Object.keys(original)) {
    if (!(key in current)) {
      changes[key] = {
        oldValue: original[key],
        newValue: undefined
      };
    }
  }

  return Object.keys(changes).length === 0 ? null : changes;
}

Pelaksanaan ini:

• Mengembalikan null apabila objek adalah sama
• Mengendalikan paksaan jenis (cth., "30" lwn 30)
• Mengesan sifat yang ditambah dan dialih keluar
• Menyediakan maklumat perubahan terperinci

Aplikasi Dunia Sebenar

Jenis perbandingan objek ini amat berguna untuk:

1. Penjejakan Perubahan Borang: Kesan medan yang diubah dalam borang

const originalForm = { name: "John", email: "john@example.com" };
const currentForm = { name: "John", email: "john.doe@example.com" };
console.log(getObjectDiff(originalForm, currentForm));
// Output: { email: { oldValue: "john@example.com", newValue: "john.doe@example.com" } }

1. Pengurusan Negeri: Jejak bahagian mana keadaan permohonan anda berubah
2. Kemas Kini API: Tentukan medan yang hendak dihantar dalam permintaan PATCH
3. Pengelogan Audit: Rekod perubahan khusus yang dibuat pada data

Kes Tepi (di mana anda mungkin perlu pergi lebih jauh)

1. Objek Bersarang: Perbandingan dalam vs perbandingan cetek
2. Susun atur: Kepekaan susunan dan perbandingan rujukan
3. Paksa Jenis: Perbandingan Rentetan vs Nombor
4. Nilai Khas: tidak ditentukan, batal, NaN
5. Prestasi: Perbandingan yang mendalam boleh menjadi mahal untuk objek besar

PS: Inilah intipati Github untuk fungsi mudah untuk membandingkan dan mendapatkan perbezaan antara dua objek:

Atas ialah kandungan terperinci Cara Membandingkan (berbeza) dua Objek. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!