在 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
并且不会进入循环。即使我们更改属性的顺序或任何对象的键,此方法也能正常工作。你还可以更改此功能以一次比较三个或更多对象。
相关文章
Do you understand JavaScript closures?
发布时间:2025/02/21 浏览次数:108 分类:JavaScript
-
The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.
Do you know about the hidden traps in variables in JavaScript?
发布时间:2025/02/21 浏览次数:178 分类:JavaScript
-
Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av
How much do you know about the Prototype Chain?
发布时间:2025/02/21 浏览次数:150 分类:JavaScript
-
The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start
用 jQuery 检查复选框是否被选中
发布时间:2024/03/24 浏览次数:102 分类:JavaScript
-
在本教程中学习 jQuery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 DOM 操作、提取 JavaScript 属性的 jQuery 方法以及使用 jQuery 选择器的不同方法。你还将找到许多有用的
jQuery 中的 Window.onload 与 $(document).ready
发布时间:2024/03/24 浏览次数:180 分类:JavaScript
-
本教程演示了如何在 jQuery 中使用 Window.onload 和 $(document).ready 事件。