一、双层循环遍历
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; }; }
三、总结
这类问题的重点在于能不能突破基础思路，突破基础思路是从程序员入门变成中级甚至高级的第一步，如果所有需求都通过最基础的业务逻辑来做，是得不到成长的。
丰富的前端内容请看：各种前端问题的技巧和解决方案
博客不应该只有代码和解决方案，重点应该在于给出解决方案的同时分享思维模式，只有思维才能可持续地解决问题，只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助，麻烦您点个赞支持一下，还可以收藏起来以备不时之需，有疑问和错误欢迎在评论区指出~
