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


Posted in Javascript onDecember 08, 2018

本文实例讲述了JS数组去重的6种方法。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>3water.com 数组去重</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代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码,可得到如下运行结果:

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

Javascript 相关文章推荐
帮助避免错误的Javascript陷阱清单
May 31 Javascript
javascript Object与Function使用
Jan 11 Javascript
Jquery 的扩展方法总结
Oct 01 Javascript
可恶的ie8提示缺少id未定义
Mar 20 Javascript
使用jquery+CSS实现控制打印样式
Dec 31 Javascript
非常酷炫的Bootstrap图片轮播动画
May 27 Javascript
使用BootStrapValidator完成前端输入验证
Sep 28 Javascript
JS实现用户注册时获取短信验证码和倒计时功能
Oct 27 Javascript
Angular实现较为复杂的表格过滤,删除功能示例
Dec 23 Javascript
Vue中axios拦截器如何单独配置token
Dec 27 Javascript
Vue点击切换Class变化,实现Active当前样式操作
Jul 17 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 Vue.js
原生JS实现的放大镜特效示例【测试可用】
Dec 08 #Javascript
JS实现的小火箭发射动画效果示例
Dec 08 #Javascript
jQuery时间戳和日期相互转换操作示例
Dec 07 #jQuery
ES6的Fetch异步请求的实现方法
Dec 07 #Javascript
JavaScript this绑定过程深入详解
Dec 07 #Javascript
React 使用recharts实现散点地图的示例代码
Dec 07 #Javascript
如何手动实现es5中的bind方法详解
Dec 07 #Javascript
You might like
CI框架装载器Loader.php源码分析
2014/11/04 PHP
php+ajax制作无刷新留言板
2015/10/27 PHP
PHP实现防盗链的方法分析
2017/07/25 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
js word表格动态添加代码
2010/06/07 Javascript
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
2012/09/19 Javascript
javascript 用函数语句和表达式定义函数的区别详解
2014/01/06 Javascript
js如何获取object类型里的键值
2014/02/18 Javascript
简单的jQuery入门指引
2015/07/28 Javascript
JavaScript的jQuery库中function的存在和参数问题
2015/08/13 Javascript
jquery采用oop模式class类的使用示例
2016/01/22 Javascript
Bootstrap选项卡动态切换效果
2016/11/28 Javascript
javascript 判断当前浏览器版本并判断ie版本
2017/02/17 Javascript
jQuery日程管理控件glDatePicker用法详解
2017/03/29 jQuery
用vue和node写的简易购物车实现
2017/04/25 Javascript
解决IE7中使用jQuery动态操作name问题
2017/08/28 jQuery
js实现图片粘贴上传到服务器并展示的实例
2017/11/08 Javascript
谈谈vue中mixin的一点理解
2017/12/12 Javascript
解决vue中监听input只能输入数字及英文或者其他情况的问题
2018/08/30 Javascript
vue cli安装使用less的教程详解
2019/07/12 Javascript
基于Linux系统中python matplotlib画图的中文显示问题的解决方法
2017/06/15 Python
python基于递归解决背包问题详解
2019/07/03 Python
python语言线程标准库threading.local解读总结
2019/11/10 Python
世界领先的高品质定制产品平台:Zazzle
2017/07/23 全球购物
远东集团网络工程师面试题
2014/10/20 面试题
Math.round(11.5)等於多少? Math.round(-11.5)等於多少?
2015/01/27 面试题
环境工程求职简历的自我评价范文
2013/10/24 职场文书
25岁生日感言
2014/01/13 职场文书
二年级语文教学反思
2014/02/02 职场文书
幼儿园家长安全责任书
2014/07/22 职场文书
组织生活会发言材料
2014/12/15 职场文书
幼儿园教师辞职信
2019/06/21 职场文书
22句经典语录:送给优柔寡断和胡思乱想的朋友们
2019/12/13 职场文书
上帝为你开了一扇窗之Tkinter常用函数详解
2021/06/02 Python
浅谈JavaScript作用域
2021/12/06 Javascript
深入浅出讲解Java8函数式编程
2022/01/18 Java/Android