深くネストされた 2 つの JavaScript オブジェクト間の大きな違いを効果的に見つけて表現するにはどうすればよいでしょうか?

深くネストされた 2 つのオブジェクト間の違いを見つける

問題: 深くネストされた 2 つの JavaScript オブジェクト間の大きな違いを計算し、表現手法を組み込んで明確にします。変更を識別します。

詳細: 2 つのオブジェクト、oldObj と newObj が与えられた場合、値、構造、配列順序の変更など、それらの間の違いを判断するにはカスタム diff アルゴリズムが必要です。出力は、明確で JSON シリアル化可能な方法で表現される必要があります。

解決策:

カスタム クラス deepDiffMapper は、この問題に対処するように設計されています。

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
    ...
  }
}();

使用法:

このクラスを使用するには、引数として 2 つのオブジェクトを指定して map メソッドを呼び出すだけです:

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

出力:

map メソッドは、2 つの入力オブジェクト間の差異を表すオブジェクトを返します。このオブジェクトのキーは、newObj のプロパティに対応します。各値自体は、次のプロパティを持つオブジェクトです。

• type: 変更のタイプ (作成、更新、削除、または未変更)
• data: 更新された値または新しい値 (作成または更新の場合)

例:

次の入力オブジェクトがあるとします:

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')
};

map メソッドは次のようになります。違いを表す次のオブジェクトを返します:

{
  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'
          }
        }
      }
    }
  }
}

この表現は、オブジェクトに加えられた変更を明確に示し、作成、更新、および削除されたプロパティを強調表示します。

以上が深くネストされた 2 つの JavaScript オブジェクト間の大きな違いを効果的に見つけて表現するにはどうすればよいでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。