Comment effectuer une comparaison et une transformation approfondies d'objets en JavaScript ?

Comparaison et transformation avancées d'objets profonds

Problème :

Vous devez comparer deux objets profondément imbriqués (oldObj et newObj ) et identifiez les différences entre eux, y compris les modifications, les ajouts et les suppressions. Le défi réside dans la représentation de ces différences de manière significative et sérialisable en JSON, en particulier lorsque des tableaux sont impliqués.

Solution :

Création d'une différence profonde générique Algorithme :

Envisagez de développer une méthode génériqueDeepDiffBetweenObjects qui renvoie un objet de la forme {add : {...}, upd : {...}, del : {...}}. Cela fournirait une représentation de base des changements.

Représentation des données améliorée :

Pour une approche plus complète, envisagez d'utiliser la même structure d'objet que newObj mais en convertissant toutes les propriétés valeurs en objets de la forme {type : , data : }. Par exemple, si newObj.prop1 = 'new value' et oldObj.prop1 = 'old value', le résultat serait returnObj.prop1 = {type : 'update', data : 'new value'}.

Comparaison de gestion des tableaux :

Les tableaux présentent un défi unique en raison de la nécessité de prendre en compte l'ordre des éléments pour assurer l'égalité. Une solution sophistiquée traiterait les tableaux de types basés sur des valeurs comme les chaînes, les entiers et les booléens comme égaux quel que soit l'ordre. Cependant, les tableaux de types de référence comme les objets et les tableaux nécessitent une logique de comparaison plus complexe.

Exemple d'implémentation :

Voici un extrait d'une classe qui implémente l'algorithme proposé et peut être personnalisé pour répondre à différentes exigences de comparaison de valeurs :

var deepDiffMapper = {
  VALUE_CREATED: 'created',
  VALUE_UPDATED: 'updated',
  VALUE_DELETED: 'deleted',
  VALUE_UNCHANGED: 'unchanged',
  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
      };
    }
    ...
  },
  ...
};

Exemple d'utilisation :

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

Conclusion :

Cette approche fournit un moyen robuste et personnalisable d'effectuer une comparaison approfondie d'objets et de représenter les différences de manière claire et sérialisable en JSON. Il peut être étendu pour gérer des exigences de comparaison de valeurs plus complexes ou des formats de représentation de données alternatifs selon les besoins.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!