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: falseTrong 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
so sánhObject()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
Giới thiệu về các đối tượngTrong 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
Kiểm tra chức năng so sánh đối tượng của chúng tôiMặ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
Tiếp theo là gì?
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
kết thúcNế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
CHỈNH SỬAHướ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;
hai đối tượng bằng nhau
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
so sánh chức năng đối tượng
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ó →