不是，你不会还在用双层遍历循环来做新旧数组对比，寻找新增元素吧？

一、双层循环遍历

1.1、双循环错误示范

1.2、正确的做法

①使用array.includes()

②使用set

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

2.1、基本语法

2.2、返回值

2.3、使用技巧

2.3.1、用户输入验证

2.3.2、权限检查

2.4、兼容问题

三、总结

一、双层循环遍历

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;};
}