数据结构
网络
关系型数据库管理系统
操作系统
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+ 次查看
