Làm thế nào để so sánh hai object trong JavaScript?

So sánh hai đối tượng trong JavaScript không giống như so sánh các kiểu dữ liệu nguyên thủy (primitive types) như số hoặc chuỗi. Đối với các đối tượng, việc so sánh chúng dựa trên tham chiếu (reference) chứ không phải giá trị. Điều này có nghĩa là ngay cả khi hai đối tượng có cùng cấu trúc và giá trị, chúng vẫn không bằng nhau nếu chúng không tham chiếu đến cùng một vị trí trong bộ nhớ

So sánh bằng tham chiếu

Khi sử dụng toán tử === để so sánh hai đối tượng, JavaScript sẽ kiểm tra xem cả hai có trỏ đến cùng một đối tượng trong bộ nhớ hay không. Nếu hai biến tham chiếu đến cùng một đối tượng, kết quả sẽ là true; nếu không, kết quả sẽ là false

So sánh bằng giá trị

Để so sánh hai đối tượng dựa trên giá trị của chúng, bạn cần sử dụng các phương pháp khác. Dưới đây là một số cách phổ biến:

1. Sử dụng JSON.stringify(): Phương pháp này chuyển đổi đối tượng thành chuỗi JSON và sau đó so sánh hai chuỗi này. Tuy nhiên, phương pháp này có hạn chế là thứ tự của các thuộc tính trong đối tượng phải giống nhau và không xử lý được các đối tượng có tham chiếu tuần hoàn

   javascript Copy

   let a = { name: 'Dionysia', age: 29 };
   let b = { name: 'Dionysia', age: 29 };
   console.log(JSON.stringify(a) === JSON.stringify(b)); // true hoặc false tùy thuộc vào thứ tự của thuộc tính

2. Sử dụng thư viện Lodash: Phương thức _.isEqual() của Lodash thực hiện so sánh sâu (deep comparison) giữa hai đối tượng, bao gồm cả các đối tượng lồng nhau và không quan tâm đến thứ tự của các thuộc tính

   javascript Copy

   let a = { age: 29, name: 'Dionysia' };
   let b = { name: 'Dionysia', age: 29 };
   console.log(_.isEqual(a, b)); // true

3. So sánh sâu tự viết: Bạn có thể tự viết hàm để so sánh sâu giữa hai đối tượng, bằng cách đệ quy kiểm tra từng thuộc tính và giá trị của chúng

   javascript Copy

   function isDeepEqual(object1, object2) {
     const keys1 = Object.keys(object1);
     const keys2 = Object.keys(object2);
     if (keys1.length !== keys2.length) {
       return false;
     }
     for (let key of keys1) {
       const val1 = object1[key];
       const val2 = object2[key];
       const areObjects = isObject(val1) && isObject(val2);
       if (
         (areObjects && !isDeepEqual(val1, val2)) ||
         (!areObjects && val1 !== val2)
       ) {
         return false;
       }
     }
     return true;
   }

Kết luận

Khi so sánh hai đối tượng trong JavaScript, bạn không thể sử dụng toán tử == hoặc === vì chúng chỉ so sánh tham chiếu chứ không phải giá trị. Để so sánh giá trị của hai đối tượng, bạn có thể sử dụng JSON.stringify() cho các trường hợp đơn giản hoặc _.isEqual() từ thư viện Lodash cho một giải pháp mạnh mẽ và đáng tin cậy hơn. Nếu bạn cần một giải pháp tùy chỉnh, việc viết một hàm so sánh sâu tự viết có thể là lựa chọn phù hợp