别再用双层遍历循环来做新旧数组对比，寻找新增元素了！

目录

一、双层循环遍历

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写的双循环。大概就像下面这样：

  1. // 假设这是两个数组的真实数据
  2. const array1 = [1, 2, 3, 4, 5, 6, 7, 8];
  3. const array2 = [4, 5, 6, 7, 8];
  4.  
  5. // 用来存储不重复的元素
  6. const uniqueElements = [];
  7.  
  8. // 双重循环遍历两个数组
  9. for (let i = 0; i < array1.length; i++) {
  10.     for (let j = 0; j < array2.length; j++) {
  11.         // 检查array1中的元素是否不在array2中
  12.         if (array1[i] !== array2[j]) {
  13.             uniqueElements.push(array1[i]);
  14.         }
  15.     }
  16. }
  17.  
  18. // 打印不重复的元素
  19. console.log(uniqueElements);

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

  1. // 假设这是两个数组的真实数据
  2. const array1 = [1, 2, 3, 4, 5, 6, 7, 8];
  3. const array2 = [4, 5, 6, 7, 8];
  4.  
  5. // 用来存储不重复的元素
  6. let uniqueElements = [];
  7.  
  8. // 遍历array1中的每个元素
  9. array1.forEach(item1 => {
  10.   // 用另一个forEach来检查array1中的元素是否不在array2中
  11.   let isUnique = array2.forEach((item2, index, array) => {
  12.     return item1 === item2;
  13.   });
  14.  
  15.   // 如果isUnique为false，说明item1不在array2中
  16.   if (!isUnique) {
  17.     uniqueElements.push(item1);
  18.   }
  19. });
  20.  
  21. // 打印不重复的元素
  22. 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 中的所有元素。

  1. // 假设这是两个数组的真实数据
  2. const array1 = [1, 2, 3, 4, 5, 6, 7, 8];
  3. const array2 = [4, 5, 6, 7, 8];
  4.  
  5. // 用来存储不重复的元素
  6. let uniqueElements = [];
  7.  
  8. // 遍历array1中的每个元素
  9. array1.forEach(item1 => {
  10.   // 检查array1中的元素是否不在array2中
  11.   if (!array2.includes(item1)) {
  12.     uniqueElements.push(item1);
  13.   }
  14. });
  15.  
  16. // 打印不重复的元素
  17. console.log(uniqueElements); // 输出: [1, 2, 3]

②使用set

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

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

  1. // 假设这是两个数组的真实数据
  2. const array1 = [1, 2, 3, 4, 5, 6, 7, 8];
  3. const array2 = [4, 5, 6, 7, 8];
  4.  
  5. // 创建一个集合来存储array2中的元素，以便快速查找
  6. const set2 = new Set(array2);
  7.  
  8. // 用来存储不重复的元素
  9. const uniqueElements = [];
  10.  
  11. array1.forEach(item1 => {
  12.   // 检查item1是否不在array2的集合中
  13.   if (!set2.has(item1)) {
  14.     uniqueElements.push(item1);
  15.   }
  16. });
  17.  
  18. // 打印不重复的元素
  19. 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、用户输入验证

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

  1. const userInput = "Hello, World!";
  2. const bannedWords = ["badword", "offensiveword"];
  3.  
  4. if (bannedWords.some(word => userInput.includes(word))) {
  5.   console.log("输入包含禁止词汇！");
  6. } else {
  7.   console.log("输入有效。");
  8. }

2.3.2、权限检查

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

  1. const userPermissions = ["read", "write", "delete"];
  2. const requiredPermission = "delete";
  3.  
  4. if (userPermissions.includes(requiredPermission)) {
  5.   console.log("用户有权限执行删除操作。");
  6. } else {
  7.   console.log("用户没有权限执行删除操作。");
  8. }

2.4、兼容问题

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

  1. if (!Array.prototype.includes) {
  2.   Array.prototype.includes = function(searchElement /*, fromIndex*/)
  3.   {
  4.     'use strict';
  5.     var O = Object(this);
  6.     var len = parseInt(O.length, 10) || 0;
  7.     if (len === 0) {
  8.       return false;
  9.     }
  10.     var fromIndex = !fromIndex || fromIndex < 0 ? 0 : Math.floor(fromIndex);
  11.     for (; fromIndex < len; fromIndex++) {
  12.       if (fromIndex in O && O[fromIndex] === searchElement) {
  13.         return true;
  14.       }
  15.     }
  16.     return false;
  17.   };
  18. }

三、总结

        这类问题的重点在于能不能突破基础思路，突破基础思路是从程序员入门变成中级甚至高级的第一步，如果所有需求都通过最基础的业务逻辑来做，是得不到成长的。

        丰富的前端内容请看：各种前端问题的技巧和解决方案

        博客不应该只有代码和解决方案，重点应该在于给出解决方案的同时分享思维模式，只有思维才能可持续地解决问题，只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助，麻烦您点个赞支持一下，还可以收藏起来以备不时之需，有疑问和错误欢迎在评论区指出~

文章知识点与官方知识档案匹配，可进一步学习相关知识
算法技能树首页概览62647 人正在系统学习中
注：本文转载自blog.csdn.net的Watermelo617的文章"https://blog.csdn.net/RenGJ010617/article/details/139374250"。版权归原作者所有，此博客不拥有其著作权，亦不承担相应法律责任。如有侵权，请联系我们删除。
复制链接
相关推荐
发表评论

评论记录：

未查询到任何数据！