Comment pouvez-vous trouver et représenter efficacement les différences profondes entre deux objets JavaScript profondément imbriqués ?

Trouver les différences entre deux objets JavaScript profondément imbriqués

Problème : Calculer les différences profondes entre deux objets JavaScript profondément imbriqués, en incorporant des techniques de représentation pour clairement identifier les changements.

Détails : Étant donné deux objets, oldObj et newObj, un algorithme de comparaison personnalisé est nécessaire pour déterminer les différences entre eux, y compris les changements de valeurs, de structure et d'ordre du tableau. La sortie doit être représentée de manière claire et sérialisable en JSON.

Solution :

Une classe personnalisée, deepDiffMapper, est conçue pour résoudre ce problème :

var deepDiffMapper = function () {
  return {

    // Constants representing change types
    VALUE_CREATED: 'created',
    VALUE_UPDATED: 'updated',
    VALUE_DELETED: 'deleted',
    VALUE_UNCHANGED: 'unchanged',

    map: function(obj1, obj2) {
      // Algorithm for comparing objects

      return diff;
    },
    
    compareValues: function (value1, value2) {
      // Logic for determining value changes
      
      return result;
    },

    // Helper functions to identify object types
    ...
  }
}();

Utilisation :

Pour utiliser cette classe, appelez simplement la méthode map avec les deux objets comme arguments :

var result = deepDiffMapper.map(oldObj, newObj);

Sortie :

La méthode map renvoie un objet représentant les différences entre les deux objets d'entrée. Les clés de cet objet correspondent aux propriétés de newObj. Chaque valeur est elle-même un objet avec les propriétés suivantes :

• type : le type de changement (créé, mis à jour, supprimé ou inchangé)
• data : la valeur mise à jour ou nouvelle ( en cas de création ou de mise à jour)

Exemple :

Étant donné ce qui suit objets d'entrée :

var oldObj = {
  a: 'i am unchanged',
  b: 'i am deleted',
  e: {
    a: 1,
    b: false,
    c: null
  },
  f: [1, {
    a: 'same',
    b: [{
      a: 'same'
    }, {
      d: 'delete'
    }]
  }],
  g: new Date('2017.11.25')
};

var newObj = {
  a: 'i am unchanged',
  c: 'i am created',
  e: {
    a: '1',
    b: '',
    d: 'created'
  },
  f: [{
    a: 'same',
    b: [{
      a: 'same'
    }, {
      c: 'create'
    }]
  }, 1],
  g: new Date('2017.11.25')
};

La méthode map renverrait l'objet suivant représentant les différences :

{
  b: {
    type: 'deleted',
    data: undefined
  },
  c: {
    type: 'created',
    data: 'i am created'
  },
  e: {
    a: {
      type: 'updated',
      data: '1'
    },
    b: {
      type: 'updated',
      data: ''
    },
    d: {
      type: 'created',
      data: 'created'
    }
  },
  f: {
    1: {
      type: 'deleted',
      data: undefined
    },
    2: {
      b: {
        1: {
          d: {
            type: 'deleted',
            data: undefined
          }
        },
        2: {
          c: {
            type: 'created',
            data: 'create'
          }
        }
      }
    }
  }
}

Cette représentation montre clairement les modifications apportées aux objets, en mettant en évidence les objets créés, mis à jour et propriétés supprimées.

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!