千万不要错过的JavaScript高效对比数组差异方法

JavaScript对比数组差异方法 JavaScript对比数组差异 JavaScript对比数组 2023-05-19 11:05:13 511人浏览独家记忆

摘要

目录基础概念什么是数组？什么是对象？需求分析解决方案第一步：比较arr1中存在但在arr2中不存在的元素第二步：比较arr2中存在但在arr1中不存在的元素第三步：比较arr1和ar

前端开发中，我们通常需要对比两个数组对象的差异。这其中有很多种方法，但是有些方法会带来一些问题，例如低效率、不准确等。因此，本篇文章旨在介绍一种高效准确的方法——写一个方法对比两个数组对象的差异项。

基础概念

在学习本文的主题之前，我们需要了解一些基础概念：

什么是数组？

在计算机编程中，数组是一种数据结构，可以存储一系列相同类型的数据。数组中每个元素都有一个特定的编号（索引），可以通过索引访问数组中的元素。

什么是对象？

在javascript中，对象是一种复合数据类型，可以存储相关数据和函数的集合。对象中的数据以属性的形式存储，每个属性都有一个唯一的名称和对应的值。对象中的函数称为方法，在调用时需要指定对象来执行。

需求分析

现在我们有两个数组对象arr1和arr2，请问如何比较它们之间的差异项？

我们需要输出arr1与arr2差异项的集合，这其中包含三部分：

在arr1中存在但在arr2中不存在的元素
在arr2中存在但在arr1中不存在的元素
在arr1和arr2中都存在但不相等的元素

解决方案

第一步：比较arr1中存在但在arr2中不存在的元素

我们可以通过遍历arr1，并判断该元素是否存在于arr2中，如果不存在就将其加入到差异项集合中。以下是实现该功能的代码片段：

const diff = [];
for (let i = 0; i < arr1.length; i++) {
  const item = arr1[i];
  if (!arr2.includes(item)) {
    diff.push(item);
  }
}

第二步：比较arr2中存在但在arr1中不存在的元素

同样地，我们可以通过遍历arr2，并判断该元素是否存在于arr1中，如果不存在就将其加入到差异项集合中。以下是实现该功能的代码片段：

for (let i = 0; i < arr2.length; i++) {
  const item = arr2[i];
  if (!arr1.includes(item)) {
    diff.push(item);
  }
}

第三步：比较arr1和arr2中都存在但不相等的元素

最后一步，我们需要比较arr1和arr2中都存在但不相等的元素，这里我们可以利用es6中的Array.filter()方法。以下是实现该功能的代码片段：

arr1.filter((item, index) => {
  return item !== arr2[index];
}).forEach((item) => {
  diff.push(item);
});

完整代码

上述三个步骤组成了我们的完整代码。以下是完整代码片段：

function getDiff(arr1, arr2) {
  const diff = [];
  for (let i = 0; i < arr1.length; i++) {
    const item = arr1[i];
    if (!arr2.includes(item)) {
      diff.push(item);
    }
  }
  for (let i = 0; i < arr2.length; i++) {
    const item = arr2[i];
    if (!arr1.includes(item)) {
      diff.push(item);
    }
  }
  arr1.filter((item, index) => {
    return item !== arr2[index];
  }).forEach((item) => {
    diff.push(item);
  });
  return diff;
}

测试案例

为了验证我们的代码是否正确，我们需要进行测试。以下是几个测试案例：

const arr1 = [1, 2, 3, 4, 5];
const arr2 = [2, 3, 4, 5, 6];

const diff1 = getDiff(arr1, arr2);
console.log(diff1); // [1, 6]

const arr3 = ['a', 'b', 'c'];
const arr4 = ['a', 'b', 'd', 'e'];

const diff2 = getDiff(arr3, arr4);
console.log(diff2); // ['c', 'd', 'e']

const arr5 = [{id: 1}, {id: 2}, {id: 3}];
const arr6 = [{id: 1}, {id: 2}, {id: 4}];

const diff3 = getDiff(arr5, arr6);
console.log(diff3); // [{id: 3}, {id: 4}]