别再用双层遍历循环来做新旧数组对比，寻找新增元素了！使用array.includes和Set来提升代码可读性

watermelo37

发布于 2025-01-22 21:44:35

3400

代码可运行

文章被收录于专栏：前端专精前端专精

运行总次数：0

代码可运行

一、双层循环遍历

1.1、双循环错误示范

前几天看项目，发现有个新旧数组对比，寻找新增元素的需求竟然是用for写的双循环。大概就像下面这样：

// 假设这是两个数组的真实数据
const array1 = [1, 2, 3, 4, 5, 6, 7, 8];
const array2 = [4, 5, 6, 7, 8];

// 用来存储不重复的元素
const uniqueElements = [];

// 双重循环遍历两个数组
for (let i = 0; i < array1.length; i++) {
    for (let j = 0; j < array2.length; j++) {
        // 检查array1中的元素是否不在array2中
        if (array1[i] !== array2[j]) {
            uniqueElements.push(array1[i]);
        }
    }
}

// 打印不重复的元素
console.log(uniqueElements);

太抽象了，这样代码的？给我一种21世纪用木头刀枪打猎的感觉。还有的是这样写的：

// 假设这是两个数组的真实数据
const array1 = [1, 2, 3, 4, 5, 6, 7, 8];
const array2 = [4, 5, 6, 7, 8];

// 用来存储不重复的元素
let uniqueElements = [];

// 遍历array1中的每个元素
array1.forEach(item1 => {
  // 用另一个forEach来检查array1中的元素是否不在array2中
  let isUnique = array2.forEach((item2, index, array) => {
    return item1 === item2;
  });

  // 如果isUnique为false，说明item1不在array2中
  if (!isUnique) {
    uniqueElements.push(item1);
  }
});

// 打印不重复的元素
console.log(uniqueElements); // 输出: [1, 2, 3]

可是有什么区别吗？forEach看起来是高级一点，但是没有摆脱最基础的逻辑啊，重点是双循环很干，一点都不巧妙。基本的逻辑就是在满足功能、需求和时间效率的基础上，要尽可能少用循环，少用回调，大幅提高代码的可读性和可维护性。

1.2、正确的做法

①使用array.includes()

最基本的就是要会用array.includes()方法，可以少一次循环。

在这段代码中，我们使用 forEach 方法遍历 array1 中的每个元素。对于 array1 中的每个元素 item1，我们使用 includes 方法检查它是否不在 array2 中。如果 item1 不在 array2 中，我们就将它添加到 uniqueElements 数组中。最后，我们打印出 uniqueElements 数组，它包含了 array1 中不在 array2 中的所有元素。

// 假设这是两个数组的真实数据
const array1 = [1, 2, 3, 4, 5, 6, 7, 8];
const array2 = [4, 5, 6, 7, 8];

// 用来存储不重复的元素
let uniqueElements = [];

// 遍历array1中的每个元素
array1.forEach(item1 => {
  // 检查array1中的元素是否不在array2中
  if (!array2.includes(item1)) {
    uniqueElements.push(item1);
  }
});

// 打印不重复的元素
console.log(uniqueElements); // 输出: [1, 2, 3]

②使用set

使用集合先去重，然后通过Set.has（）方法来判断新增元素。

在这个代码中，我们首先创建了一个 Set 对象 set2 来存储 array2 中的所有元素。然后，我们使用 forEach 方法遍历 array1 中的每个元素 item1。对于 array1 中的每个元素，我们检查它是否不在 set2 中。如果不在，我们将其添加到 uniqueElements 数组中。最后，我们打印出 uniqueElements 数组，它包含了 array1 中不在 array2 中的所有元素。

// 假设这是两个数组的真实数据
const array1 = [1, 2, 3, 4, 5, 6, 7, 8];
const array2 = [4, 5, 6, 7, 8];

// 创建一个集合来存储array2中的元素，以便快速查找
const set2 = new Set(array2);

// 用来存储不重复的元素
const uniqueElements = [];

array1.forEach(item1 => {
  // 检查item1是否不在array2的集合中
  if (!set2.has(item1)) {
    uniqueElements.push(item1);
  }
});

// 打印不重复的元素
console.log(uniqueElements); // 应该输出: [1, 2, 3]

这样是不是优雅很多？并且时间效率上也有提高。

既然谈到这里，就简单聊一下array.includes()吧。

二、array.includes()的使用与技巧

2.1、基本语法

arr.includes(searchElement[, fromIndex])

searchElement：需要检查是否包含在数组中的元素。
fromIndex（可选）：开始搜索的索引位置，默认值为 0。如果该值大于数组长度，则返回 false 并且不执行搜索。

2.2、返回值

如果 searchElement 存在于数组中，返回 true。
如果 searchElement 不存在于数组中，返回 false。

2.3、使用技巧

array.includes()用于判断一个数组是否包含一个指定的值，根据情况返回 true 或 false。

2.3.1、用户输入验证

在表单验证中，我们可能需要检查用户输入是否包含某些特定的字符或单词。

const userInput = "Hello, World!";
const bannedWords = ["badword", "offensiveword"];

if (bannedWords.some(word => userInput.includes(word))) {
  console.log("输入包含禁止词汇！");
} else {
  console.log("输入有效。");
}

2.3.2、权限检查

在权限管理系统中，includes() 可以用来检查用户是否具有执行特定操作的权限。

const userPermissions = ["read", "write", "delete"];
const requiredPermission = "delete";

if (userPermissions.includes(requiredPermission)) {
  console.log("用户有权限执行删除操作。");
} else {
  console.log("用户没有权限执行删除操作。");
}

2.4、兼容问题

array.includes() 方法在现代浏览器中得到广泛支持，包括最新版本的 Chrome、Firefox、Safari、Edge 和 Opera。对于不支持 includes() 的旧浏览器，可以使用 Array.prototype.indexOf() 方法作为替代：

if (!Array.prototype.includes) {
  Array.prototype.includes = function(searchElement /*, fromIndex*/)
  {
    'use strict';
    var O = Object(this);
    var len = parseInt(O.length, 10) || 0;
    if (len === 0) {
      return false;
    }
    var fromIndex = !fromIndex || fromIndex < 0 ? 0 : Math.floor(fromIndex);
    for (; fromIndex < len; fromIndex++) {
      if (fromIndex in O && O[fromIndex] === searchElement) {
        return true;
      }
    }
    return false;
  };
}