So sánh 2 khóa đối tượng JavaScript

Trong JavaScript, chúng ta không thể so sánh trực tiếp hai đối tượng bằng toán tử đẳng thức (nhân đôi bằng == hoặc nhân ba bằng ===) để xem chúng có bằng nhau hay không. So sánh hai đối tượng như thế này dẫn đến sai ngay cả khi chúng có cùng dữ liệu. Đó là bởi vì đó là hai thể hiện đối tượng khác nhau, chúng đang đề cập đến hai đối tượng khác nhau

Các đối tượng trong JavaScript là một thực thể, nơi nó bao gồm các thuộc tính và loại. Hãy coi thể thao là một đối tượng, trong Ô tô, các thuộc tính có thể là màu sắc, giá cả, chiều cao, chiều rộng, v.v. Điều tương tự cũng xảy ra trong JavaScript, có các đối tượng và chứa các thuộc tính cho chúng

Const car = {
   color : ‘Black’,
   price : 2500000,
   height : ‘6 feet’,
   width : ‘5 feet’
}

Toán tử đẳng thức (===) xác minh xem hai toán hạng có bằng nhau hay không và trả về giá trị Boolean. Nếu cả hai toán hạng có kiểu khác nhau, toán tử này trả về false, ngược lại trả về true

document.write(‘tutorix’ === ‘tutorix’);
Output: true
document.write(‘tutorialspoint’ === tutorialspoint);
Output: false

Trong bài viết này, chúng ta sẽ thảo luận về cách so sánh hai đối tượng trong JavaScript

Sử dụng JSON. Phương thức Stringify()

Chúng ta không thể chỉ triển khai toán tử “==” hoặc “===” để so sánh hai đối tượng. Cách tốt hơn để so sánh là sử dụng JSON. Xâu chuỗi và so sánh các đối tượng

ví dụ 1

Ví dụ sau minh họa việc so sánh hai đối tượng trong JavaScript bằng cách sử dụng JSON. phương thức stringify()

ví dụ 2

So sánh lồng sâu

Trong ví dụ này, chúng tôi đã triển khai so sánh các đối tượng bằng JSON. Stringify() và toán tử “===”. Và chúng tôi đã thêm nhiều loại thuộc tính hơn vào đối tượng. Trong ví dụ dưới đây, chúng tôi đang thực hiện so sánh lồng sâu

ví dụ 3

Bao gồm các thông số khác nhau

Trong ví dụ này, chúng tôi đã sử dụng JSON. Stringify và “===” để so sánh hai đối tượng. Ở đây trong chương trình dưới đây, chúng tôi bao gồm các tham số khác nhau trong cả hai mảng. Nó sẽ trả về false vì các tham số khác nhau trong cả hai đối tượng

Ví dụ 4

Thay đổi thứ tự các thuộc tính trong đối tượng

Trong ví dụ này, chúng tôi đã sử dụng JSON. Stringify và toán tử “===” để so sánh các đối tượng. Ở đây chúng ta thay đổi thứ tự của các thuộc tính trong đối tượng, nó sẽ trả về false vì chúng không theo cùng một thứ tự

Sử dụng Loadash_. isEqual

Các _. isEqaul là thuộc tính của lodash dùng để so sánh các đối tượng JavaScript. Nó được sử dụng để biết liệu hai đối tượng có giống nhau hay không. Ví dụ, có hai mảng có số phần tử bằng nhau, thuộc tính và giá trị cũng giống nhau. Ngay cả các thuộc tính không theo cùng một thứ tự, nó sẽ trả về true

cú pháp

_.isEqual(obj1, obj2);

ví dụ 1

Với những giá trị lộn xộn

Trong ví dụ này, chúng tôi đã sử dụng _. chức năng bằng nhau để biết liệu chúng có giống nhau hay không. Nó sẽ trả về true ngay cả khi các thuộc tính và giá trị giống nhau nhưng theo thứ tự lộn xộn

ví dụ 2

Với các giá trị khác nhau trong cả hai đối tượng

Trong ví dụ này, chúng tôi làm theo _. hàm isEqual() để thực hiện trên các đối tượng cho dù chúng có giống nhau hay không. Ở đây chúng tôi đã bao gồm một tình huống trong đó các thuộc tính và giá trị khác nhau trong các đối tượng

Hôm nay, tôi sẽ chỉ cho các bạn một cách cơ bản để viết một hàm so sánh hai đối tượng và cũng truy xuất các thuộc tính phù hợp của chúng

Chức năng này như tên trạng thái sẽ được sử dụng để so sánh 2 đối tượng và nó hoạt động đối với các đối tượng chứa các thuộc tính đơn giản nhưng không phức tạp

Trong trường hợp này, một thuộc tính phức tạp có thể được xem như một thuộc tính mà giá trị của chúng chứa các mảng hoặc các đối tượng khác bên trong chúng

Trước khi bắt đầu, hãy để chúng tôi làm mới bộ nhớ của mình trên Đối tượng JavaScript

Nói, chúng ta có đối tượng bên dưới

Để truy cập giá trị của bất kỳ thuộc tính nào, chúng tôi sẽ sử dụng khóa

Để liệt kê tất cả các khóa có trong Đối tượng này, chúng ta sẽ làm như thế này;

Bây giờ, tùy thuộc vào thuộc tính chúng tôi muốn truy cập, chúng tôi sẽ sử dụng các khóa tương ứng để truy cập chúng

Hãy truy cập vào uid (user_id), name và location của người dùng

Vì chúng ta không thể trực tiếp sử dụng phương thức độ dài để tìm xem có bao nhiêu thuộc tính được chứa trong đối tượng, nên trước tiên chúng ta phải liệt kê các khóa và sau đó tìm xem có bao nhiêu khóa đã được liệt kê. Bằng cách này, chúng ta có tổng các thuộc tính chứa trong đối tượng

Có kiến ​​thức cơ bản về các đối tượng, hãy viết hàm so sánh hai đối tượng và trả về true nếu chúng bằng nhau và trả về false nếu chúng không bằng nhau

Chúng tôi sẽ bắt đầu bằng cách kiểm tra xem các tham số được cung cấp có phải là Đối tượng không

Hàm mũi tên bên dưới trả về true nếu nó là một đối tượng hoặc false nếu không

Sau đó, chúng tôi kiểm tra xem chiều dài của đối tượng đầu tiên có bằng chiều dài của đối tượng thứ hai không

Điều này là do khi so sánh hai đối tượng, trong trường hợp này là Đối tượng, chúng phải có độ dài và thuộc tính bằng nhau

Bây giờ, chúng ta sẽ lặp qua đối tượng đầu tiên, để so sánh từng thuộc tính của nó (khóa và giá trị) với đối tượng thứ hai

Chúng tôi cũng sẽ tạo một biến lưu trữ số lượng thuộc tính phù hợp và sau đó chúng tôi sẽ kiểm tra xem số lượng thuộc tính phù hợp có bằng độ dài của đối tượng hay không. Nếu chúng bằng nhau, chúng ta sẽ trả về true nghĩa là hai đối tượng được cung cấp bằng nhau

Mặt khác để test chức năng này chúng ta sẽ tạo 4 Object. Hai đối tượng sẽ chứa các thuộc tính giống nhau (a và d) và hai đối tượng còn lại sẽ chứa các thuộc tính không bằng nhau (b và c). Sau đó, chúng ta sẽ gọi hàm và truyền vào các biến

Đây là kịch bản đầy đủ

Hãy gọi hàm

So sánh b và c

So sánh a và d

Chúng ta đã hoàn thành chức năng kiểm tra xem hai đối tượng có bằng nhau không. Nó trả về true nếu bằng và false nếu không bằng. Chúng ta có thể mở rộng hàm để liệt kê các thuộc tính có trong cả hai đối tượng

Chúng ta có thể sử dụng điều này để liệt kê các thuộc tính phù hợp có trong các đối tượng

Hãy để chúng tôi chỉnh sửa chức năng của chúng tôi

Chúng ta sẽ tạo một biến kiểu đối tượng, biến này sẽ lưu trữ các thuộc tính phù hợp (nghĩa là. thuộc tính chứa trong đối tượng đầu tiên và trong đối tượng thứ hai)

Sau đó, bên trong khối xác nhận xem cả hai thuộc tính có bằng nhau hay không, chúng tôi sẽ nối thêm khóa và giá trị của thuộc tính phù hợp

Bây giờ chúng ta hãy kiểm tra lại chức năng bằng cách so sánh các đối tượng không bằng nhau trước đó. Hàm sẽ liệt kê các thuộc tính phù hợp của hai đối tượng và trả về false vì chúng không bằng nhau

so sánh đối tượng b và c

Nó hoạt động

Nếu thuộc tính Đối tượng của bạn chứa một giá trị là đối tượng hoặc mảng (thuộc tính phức hợp trong trường hợp này), toán tử so sánh (===) sẽ trả về false vì chúng ta không thể so sánh trực tiếp 2 đối tượng hoặc mảng bằng toán tử

Trong trường hợp này, bạn sẽ phải kiểm tra xem giá trị là một mảng hay một đối tượng, sau đó lặp qua các giá trị của nó để đưa nó xuống mức so sánh. Hoặc bạn có thể chuyển đổi hai cấu trúc dữ liệu thành chuỗi JSON bằng JSON. stringify() và sau đó so sánh chúng

Hướng dẫn sử dụng JSON. xâu chuỗi lại

Hàm ở trên hoạt động hoàn hảo cho các đối tượng nông và điều này có nghĩa là các thuộc tính trong đối tượng phải chứa một khóa và một giá trị là một chuỗi hoặc một số. Nhưng nếu thuộc tính đối tượng chứa một khóa và một giá trị là một mảng hoặc một đối tượng, thì hàm ở trên sẽ không giúp được gì

Sử dụng chức năng bên dưới, bạn có thể so sánh bất kỳ loại đối tượng nào, miễn là bạn không cần truy xuất các thuộc tính phù hợp của nó (nội dung cho một ngày khác)

Logic đằng sau chức năng bên dưới về cơ bản chỉ là sử dụng JSON. stringify để chuyển đổi đối tượng thành chuỗi JSON, lưu kết quả vào một biến, sau đó lặp qua từng ký tự và kiểm tra xem nó có tồn tại trong đối tượng khác hay không bằng cách sử dụng phương thức includes

Tôi nhận được gợi ý này từ Sunil và tôi rất vui vì nó giải quyết được vấn đề

Hãy bắt đầu nào

• Đầu tiên, chúng ta cần kiểm tra xem biến được cung cấp có phải là một đối tượng không
• Sau đó, chúng tôi kiểm tra xem độ dài của đối tượng đầu tiên có bằng đối tượng thứ hai không

Tiếp theo, chúng ta sẽ tạo một biến match sẽ lưu trữ số lượng ký tự khớp và sau đó là một biến stringified sẽ lưu trữ kết quả của việc chuyển đổi đối tượng đầu tiên thành chuỗi JSON bằng JSON. xâu chuỗi lại

Bây giờ, chúng ta phải lặp qua biến stringified và kiểm tra xem mỗi ký tự có được chứa trong đối tượng thứ hai được xâu chuỗi không. Nếu tìm thấy khớp, chúng tôi sẽ tăng biến match và sau vòng lặp, chúng tôi sẽ kiểm tra xem biến khớp có bằng độ dài của đối tượng được xâu chuỗi không

Lý do tôi chọn sử dụng phương thức bao gồm chứ không phải toán tử so sánh để kiểm tra điều này là vì hai đối tượng bằng nhau như thế này;

Cả hai đối tượng trên đều bằng nhau, nhưng giá trị thuộc tính của đối tượng thứ hai là một mảng chứa các giá trị giống như đối tượng thứ nhất nhưng theo cách ngược lại. Vì vậy, nếu một toán tử so sánh được sử dụng để so sánh điều này, kết quả sẽ là sai

Đó là lý do tại sao tôi chọn sử dụng phương thức includes để kiểm tra xem ký tự có được bao gồm trong đối tượng thứ hai được xâu chuỗi hay không

KIỂM TRA

Sử dụng chức năng mới của chúng tôi, Chúng tôi sẽ bắt đầu bằng cách so sánh ví dụ trên, sau đó chúng tôi sẽ so sánh một đối tượng có chứa một thuộc tính phức tạp (đó là lý do chính cho bài viết này)

So sánh ví dụ trên

So sánh một đối tượng với một thuộc tính phức tạp

Nhìn vào kết quả trong hình trên, chúng ta có thể nói rằng các đối tượng obj1 và name0 bằng nhau

Tôi hy vọng bạn đã tìm thấy điều này hữu ích. Vui lòng gửi câu hỏi, chỉnh sửa hoặc đề xuất của bạn bằng cách sử dụng hộp bình luận bên dưới

Cảm ơn bạn

Xây dựng các ứng dụng web có thể kết hợp

Đừng xây dựng web nguyên khối. Sử dụng Bit để tạo và soạn các thành phần phần mềm tách rời — trong các khung yêu thích của bạn như React hoặc Node. Xây dựng các ứng dụng mô-đun và có thể mở rộng với trải nghiệm nhà phát triển mạnh mẽ và thú vị

Đưa nhóm của bạn đến Bit Cloud để lưu trữ và cộng tác trên các thành phần cùng nhau, đồng thời tăng tốc, mở rộng quy mô và chuẩn hóa đáng kể quá trình phát triển theo nhóm. Bắt đầu với các giao diện người dùng có thể kết hợp như Hệ thống thiết kế hoặc Giao diện vi mô hoặc khám phá phần phụ trợ có thể kết hợp. Hãy thử nó →

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

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

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

Làm cách nào để so sánh hai đối tượng trong JavaScript và nhận được sự khác biệt?