Hướng dẫn compare two nested objects javascript - so sánh hai đối tượng lồng nhau javascript

Đối tượng là các loại tham chiếu để bạn có thể chỉ sử dụng === hoặc == để so sánh 2 đối tượng. Một cách nhanh chóng để so sánh nếu 2 đối tượng có cùng giá trị khóa, là sử dụng

const person1 = {
    "firstName": "John",
    "lastName": "Doe",
    "age": 35 
}

const person2 = {
    "firstName": "John",
    "lastName": "Doe",
    "age": 35 
}

JSON.stringify(person1) === JSON.stringify(person2); // true

const person1 = {
    "firstName": "John",
    "lastName": "Doe",
    "age": 35 
}

const person2 = {
    "firstName": "John",
    "lastName": "Doe",
    "age": 35 
}

JSON.stringify(person1) === JSON.stringify(person2); // true

# So sánh sâu thẳm

Yup, 2 cách cũng hoạt động cho các vật thể lồng sâu.

# Tôi nên sử dụng cái nào?

Điều đó phụ thuộc. Đối với

const person1 = {
    "firstName": "John",
    "lastName": "Doe",
    "age": 35 
}

const person2 = {
    "firstName": "John",
    "lastName": "Doe",
    "age": 35 
}

JSON.stringify(person1) === JSON.stringify(person2); // true

const person1 = {
    "firstName": "John",
    "lastName": "Doe",
    "age": 35 
}

const person2 = {
    "firstName": "John",
    "lastName": "Doe",
    "age": 35 
}

JSON.stringify(person1) === JSON.stringify(person2); // true

Đây là đề xuất của tôi. Đối với một giải pháp nhanh chóng và bẩn, tôi sẽ sử dụng

const person1 = {
    "firstName": "John",
    "lastName": "Doe",
    "age": 35 
}

const person2 = {
    "firstName": "John",
    "lastName": "Doe",
    "age": 35 
}

JSON.stringify(person1) === JSON.stringify(person2); // true

# Es6 cách để so sánh 2 đối tượng

Đây là một giải pháp được đề xuất bởi @mustafauzun0. Mặc dù vậy, rất ít điều cần lưu ý, nó đã giành được công việc với các đối tượng lồng nhau và thứ tự của các phím rất quan trọng. Ý tưởng đằng sau điều này tương tự như cách chuỗi. Nó bao phủ đối tượng thành một chuỗi và so sánh nếu các chuỗi là một kết quả phù hợp. Về cơ bản nó so sánh sự bình đẳng của hai chuỗi. Đó là lý do tại sao đơn đặt hàng quan trọng.

Cảm ơn: @mustafauzun0

# Json.Stringify vs hiệu suất của Lodash

Cole Turner: Đáng chú ý rằng các đối tượng không đảm bảo thứ tự sắp xếp và Stringify sẽ tốn nhiều hiệu suất hơn vì nó phải tuần tự hóa toàn bộ đối tượng trong khi Lodash có thể thoát ra sớm nếu tìm thấy một khóa không khớp. Điều này xuất hiện trong các cuộc phỏng vấn 🙂

Cảm ơn: @Coleturner

BLNKDOTSPACE: Lodash nhanh hơn đáng kể. Bởi vì Lodash sẽ bỏ cuộc ngay khi nó đạt đến sự khác biệt đầu tiên, nhưng Stringify đi ngay cho đến khi kết thúc một cách không cần thiết. Nếu bạn có các mảng nhỏ thì không sao nhưng đối với các trường hợp sử dụng cá nhân của tôi với hơn 1000 sự kiện/sản phẩm trong danh sách, tôi sẽ không bao giờ sử dụng Stringify.

Cảm ơn: @blnkdotspace

# Tài nguyên

• MDN Web Docs - JSON.Stringify
• Lodash: Isequal
• Hiểu các đối tượng JavaScript
• Bình đẳng đối tượng trong JavaScript
• JavaScript so sánh đối tượng sâu - JSON.
• Stack Overflow: Có tốt không khi sử dụng JSON.Stringify để so sánh sâu và nhân bản?
• Làm thế nào để xác định bình đẳng cho hai đối tượng JavaScript?

JavaScript có 7 loại dữ liệu nguyên thủy. Chúng ta có thể so sánh các giá trị của bất kỳ loại nào trong số này bằng toán tử bình đẳng. Tuy nhiên, việc so sánh các loại không nguyên thủy như đối tượng là khó khăn vì các toán tử bình đẳng thông thường không so sánh các giá trị đối tượng như người ta có thể mong đợi.

Trong bài viết này, chúng tôi sẽ thảo luận về năm cách khác nhau để xác định sự bình đẳng của các đối tượng JavaScript.

Hai loại bình đẳng trong JavaScript

Khi thảo luận về so sánh đối tượng trong JavaScript, có hai loại bình đẳng mà người ta phải biết:

• Bình đẳng tham chiếu: & nbsp; xác định xem hai toán hạng được cung cấp có tham chiếu đến cùng một phiên bản tham chiếu/đối tượng hay không.Determines whether the two provided operands refer to the same reference/object instance.
• Bình đẳng sâu sắc: & nbsp; xác định xem các đối tượng có bằng hay không bằng cách so sánh từng thuộc tính trong toán hạng.Determines whether objects are equal by comparing each property in the operands.

Bình đẳng tham chiếu có thể được xác định với các toán tử bình đẳng như bình đẳng nghiêm ngặt (===) hoặc bình đẳng cưỡng chế (==) và cả bằng cách sử dụng các hàm object.is (), nhưng việc xác định bình đẳng sâu là khó khăn vì các đối tượng có thể được lồng. Tuy nhiên, năm cách sau đây để thực hiện so sánh đối tượng giúp các nhà phát triển hoạt động dễ dàng hơn khi cần phải so sánh bình đẳng sâu sắc.(===) or coercive equality (==) and also by using Object.is() functions, but determining deep equality is tricky as the objects can be nested. However, the following five ways of performing object comparisons make developers’ work easier when a deep equality comparison is required.

Khám phá thư viện điều khiển UI JavaScript tốt nhất và toàn diện nhất trên thị trường.

Khám phá ngay bây giờ

So sánh thủ công

Suy nghĩ đầu tiên rõ ràng về bất kỳ ai về tâm trí của vấn đề này đối với vấn đề này sẽ là lấy từng tài sản và so sánh nó với các thuộc tính và giá trị của toán hạng khác. Nhưng, như đã đề cập trước đây, những đối tượng này có thể có các thuộc tính lồng nhau. Do đó, chúng ta phải sử dụng một phương pháp đệ quy để so sánh các đối tượng lồng nhau này.

Một triển khai phương pháp đệ quy như sau đây sẽ có thể cho chúng ta biết liệu hai đối tượng đã cho có bằng nhau không..

const person1 = {
    "firstName": "John",
    "lastName": "Doe",
    "age": 35 
};

const person2 = {
    "firstName": "John",
    "lastName": "Doe",
    "age": 35,
};
 
const isDeepEqual = (object1, object2) => {

  const objKeys1 = Object.keys(object1);
  const objKeys2 = Object.keys(object2);

  if (objKeys1.length !== objKeys2.length) return false;

  for (var key of objKeys1) {
    const value1 = object1[key];
    const value2 = object2[key];

    const isObjects = isObject(value1) && isObject(value2);

    if ((isObjects && !isDeepEqual(value1, value2)) ||
      (!isObjects && value1 !== value2)
    ) {
      return false;
    }
  }
  return true;
};

const isObject = (object) => {
  return object != null && typeof object === "object";
};

console.log(isDeepEqual(person1, person2)); //true

Phương thức JSON.Stringify ()

Phương pháp này là một mẹo mà chúng ta có thể sử dụng để xác định xem hai đối tượng có bằng sâu hay không. Mặc dù JavaScript không có giải pháp vượt trội để so sánh hai đối tượng, nhưng nó không có vấn đề gì khi so sánh hai chuỗi. Do đó, trong phương pháp này, chúng tôi chuyển đổi hai đối tượng của mình thành các chuỗi bằng phương thức JSON.Stringify () và so sánh hai giá trị để xác định xem các đối tượng có giống nhau không. Ngay cả khi các đối tượng có thuộc tính lồng nhau, phương pháp này cũng có thể xử lý chúng. Điều quan trọng cần lưu ý là phương pháp này sử dụng bình đẳng nghiêm ngặt (===) trên các thuộc tính; Do đó, có độ tuổi 35 và 35 35 sẽ không bằng nhau.JSON.stringify() method and compare the two values to determine whether the objects are deep equal. Even if the objects have nested properties, this method can handle those as well. It is important to note that this method uses strict equality (===) on attributes; therefore, having ages as 35 and “35” will not be equal.

const person1 = {
    "firstName": "John",
    "lastName": "Doe",
    "age": 35 
}

const person2 = {
    "firstName": "John",
    "lastName": "Doe",
    "age": 35 
}

JSON.stringify(person1) === JSON.stringify(person2); // true

Phương pháp này có một nhược điểm, tuy nhiên. Lấy ví dụ trên và thay đổi thứ tự của các thuộc tính trong đối tượng Person2.person2.

const person2= {
    "age": 35,
    "firstName": "John",
    "lastName": "Doe"
}

Vì các thuộc tính đối tượng và giá trị của chúng không thay đổi, chúng tôi sẽ mong đợi trả về true khi các đối tượng được so sánh. Vì các chuỗi được tạo là khác nhau lần này do sự khác biệt trong thứ tự, so sánh sẽ trả về sai.

Do đó, điều quan trọng cần lưu ý là việc có các đơn đặt hàng khác nhau của các thuộc tính có thể cho kết quả không chính xác khi sử dụng phương thức này.

Tất cả mọi thứ mà nhà phát triển cần biết để sử dụng điều khiển JavaScript trong ứng dụng web đều được ghi lại hoàn toàn.

Đọc ngay

So sánh bằng thư viện lodash

Thư viện nổi tiếng & nbsp; Lodash & nbsp; cũng cung cấp một phương pháp để xác định sự bình đẳng sâu sắc giữa hai đối tượng. Sử dụng phương thức isequal () từ thư viện này, chúng ta có thể thực hiện so sánh sâu giữa các toán hạng đã cho. Nó sẽ trả về một giá trị boolean cho biết liệu các toán hạng có bình đẳng dựa trên sự bình đẳng nghiêm ngặt của JavaScript (===) trên tất cả các thuộc tính của hai đối tượng đã cho hay không.isEqual() method from this library, we can perform a deep comparison between the given operands. It will return a Boolean value indicating whether the operands are equal based on JavaScript strict equality (===) on all attributes of the two given objects.

const _ = require('lodash');

const person1 = {
    "firstName": "John",
    "lastName": "Doe",
    "age": 35 
}

const person2 = {
    "firstName": "John",
    "lastName": "Doe",
    "age": 35 
}

_.isEqual(person1, person2); // true

Theo tài liệu & NBSP; Lodash, phương pháp này hỗ trợ các mảng, bộ đệm mảng, đối tượng ngày, v.v. Như một phần thưởng, chúng tôi cũng có thể tải xuống phương thức này dưới dạng mô -đun NPM riêng biệt.

So sánh bằng cách sử dụng thư viện công bằng sâu

Thư viện công bằng sâu là một mô-đun NPM & NBSP; NPM & NBSP; với hơn 11 triệu lượt tải xuống hàng tuần. Thư viện này cung cấp chức năng để xác định sự bình đẳng sâu sắc giữa hai đối tượng.

Phương thức Deepequal () từ thư viện lấy ba tham số. Hai đầu tiên là các toán hạng được so sánh và tham số thứ ba là tham số tùy chọn tùy chọn. Với tùy chọn, chúng tôi có thể chỉ định liệu sử dụng bình đẳng nghiêm ngặt (===) hoặc Bình đẳng cưỡng chế (==) để so sánh các nút lá. Tùy chọn mặc định là sử dụng bình đẳng cưỡng chế để so sánh các nút lá.deepEqual() method from the library takes three parameters. The first two are the operands to be compared, and the third parameter is an optional options parameter. With the option, we can specify whether to use strict equality (===) or coercive equality (==) to compare the leaf nodes. The default option is to use coercive equality to compare leaf nodes.

const deepEqual = require('deep-equal');

const person1 = {
    "firstName": "John",
    "lastName": "Doe",
    "age": 35 
}

const person2 = {
    "firstName": "John",
    "lastName": "Doe",
    "age": "35" 
}
deepEqual(person1, person2); // true

Lưu ý rằng giá trị tuổi là một số trong đối tượng Person1 và một chuỗi trong đối tượng Person2. Vì tùy chọn nghiêm ngặt là sai theo mặc định, thư viện công bằng sâu sử dụng bình đẳng cưỡng chế trên các nút lá, do đó chức năng này trả về đúng. Nếu tham số nghiêm ngặt của hàm được đặt thành TRUE, phương thức này sẽ trả về sai.age value is a number in the person1 object and a string in the person2 object. Since the strict option is false by default, the deep-equal library uses coercive equality on the leaf nodes, so this function returns true. If the strict parameter of the function is set to true, this method would return false.

const person2 = {
    "firstName": "John",
    "lastName": "Doe",
    "age": "35" 
}

deepEqual(person1, person2, {strict: true}); // false

//When person2 values are updated with the same data types as person1.
const person2 = {
    "firstName": "John",
    "lastName": "Doe",
    "age": 35 
}

deepEqual(person1, person2, {strict: true}); // true

Các điều khiển JavaScript SyncFusion cho phép bạn xây dựng các ứng dụng kinh doanh mạnh mẽ.

Thử ngay bây giờ

Phương pháp dành riêng cho khung

Một số khung JavaScript, chẳng hạn như Angular và NodeJS, cung cấp chức năng tích hợp để xác định sự bình đẳng sâu sắc trong khung của chúng.

• Node.js: assert.deepstrictequal (thực tế, dự kiến, tin nhắn) Phương thức DeepStrictequal () được cung cấp bởi mô-đun ASP sẽ được sử dụng khi một lỗi được ném nếu hai toán hạng không bằng nhau. Phương pháp này sẽ kiểm tra sự bình đẳng nghiêm ngặt trên các nút lá. Nó sẽ trả về không xác định nếu các toán hạng bằng nhau và sẽ bị lỗi nếu chúng không sâu và bằng nhau .________ 6: assert.deepStrictEqual(actual, expected, message)
  The deepStrictEqual() method provided by the assert module is a built-in method in Node.js that takes three parameters: the two operands and a message as an optional parameter that will be used when an error is thrown if the two operands are not equal. This method will check for strict equality on leaf nodes. It will return undefined if the operands are equal and will throw an error if they are not deep and strictly equal.

  const assert = require('assert');
  
  const person1 = {
      "firstName": "John",
      "lastName": "Doe",
      "age": 35 
  }
  
  const person2 = {
      "firstName": "John",
      "lastName": "Doe",
      "age": 35 
  }
  
  console.log(assert.deepStrictEqual(person1, person2)); //true

• Angular: Angular.equals (OBJ1, OBJ2) Thư viện góc cũng & nbsp; cung cấp một phương pháp giúp chúng ta xác định sự bình đẳng sâu sắc giữa hai đối tượng. Phương pháp này được cung cấp theo mô -đun NG. Nó cần hai tham số, các toán hạng, được so sánh với sự bình đẳng và trả về giá trị boolean cho biết liệu các toán hạng có bình đẳng dựa trên sự bình đẳng nghiêm ngặt của JavaScript (===) .________ 7: angular.equals(obj1, obj2)
  The Angular library also provides a method that helps us to determine deep equality between two objects. This method is provided under the ng module. It takes two parameters, the operands, to be compared for equality and returns a Boolean value indicating whether the operands are equal based on JavaScript strict equality (===).

  var person1 = {
    firstName: "John",
    lastName: "Doe",
    age: 35,
  };
   
  var person2 = {
    firstName: "John",
    lastName: "Doe",
    age: 35,
  };
   
  console.log(angular.equals(person1, person2)); //true

Sự kết luận

Việc so sánh đối tượng sâu JavaScript có thể khó khăn, vì vậy cần phải xử lý cẩn thận. Như đã thảo luận ở trên, có nhiều phương pháp, bao gồm các thư viện của bên thứ ba, giúp chúng tôi xác định sự bình đẳng sâu sắc giữa các đối tượng. Để chọn phương pháp phù hợp cho trường hợp sử dụng, người ta phải xem xét từng yêu cầu và tùy chọn phương thức.

Tôi hy vọng bài viết này sẽ giúp bạn đưa ra quyết định đúng đắn. Cảm ơn bạn đã đọc.

SyncFusion Essential JS 2 là bộ duy nhất bạn cần để xây dựng một ứng dụng. Nó chứa hơn 65 thành phần UI hiệu suất cao, nhẹ, mô-đun và đáp ứng trong một gói. Tải xuống một bản dùng thử miễn phí để đánh giá các điều khiển ngay hôm nay.

Nếu bạn có bất kỳ câu hỏi hoặc nhận xét nào, bạn có thể liên hệ với chúng tôi thông qua các diễn đàn hỗ trợ của chúng tôi, & NBSP; Cổng thông tin hỗ trợ, hoặc & NBSP; Cổng thông tin phản hồi. Chúng tôi luôn sẵn lòng hỗ trợ bạn!

Blog liên quan

• Dễ dàng tạo một biểu mẫu có thể điền bằng Trình xử lý Word Word JavaScript
• Xây dựng một thanh tiến trình trong JavaScript bằng cách sử dụng máy đo tuyến tính
• Ưu và nhược điểm của việc sử dụng JavaScript Interop trong Blazor
• Top 6 tính năng JavaScript ES12 bạn nên sử dụng

Tôi có thể so sánh hai đối tượng trong JavaScript không?

Bạn có thể sử dụng == để so sánh các đối tượng không?

Các đối tượng so sánh nông JavaScript là gì?

Bình đẳng tham khảo trong JavaScript là gì?