So sánh hai đối tượng lồng nhau javascript

So sánh 2 đối tượng lồng nhau trong JavaScript [IMP]. Cuộc phỏng vấn viết mã của Apple

Đặt một phiên

function deepComparison (first, second) {

 ...

}

2

const obj_1 = { score: 12 }
const obj_2 = obj_1
const obj_3 = { score: 12 }

obj_1 === obj_2; // true, same reference
obj_1 === obj_3 // false, different reference but same keys and values

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Hãy so sánh hai đối tượng

Chúng ta cần kiểm tra nhiều thứ để so sánh hai đối tượng. Vì vậy, chúng tôi sẽ chia quá trình so sánh thành nhiều bước

Bước 1

Trước tiên hãy tạo một hàm (

function deepComparison (first, second) {

 ...

}

function deepComparison (first, second) {

 ...

}

function deepComparison (first, second) {

 ...

}

function deepComparison (first, second) {

 ...

}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Nếu chúng ta chuyển hai đối tượng làm đối số của hàm này, thì hàm này sẽ trả về giá trị boolean sau khi so sánh chúng

Bước 2

Công việc thực sự của chúng ta bắt đầu từ bước này. Trong bước này, chúng tôi sẽ kiểm tra xem loại và giá trị của hai đối số có giống nhau không. Nếu chúng giống nhau, chúng tôi sẽ trả lại

function deepComparison (first, second) {

 ...

}

const k1 = { fruit: '🥝' };
const k2 = { fruit: '🥝' };Object.entries(k1).toString() === Object.entries(k2).toString();

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bước 3

Trong bước này, chúng tôi sẽ kiểm tra xem có bất kỳ đối số nào là

function deepComparison (first, second) {

 ...

}

function deepComparison (first, second) {

 ...

}

function deepComparison (first, second) {

 ...

}

const k1 = { fruit: '🥝' };
const k2 = { fruit: '🥝' };Object.entries(k1).toString() === Object.entries(k2).toString();

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bước 4

Bây giờ, chúng tôi sẽ đảm bảo rằng cả hai đối số đều là đối tượng. Nếu bất kỳ đối số nào không phải là đối tượng, chúng tôi sẽ trả về

function deepComparison (first, second) {

 ...

}

const k1 = { fruit: '🥝' };
const k2 = { fruit: '🥝' };Object.entries(k1).toString() === Object.entries(k2).toString();

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bước 5

Ở bước cuối cùng, chúng tôi đã đảm bảo rằng cả hai đối số đều là đối tượng. Trong bước này, chúng tôi sẽ kiểm tra xem cả hai đối tượng có cùng số thuộc tính hay không. Nếu chúng không có cùng số thuộc tính, chúng tôi sẽ trả lại

function deepComparison (first, second) {

 ...

}

const equals = (a, b) => {  if (a === b) return true;  if (a instanceof Date && b instanceof Date)
    return a.getTime() === b.getTime();  if (!a || !b || (typeof a !== 'object' && typeof b !== 'object'))
    return a === b;  if (a.prototype !== b.prototype) return false;  const keys = Object.keys(a);  if (keys.length !== Object.keys(b).length) return false;return keys.every(k => equals(a[k], b[k]));};

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Chúng ta có thể sử dụng

const k1 = { fruit: '🥝' };
const k2 = { fruit: '🥝' };Object.entries(k1).toString() === Object.entries(k2).toString();

22 thay vì

const k1 = { fruit: '🥝' };
const k2 = { fruit: '🥝' };Object.entries(k1).toString() === Object.entries(k2).toString();

23 không?

Không. Bởi vì

const k1 = { fruit: '🥝' };
const k2 = { fruit: '🥝' };Object.entries(k1).toString() === Object.entries(k2).toString();

22 không thể trả về tên thuộc tính Nonnumerable
nhưng

const k1 = { fruit: '🥝' };
const k2 = { fruit: '🥝' };Object.entries(k1).toString() === Object.entries(k2).toString();

23 có thể.

Bước 6

Ở bước cuối cùng, chúng tôi đảm bảo rằng cả hai đối tượng đều có cùng số lượng thuộc tính. Bây giờ, chúng ta cần đảm bảo rằng tên thuộc tính của cả hai đối tượng đều giống nhau. Nếu chúng không giống nhau, chúng tôi sẽ trả lại

function deepComparison (first, second) {

 ...

}

const equals = (a, b) => {  if (a === b) return true;  if (a instanceof Date && b instanceof Date)
    return a.getTime() === b.getTime();  if (!a || !b || (typeof a !== 'object' && typeof b !== 'object'))
    return a === b;  if (a.prototype !== b.prototype) return false;  const keys = Object.keys(a);  if (keys.length !== Object.keys(b).length) return false;return keys.every(k => equals(a[k], b[k]));};

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Chúng ta có thể sử dụng

const k1 = { fruit: '🥝' };
const k2 = { fruit: '🥝' };Object.entries(k1).toString() === Object.entries(k2).toString();

27 thay vì

const k1 = { fruit: '🥝' };
const k2 = { fruit: '🥝' };Object.entries(k1).toString() === Object.entries(k2).toString();

28 không?

Không. Bởi vì

const k1 = { fruit: '🥝' };
const k2 = { fruit: '🥝' };Object.entries(k1).toString() === Object.entries(k2).toString();

27 không thể kiểm tra tên của thuộc tính Không thể đếm được nhưng

const k1 = { fruit: '🥝' };
const k2 = { fruit: '🥝' };Object.entries(k1).toString() === Object.entries(k2).toString();

27 có thể. Ngoài ra,

const k1 = { fruit: '🥝' };
const k2 = { fruit: '🥝' };Object.entries(k1).toString() === Object.entries(k2).toString();

28 nhằm mục đích thay thế cho

const k1 = { fruit: '🥝' };
const k2 = { fruit: '🥝' };Object.entries(k1).toString() === Object.entries(k2).toString();

27, vì vậy chúng tôi đang sử dụng

const k1 = { fruit: '🥝' };
const k2 = { fruit: '🥝' };Object.entries(k1).toString() === Object.entries(k2).toString();

28 tại đây

Bước 7

Ở bước cuối cùng, chúng tôi đảm bảo rằng tên thuộc tính của cả hai đối tượng đều giống nhau. Bây giờ, chúng ta sẽ kiểm tra xem giá trị thuộc tính của cả hai đối tượng có giống nhau hay không

Bước này hơi phức tạp một chút vì

• Các giá trị thuộc tính không chỉ có thể là chuỗi, số hoặc boolean mà còn là các đối tượng lồng nhau
• Chỉ cần kiểm tra với toán tử đẳng thức nghiêm ngặt (===) là đủ nếu các giá trị là chuỗi hoặc số hoặc boolean nhưng sẽ không đủ đối với một đối tượng vì đối tượng lồng nhau sẽ có các thuộc tính riêng của nó
• Giả sử rằng đối tượng lồng nhau có một đối tượng khác bên trong nó như một thuộc tính. Chúng ta sẽ làm gì?

Giải pháp

• Ở bước 1, chúng ta đã tạo hàm

  function deepComparison (first, second) {
  
   ...
  
  }
  

  3 này và hàm này không chỉ kiểm tra toán tử đẳng thức nghiêm ngặt (===), mà còn kiểm tra null hay không, có đối tượng hay không, thuộc tính của các đối tượng có giống nhau hay không. Vì vậy, trên thực tế, chúng ta cần một hàm như thế này

  function deepComparison (first, second) {
  
   ...
  
  }
  

  3 để kiểm tra bất kỳ thuộc tính nào của đối tượng lồng nhau
• May mắn thay, chúng ta không cần tạo bất kỳ hàm mới nào vì có một thuật ngữ gọi là hàm đệ quy. Hàm đệ quy là hàm gọi chính nó trong quá trình thực thi. Vì vậy, trên thực tế, chúng ta có thể sử dụng hàm

  const k1 = { fruit: '🥝' };
  const k2 = { fruit: '🥝' };Object.entries(k1).toString() === Object.entries(k2).toString();

  66 này như một hàm đệ quy

Bây giờ, hãy sử dụng hàm

const k1 = { fruit: '🥝' };
const k2 = { fruit: '🥝' };Object.entries(k1).toString() === Object.entries(k2).toString();

function deepComparison (first, second) {

 ...

}

var obj1 = { prop1: 1, prop2: "foo", prop3: [{ number: 1, prop4: "foo", prop5: "a" }, { number: 2, prop4: "foo", prop5: "b" }] }var obj2 = { prop1: 3, prop2: "foo", prop3: [{ number: 1, prop4: "bar", prop5: "b" }, { number: 2, prop4: "foo", prop5: "a" }, { number: 3, prop4: "foo", prop5: "e" }], prop6: "new" }const isObject = v => v !== null && typeof v == "object";function getDifference(x, y = x) {
    if (x === undefined) x = y;    if (Array.isArray(x) && Array.isArray(y)) {
        const temp = [];
        for (let i = 0; i < (x.length + y.length) / 2; i++)
            temp.push(getDifference(x[i], y[i]))        return temp;
    }    if (isObject(x) && isObject(y)) {
        const temp = {};
        for (const key of new Set([...Object.keys(x), ...Object.keys(y)]))
            temp[key] = getDifference(x[key], y[key])        return temp;
    }
    return x === y;
}console.log(getDifference(obj1, obj2));

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Ghi chú

Vì

const k1 = { fruit: '🥝' };
const k2 = { fruit: '🥝' };Object.entries(k1).toString() === Object.entries(k2).toString();

66 nằm trong vòng lặp. Vì vậy, nó sẽ tiếp tục tự thực thi cho đến khi kiểm tra xong tất cả các đối tượng lồng nhau

Bước 8

Nếu chúng ta đang ở trong

const k1 = { fruit: '🥝' };
const k2 = { fruit: '🥝' };Object.entries(k1).toString() === Object.entries(k2).toString();

function deepComparison (first, second) {

 ...

}

const isObject = v => v && typeof v === 'object';

function getDifference(a, b) {
    return Object.assign(...Array.from(
        new Set([...Object.keys(a), ...Object.keys(b)]),
        k => ({ [k]: isObject(a[k]) && isObject(b[k])
            ? getDifference(a[k], b[k])
            : a[k] === b[k]
        })
    ));
}

var obj1 = { prop1: 1, prop2: "foo", prop3: { prop4: 2, prop5: "bar" } };var obj2 = { prop1: 3, prop2: "foo", prop3: { prop4: 2, prop5: "foobar" }, prop6: "new" };

console.log(getDifference(obj1, obj2));

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Mã đầy đủ

const isObject = v => v && typeof v === 'object';

function getDifference(a, b) {
    return Object.assign(...Array.from(
        new Set([...Object.keys(a), ...Object.keys(b)]),
        k => ({ [k]: isObject(a[k]) && isObject(b[k])
            ? getDifference(a[k], b[k])
            : a[k] === b[k]
        })
    ));
}

var obj1 = { prop1: 1, prop2: "foo", prop3: { prop4: 2, prop5: "bar" } };var obj2 = { prop1: 3, prop2: "foo", prop3: { prop4: 2, prop5: "foobar" }, prop6: "new" };

console.log(getDifference(obj1, obj2));

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

hãy kiểm tra

function deepComparison (first, second) {

 ...

}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

function deepComparison (first, second) {

 ...

}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Đó là nó. 😃 Cảm ơn đã đọc. 🎉 Nếu bạn phát hiện bất kỳ lỗi chính tả hoặc lỗi nào hoặc nếu bạn muốn bổ sung điều gì đó, vui lòng ghi vào phần bình luận

Làm cách nào để so sánh hai đối tượng lồng nhau trong JavaScript?

Làm cách nào để so sánh giá trị của 2 đối tượng trong JavaScript?

Làm cách nào để so sánh hai đối tượng trong JavaScript lodash?

Làm cách nào để so sánh hai danh sách đối tượng trong JavaScript?