資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 JavaScript 中比較兩個物件？
在 JavaScript 中的物件 是一個實體，它由屬性和型別組成。讓我們將運動視為一個物件，在汽車中，屬性可以是顏色、價格、高度、寬度等。在 JavaScript 中也完全一樣，它有物件，並且包含它們的屬性。
Const car = {
color : 'Black',
price : 2500000,
height : '6 feet',
width : '5 feet'
}
相等運算子 (===) 驗證兩個運算元是否相等，並返回布林值。如果兩個運算元的型別不同，則此運算子返回 false，否則返回 true。
document.write('tutorix' === 'tutorix');
Output: true
document.write('tutorialspoint' === tutorialspoint);
Output: false
在本文中，我們將討論如何在 JavaScript 中比較兩個物件。
使用 JSON.Stringify() 方法
我們不能僅僅使用 "==" 或 "===" 運算子來比較兩個物件。更好的比較方法是使用 JSON.Stringify 並比較物件。
示例 1
以下示例演示了使用 JSON.stringify() 方法在 JavaScript 中比較兩個物件的示例。
<!DOCTYPE html> <html> <title>Comparing two objects</title> <head> <script> const Fruit1 = { fruit: 'kiwi' }; // Creating Fruit1 object const Fruit2 = { fruit: 'kiwi' }; // Creating Fruit2 object // Performing JSON.Stringify and === operator document.write(JSON.stringify(Fruit1) === JSON.stringify(Fruit2)); </script> </head> <body> </body> </html>
示例 2
深度巢狀比較
在本例中，我們使用 JSON.Stringify() 和 "===" 運算子實現了物件的比較。並且我們在物件中添加了更多型別的屬性。在下面的示例中，我們正在執行深度巢狀比較。
<!DOCTYPE html> <html> <title>Comparing two objects (Deep Nested Comparision)</title> <head> <script> const cricketer1 = { name: 'Dhoni', Career_Stats: { runs: 10549, ipl: { Trophies: 3, }, }, }; const cricketer2 = { name: 'Dhoni', Career_Stats: { runs: 10549, ipl: { Trophies: 3, }, }, }; // Using JavaScript document.write(JSON.stringify(cricketer1) === JSON.stringify(cricketer2)); // true </script> </head> <body> </body> </html>
示例 3
包含不同的引數
在本例中，我們使用 JSON.Stringify 和 "===" 比較兩個物件。在下面的程式中，我們在兩個陣列中包含了不同的引數。它將返回 false，因為兩個物件中的引數不同。
<!DOCTYPE html> <html> <title>Comparing two objects (Different parameters)</title> <head> <script> //Creating person1 object const person1 = { name: 'Dhoni', age: 41, role: 'Batsmen', runs: 104549, }; //Creating person2 object const person2 = { name: 'Kohli', age: 34, role: 'Batsmen', runs: 12178, }; // Comparing using JSON.Stringify and "===" document.write(JSON.stringify(person1) === JSON.stringify(person2)); // It will return FALSE </script> </head> <body> </body> </html>
示例 4
更改物件中屬性的順序
在本例中，我們使用 JSON.Stringify 和 "===" 運算子比較物件。在這裡，我們更改了物件中屬性的順序，它將返回 false，因為它們的順序不同。
<!DOCTYPE html> <html> <title>Comparing two objects (Order changed)</title> <head> <script> //Creating person1 object const person1 = { name: 'Dhoni', age: 41, role: 'Batsmen', runs: 104549, }; //Creating person2 object const person2 = { name: 'Dhoni', age: 41, runs: 104549, role: 'Batsmen', }; // Comparing using JSON.Stringify and "===" document.write(JSON.stringify(person1) === JSON.stringify(person2)); // It will return FALSE </script> </head> <body> </body> </html>
使用 Loadash_.isEqual
_.isEqaul 是 lodash 的屬性，用於比較 JavaScript 物件。它用於瞭解兩個物件是否相同。例如，有兩個陣列，元素數量相等，屬性和值也相同。即使屬性的順序不同，它也會返回 true。
語法
_.isEqual(obj1, obj2);
示例 1
使用雜亂的值
在本例中，我們使用 _.equal 函式來了解它們是否相同。即使屬性和值相同但順序不同，它也會返回 true。
<!DOCTYPE html> <html> <title>Comparing two objects (Using _.isEqual function)</title> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"> </script> </head> <body> <script type="text/javascript"> //Creating Person1 object var person1 = { name: 'Dhoni', Age: 41, Trophies: [2007, 2011, 2013] }; //Creating Person2 object var person2 = { name: 'Dhoni', Trophies: [2007, 2011, 2013], Age: 41 }; //Performing _.isEqual function document.write(_.isEqual(person1, person2)); </script> <body> </head> </html>
示例 2
兩個物件中包含不同的值
在本例中，我們遵循 _.isEqual() 函式對物件執行操作，以瞭解它們是否相同。在這裡，我們添加了一種情況，其中物件的屬性和值不同。
<!DOCTYPE html> <html> <title>Comparing two objects (Using _.isEqual function)</title> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"> </script> </head> <body> <script type="text/javascript"> //Creating person1 object var person1 = { name: 'Dhoni', Age: 41, Trophies: [2007, 2011, 2013] }; //Creating person2 object var person2 = { name: 'Kohli', Trophies: [], Age: 34, }; document.write(_.isEqual(person1, person2)); </script> </body> </html>
24K+ 次檢視
