如何在 JavaScript 中比较两个对象？
JavaScript 中的对象是一个实体，它由属性和类型组成。让我们将运动视为一个对象，在汽车中，属性可以是颜色、价格、高度、宽度等。JavaScript 中也发生了完全相同的事情，它具有对象并包含它们的属性。
Const car = {
color : 'Black',
price : 2500000,
height : '6 feet',
width : '5 feet'
}
相等运算符 (===) 验证两个操作数是否相等并返回布尔值。如果两个操作数的类型不同，则此运算符返回 false，否则返回 true。
document.write('tutorix' === 'tutorix');
输出：true
document.write('tutorialspoint' === tutorialspoint);
输出：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>
