在 JavaScript 中比较对象
本教程将讨论如何手动或使用 JavaScript 中的 JSON.stringify()
函数比较对象。
在 JavaScript 中比较变量相对容易;我们只需要在两个变量之间使用比较运算符 ===
。变量可以是任何数据类型,如字符串和整数。
比较运算符返回一个布尔值,它可以是 true
或 false
,具体取决于被比较的变量。例如,让我们使用比较运算符比较字符串类型的两个变量。
请参考下面的代码。
var a = 'Apple';
var b = 'Apple';
console.log(a === b)
输出:
true
在输出中,布尔值 true
表示两个变量相同。同样,你也可以比较数字。现在我们来谈谈 JavaScript 中对象的比较。
对象比较并不容易,因为它们包含多个值,并且它们也可以在其中包含对象。比较两个对象的快速简便的方法是使用 JASON.stringify()
函数。这种方法的缺点是属性的顺序比较重要。
此函数将一个对象的第一个属性与另一个对象的第一个属性进行比较,依此类推。如果我们更改其中一个对象中的属性顺序,则此方法将不起作用。例如,让我们使用 JSON.strigify()
函数比较两个对象。
请参考下面的代码。
const fruit1 = {
name: 'Apple',
price: '2'
};
const fruit2 = {
name: 'Apple',
price: '2'
};
console.log(JSON.stringify(fruit1) === JSON.stringify(fruit2))
输出:
true
在这段代码中,我们比较了两个分别包含两个属性的对象。从输出来看,两个对象是相等的。现在,让我们更改一个对象中两个属性的顺序,然后使用 JSON.stringify()
函数将其与另一个进行比较。
请参考下面的代码。
const fruit1 = {
name: 'Apple',
price: '2'
};
const fruit2 = {
price: '2',
name: 'Apple'
};
console.log(JSON.stringify(fruit1) === JSON.stringify(fruit2))
输出:
false
在输出中,结果是 false
。我们改变了第二个对象的属性顺序;这是这种方法的缺点。
上面的方法有一个缺点,所以我们可以自己做一个函数来比较两个对象,这样我们就不用关心对象的属性顺序了。
例如,让我们创建一个函数来比较 JavaScript 中的上述对象。请参考下面的代码。
function ObjCompare(obj1, obj2){
if (obj1.name === obj2.name && obj1.price === obj2.price){
return true;
};
return false;
}
const fruit1 = {
name: 'Apple',
price: '2'
};
const fruit2 = {
price: '2',
name: 'Apple'
};
console.log(ObjCompare(fruit1,fruit2))
输出:
true
在上面的代码中,我们创建了 ObjCompare()
函数,根据它们的属性比较两个对象,而不考虑它们的顺序。只有当两个对象的名称和价格相同时,该函数才返回 true
;否则,它将返回 false
。
你还可以创建自己的函数来比较多个属性或比较你喜欢从所有可用属性中比较的一个属性。你还可以创建另一个函数来一次比较两个以上的对象。
现在,考虑我们有两个具有许多属性的对象,我们想要比较所有这些属性。制作这种功能需要很多时间。
相反,我们可以使用 Object.keys()
函数来获取函数的所有键或属性,并使用循环进行比较。如果所有属性都相同,函数将返回 true
;否则,它将返回 false
。
例如,让我们制作这个函数并用上面的两个对象进行测试。请参考下面的代码。
function ObjCompare(obj1, obj2){
const Obj1_keys = Object.keys(obj1);
const Obj2_keys = Object.keys(obj2);
if (Obj1_keys.length !== Obj2_keys.length){
return false;
}
for (let k of Obj1_keys){
if(obj1[k] !== obj2[k]){
return false;
}
}
return true;
}
const fruit1 = {
name: 'Apple',
price: '2',
color: 'red'
};
const fruit2 = {
price: '2',
name: 'Apple',
color: 'red'
};
console.log(ObjCompare(fruit1,fruit2))
输出:
true
在这个程序中,ObjCompare()
函数中的第一个 if
语句用于检查两个对象内的属性或键的长度。
如果它们不相等,函数将返回 false
并且不会进入循环。即使我们更改属性的顺序或任何对象的键,此方法也能正常工作。你还可以更改此功能以一次比较三个或更多对象。
相关文章
在 Angular 中上传文件
发布时间:2023/04/14 浏览次数:71 分类:Angular
-
本教程演示了如何在 Angular 中上传任何文件。我们还将介绍如何在文件上传时显示进度条,并在上传完成时显示文件上传完成消息。
Angular 中所有 Mat 图标的列表
发布时间:2023/04/14 浏览次数:91 分类:Angular
-
本教程演示了在哪里可以找到 Angular 中所有 Mat 图标的列表以及如何使用它们。
Angular 2 中的复选框双向数据绑定
发布时间:2023/04/14 浏览次数:139 分类:Angular
-
本教程演示了如何一键标记两个复选框。这篇有 Angular 的文章将着眼于执行复选框双向数据绑定的不同方法。
在 AngularJS 中重新加载页面
发布时间:2023/04/14 浏览次数:142 分类:Angular
-
我们可以借助 windows.location.reload 和 reload 方法在 AngularJS 中重新加载页面。
在 AngularJs 中设置 Select From Typescript 的默认选项值
发布时间:2023/04/14 浏览次数:78 分类:Angular
-
本教程提供了在 AngularJs 中从 TypeScript 中设置 HTML 标记选择的默认选项的解释性解决方案。
在 AngularJS 中启用 HTML5 模式
发布时间:2023/04/14 浏览次数:150 分类:Angular
-
本文讨论如何在 AngularJS 应用程序上启用带有深度链接的 HTML5 模式。
在 AngularJs 中加载 spinner
发布时间:2023/04/14 浏览次数:107 分类:Angular
-
我们将介绍如何在请求加载时添加加载 spinner,并在 AngularJs 中加载数据时停止加载器。
在 Angular 中显示和隐藏
发布时间:2023/04/14 浏览次数:78 分类:Angular
-
本教程演示了 Angular 中的显示和隐藏。在开发商业应用程序时,我们需要根据用户角色或条件隐藏一些数据。我们必须根据该应用程序中的条件显示相同的数据。
在 Angular 中下载文件
发布时间:2023/04/14 浏览次数:104 分类:Angular
-
本教程演示了如何在 angular 中下载文件。我们将介绍如何通过单击按钮在 Angular 中下载文件并显示一个示例。