迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > JavaScript >

在 JavaScript 中比较对象

作者:迹忆客 最近更新:2023/03/11 浏览次数:

本教程将讨论如何手动或使用 JavaScript 中的 JSON.stringify() 函数比较对象。

在 JavaScript 中比较变量相对容易;我们只需要在两个变量之间使用比较运算符 ===。变量可以是任何数据类型,如字符串和整数。

比较运算符返回一个布尔值,它可以是 truefalse,具体取决于被比较的变量。例如,让我们使用比较运算符比较字符串类型的两个变量。

请参考下面的代码。

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 并且不会进入循环。即使我们更改属性的顺序或任何对象的键,此方法也能正常工作。你还可以更改此功能以一次比较三个或更多对象。

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

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 选择器的不同方法。你还将找到许多有用的

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便