Bagaimana untuk Melaksanakan Perbezaan Dalam Generik untuk Objek dan Tatasusunan dalam JavaScript?

Beza Dalam Generik Antara Dua Objek

Beza mendalam dua objek melibatkan mengenal pasti perubahan antara objek tersebut, termasuk penambahan, kemas kini dan pemadaman. Ini boleh menjadi rumit, terutamanya untuk objek dan tatasusunan bersarang.

Perpustakaan Sedia Ada atau Kod untuk Generik Deep Diff

Satu pendekatan ialah melaksanakan kaedah generik deepDiffBetweenObjects yang mengembalikan objek yang menunjukkan perubahan sebagai:

{add:{...},upd:{...},del:{...}}

Walau bagaimanapun, perwakilan yang lebih berbutir ialah wajar untuk menangkap kemas kini dalam struktur objek.

Perwakilan Dipertingkatkan Menggunakan Struktur Objek Dikemaskini

Perwakilan yang dipertingkat menggunakan struktur objek yang sama seperti objek yang dikemas kini (newObj) tetapi berubah nilai harta ke dalam objek:

{type: '<update|create|delete>', data: <propertyValue>}

Sebagai contoh, jika newObj.prop1 = 'nilai baru' dan oldObj.prop1 = 'nilai lama', hasilnya ialah:

returnObj.prop1 = {type: 'update', data: 'new value'}

Mengendalikan Tatasusunan

Susunatur memperkenalkan kerumitan tambahan , kerana menentukan kesetaraan adalah tidak mudah. Contohnya, tatasusunan:

[1,[{c: 1},2,3],{a:'hey'}]

dan

[{a:'hey'},1,[3,{c: 1},2]]

hendaklah dianggap sama. Kesaksamaan nilai dalam boleh menjadi rumit untuk diperiksa dan mewakili perubahan tatasusunan secara berkesan juga mencabar.

Sampel Pelaksanaan

Berikut ialah pelaksanaan kelas yang boleh melakukan perbezaan dalam generik :

var deepDiffMapper = function () {
  return {
    map: function(obj1, obj2) {
      if (this.isFunction(obj1) || this.isFunction(obj2)) {
        throw 'Invalid argument. Function given, object expected.';
      }
      if (this.isValue(obj1) || this.isValue(obj2)) {
        return {
          type: this.compareValues(obj1, obj2),
          data: obj1 === undefined ? obj2 : obj1
        };
      }

      var diff = {};
      for (var key in obj1) {
        if (this.isFunction(obj1[key])) {
          continue;
        }

        var value2 = undefined;
        if (obj2[key] !== undefined) {
          value2 = obj2[key];
        }

        diff[key] = this.map(obj1[key], value2);
      }
      for (var key in obj2) {
        if (this.isFunction(obj2[key]) || diff[key] !== undefined) {
          continue;
        }

        diff[key] = this.map(undefined, obj2[key]);
      }

      return diff;

    },
    compareValues: function (value1, value2) {
      if (value1 === value2) {
        return this.VALUE_UNCHANGED;
      }
      if (this.isDate(value1) && this.isDate(value2) && value1.getTime() === value2.getTime()) {
        return this.VALUE_UNCHANGED;
      }
      if (value1 === undefined) {
        return this.VALUE_CREATED;
      }
      if (value2 === undefined) {
        return this.VALUE_DELETED;
      }
      return this.VALUE_UPDATED;
    },
    ...
  }
}();

Contoh penggunaan:

var result = deepDiffMapper.map({
  a: 'i am unchanged',
  b: 'i am deleted',
  ...
}, {
  a: 'i am unchanged',
  c: 'i am created',
  ...
});
console.log(result);

Atas ialah kandungan terperinci Bagaimana untuk Melaksanakan Perbezaan Dalam Generik untuk Objek dan Tatasusunan dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!