Rumah >hujung hadapan web >tutorial js >Bagaimanakah anda boleh mencari dan mewakili perbezaan yang mendalam antara dua objek JavaScript bersarang dalam dengan berkesan?
Masalah: Kira perbezaan mendalam antara dua objek JavaScript bersarang dalam, menggabungkan teknik perwakilan dengan jelas mengenalpasti perubahan.
Butiran: Memandangkan dua objek, oldObj dan newObj, algoritma diff tersuai diperlukan untuk menentukan perbezaan antara mereka, termasuk perubahan dalam nilai, struktur dan susunan tatasusunan. Output hendaklah diwakili dengan cara yang jelas dan boleh disiri JSON.
Penyelesaian:
Kelas tersuai, deepDiffMapper, direka bentuk untuk menangani masalah ini:
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 ... } }();
Penggunaan:
Untuk menggunakan ini kelas, hanya panggil kaedah peta dengan dua objek sebagai argumen:
var result = deepDiffMapper.map(oldObj, newObj);
Output:
Kaedah peta mengembalikan objek yang mewakili perbezaan antara dua input objek. Kekunci objek ini sepadan dengan sifat dalam newObj. Setiap nilai itu sendiri adalah objek dengan sifat berikut:
Contoh:
Memandangkan objek input berikut:
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') };
Kaedah peta akan mengembalikan objek berikut yang mewakili perbezaan:
{ 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' } } } } } }
Perwakilan ini jelas menunjukkan perubahan yang dibuat pada objek, menyerlahkan yang dibuat, dikemas kini dan sifat dipadamkan.
Atas ialah kandungan terperinci Bagaimanakah anda boleh mencari dan mewakili perbezaan yang mendalam antara dua objek JavaScript bersarang dalam dengan berkesan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!