自建社区网站邢台网站建设行情

自建社区网站,邢台网站建设行情,互动的网站,wordpress怎么弄中文❤ 写在前面 如果觉得对你有帮助的话#xff0c;点个小❤❤ 吧#xff0c;你的支持是对我最大的鼓励~ 个人独立开发wx小程序#xff0c;感谢支持#xff01;前言#xff1a;为什么需要数组去重#xff1f; 想象一下#xff0c;你正在整理一个装满各种颜色袜子的抽屉。你…❤ 写在前面如果觉得对你有帮助的话点个小❤❤ 吧你的支持是对我最大的鼓励~个人独立开发wx小程序感谢支持前言为什么需要数组去重想象一下你正在整理一个装满各种颜色袜子的抽屉。你会发现有很多双相同颜色的袜子为了节省空间你会把重复的袜子拿出来。在前端开发中处理数据时也会遇到类似情况——数组中的重复元素会浪费资源、影响性能甚至导致数据错误。今天我们就来探索前端开发中数组去重的七种方法每种方法都有其独特的“武器特性”方法一Set大法ES6推荐这是目前最简洁、最高效的方法就像一把锋利的瑞士军刀constarr[1,2,2,3,4,4,5];constuniqueArr[...newSet(arr)];console.log(uniqueArr);// [1, 2, 3, 4, 5]原理图原始数组 → Set容器自动去重 → 展开为数组 → 去重后的数组优点代码简洁性能优秀缺点无法处理特殊对象去重如对象、NaN等特殊情况需注意方法二Filter IndexOf经典组合这种方法像是侦探办案检查每个元素是否是第一次出现functionunique(arr){returnarr.filter((item,index){returnarr.indexOf(item)index;});}constarr[苹果,香蕉,苹果,橙子,香蕉];console.log(unique(arr));// [苹果, 香蕉, 橙子]流程图开始 ↓ 遍历数组每个元素 ↓ 检查当前元素首次出现位置是否等于当前位置 ↓ 是 → 保留元素 ↓ 否 → 过滤掉 ↓ 返回新数组方法三Reduce累积器使用reduce像是用漏斗过滤只保留第一次遇到的元素constarr[1,2,2,3,3,3,4];constuniqueArrarr.reduce((acc,current){if(!acc.includes(current)){acc.push(current);}returnacc;},[]);console.log(uniqueArr);// [1, 2, 3, 4]方法四双层循环最原始的方法这是最基础的实现方式就像手动检查每双袜子functionunique(arr){constresult[];for(leti0;iarr.length;i){letisDuplicatefalse;for(letj0;jresult.length;j){if(arr[i]result[j]){isDuplicatetrue;break;}}if(!isDuplicate){result.push(arr[i]);}}returnresult;}方法五Object键值法利用对象的键名不可重复的特性functionunique(arr){constobj{};constresult[];arr.forEach(item{if(!obj[item]){obj[item]true;result.push(item);}});returnresult;}⚠️注意这种方法会将数字和字符串视为相同键如1和1会被认为是重复的。方法六Map数据结构Map比Object更适合处理复杂类型的去重functionunique(arr){constmapnewMap();constresult[];arr.forEach(item{if(!map.has(item)){map.set(item,true);result.push(item);}});returnresult;}// 可以处理对象引用去重constobj1{name:张三};constobj2{name:张三};constarr[obj1,obj2,obj1];console.log(unique(arr).length);// 2obj1只出现一次obj2是不同引用方法七排序相邻去重法先排序然后比较相邻元素functionunique(arr){constsortedArr[...arr].sort();constresult[sortedArr[0]];for(leti1;isortedArr.length;i){if(sortedArr[i]!sortedArr[i-1]){result.push(sortedArr[i]);}}returnresult;}特殊场景处理1. 对象数组去重// 根据对象的某个属性去重functionuniqueByKey(arr,key){constmapnewMap();returnarr.filter(item{if(!map.has(item[key])){map.set(item[key],true);returntrue;}returnfalse;});}constusers[{id:1,name:Alice},{id:2,name:Bob},{id:1,name:Alice},// 重复ID];console.log(uniqueByKey(users,id));// 前两个对象2. 处理NaN的重复// Set可以正确处理NaN去重constarr[NaN,NaN,1,2,1];console.log([...newSet(arr)]);// [NaN, 1, 2]性能对比实验让我们通过一个简单的性能测试来看看各种方法的效率差异// 生成测试数据consttestArray[];for(leti0;i10000;i){testArray.push(Math.floor(Math.random()*1000));}// 测试函数执行时间functiontestPerformance(fn,arr){conststartperformance.now();fn(arr);constendperformance.now();returnend-start;}// 测试结果通常如下时间从短到长// 1. Set方法 √// 2. Object键值法// 3. Map方法// 4. Filter IndexOf// 5. Reduce方法// 6. 排序相邻法// 7. 双层循环选择合适的方法决策流程图开始选择去重方法 ↓ 需要考虑性能吗 → 是 → 使用Set方法最快 ↓否 数组中有对象吗 → 是 → 使用Map或根据属性去重 ↓否 需要兼容老浏览器吗 → 是 → 使用FilterindexOf或Object键值法 ↓否 代码简洁更重要吗 → 是 → 使用Set或Reduce ↓否 使用FilterindexOf平衡选择总结与最佳实践现代项目首选[...new Set(arr)]- 简洁高效对象数组去重使用Map或根据特定属性去重兼容性要求Filter IndexOf或Object键值法性能敏感场景Set方法最快其次是Object键值法代码可读性Reduce方法语义清晰适合函数式编程实战小挑战试试这个综合题目// 有一个混合类型的数组如何去除所有类型的重复constmixedArray[1,1,1,true,true,true,null,undefined,null,{a:1},{a:1},// 注意这两个对象看起来一样但引用不同[1,2],[1,2]];// 你的去重策略是什么提示可能需要结合多种方法或者自定义比较函数结语数组去重是前端开发中的基础但重要技能。不同的场景需要不同的方法就像工具箱里的不同工具各有各的用途。掌握这些方法不仅能提高代码效率还能让你的解决方案更加优雅。希望这篇博客能帮助你在下次遇到数组去重问题时能够自信地选择最合适的方法