JS数组去重的6种方法完整实例

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> 数组去重</title> </head> <body> <script> //1.filter:(indexOf)方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素, filter() 不会对空数组进行检测。 filter() 不会改变原始数组。 var arr1 = [7, 7, 7, 8, 8, 8, 82, 82, 839, 49, 329, 8, 3, 3]; var arr1_1 = arr1.filter(function(m, n) { return arr1.indexOf(m) == n; }) document.write(arr1_1 + "<br />"); //2.map:(push indexOf)把每个元素通过函数传递到当前匹配集合中,生成包含返回值的新的 jQuery 对象。 var arr2 = [7, 7, 7, 8, 8, 8, 82, 82, 839, 49, 329, 8, 3, 3]; var arr2_2 = []; arr2.map(function(m, n) { if(arr2.indexOf(arr2[n]) == n) { arr2_2.push(m); } }); document.write(arr2_2 + "<br />"); //3.indexOf(push)搜索数组中的元素,并返回它所在的位置。 var arr3 = [7, 7, 7, 8, 8, 8, 82, 82, 839, 49, 329, 8, 3, 3]; var arr3_3 = []; for(var i = 0; i < arr3.length; i++) { if(arr3_3.indexOf(arr3[i]) == -1) { arr3_3.push(arr3[i]); } } document.write(arr3_3 + "<br />"); //4.splice对数组进行删除、插入、替换,是最强大的数组方法。改变原数组 var arr4 = [7, 7, 7, 8, 8, 8, 82, 82, 839, 49, 329, 8, 3, 3]; for(var i = 0; i < arr4.length; i++) { for(var j = i + 1; j < arr4.length; j++) { if(arr4[i] == arr4[j]) { arr4.splice(j, 1) j--; //别忘记减 } } } document.write(arr4 + "<br />"); //5.push(数组去重一一对比)添加到数组末尾 var arr5 = [7, 7, 7, 8, 8, 8, 82, 82, 839, 49, 329, 8, 3, 3]; function remm(arr) { var arr5_5 = []; for(var i = 0; i < arr5.length; i++) { for(var j = 0; j < arr5.length; j++) { if(arr5[i] == arr5_5[j]) { break; } } if(arr5[i] != arr5_5[j]) { arr5_5.push(arr5[i]); } } return arr5_5; } document.write(remm(arr5) + "<br />"); //6.set数据结构Set类似于数组,但是成员的值都是唯一的,没有重复的值。用set.size表示伪数组长度 var arr6= [7, 7, 7, 8, 8, 8, 82, 82, 839, 49, 329, 8, 3, 3]; var set = new Set(arr6); var newArr = new Array(...set); document.write(newArr+"<br />"); </script> </body> </html>

使用在线HTML/CSS/JavaScript代码运行工具测试上述代码,可得到如下运行结果:

JS数组去重的6种方法完整实例

PS:这里再为大家提供几款相关工具供大家参考使用:

在线去除重复项工具:

在线文本去重复工具:

更多关于JavaScript相关内容还可查看本站专题:《JavaScript数组操作技巧总结》、《JavaScript字符与字符串操作技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript错误与调试技巧总结

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/e8423e13856b255c0c929c441ee59e69.html