迹忆客 专注技术分享

当前位置:主页 > 学无止境 > 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 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

在 Angular 中上传文件

发布时间:2023/04/14 浏览次数:71 分类:Angular

本教程演示了如何在 Angular 中上传任何文件。我们还将介绍如何在文件上传时显示进度条,并在上传完成时显示文件上传完成消息。

Angular 2 中的复选框双向数据绑定

发布时间:2023/04/14 浏览次数:139 分类:Angular

本教程演示了如何一键标记两个复选框。这篇有 Angular 的文章将着眼于执行复选框双向数据绑定的不同方法。

在 AngularJs 中加载 spinner

发布时间:2023/04/14 浏览次数:107 分类:Angular

我们将介绍如何在请求加载时添加加载 spinner,并在 AngularJs 中加载数据时停止加载器。

在 Angular 中显示和隐藏

发布时间:2023/04/14 浏览次数:78 分类:Angular

本教程演示了 Angular 中的显示和隐藏。在开发商业应用程序时,我们需要根据用户角色或条件隐藏一些数据。我们必须根据该应用程序中的条件显示相同的数据。

在 Angular 中下载文件

发布时间:2023/04/14 浏览次数:104 分类:Angular

本教程演示了如何在 angular 中下载文件。我们将介绍如何通过单击按钮在 Angular 中下载文件并显示一个示例。

扫一扫阅读全部技术教程

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

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便