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 相关文章推荐
初学js插入节点appendChild insertBefore使用方法
Jul 04 Javascript
js实现的仿新浪微博完美的时间组件升级版
Dec 20 Javascript
关于js new Date() 出现NaN 的分析
Oct 23 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
Apr 26 Javascript
深入理解选择框脚本[推荐]
Dec 13 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
Dec 29 Javascript
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 jQuery
React实践之Tree组件的使用方法
Sep 30 Javascript
webpack4实现不同的导出类型
Apr 09 Javascript
vue2.0基于vue-cli+element-ui制作树形treeTable
Apr 30 Javascript
解决vue打包后刷新页面报错:Unexpected token
Aug 27 Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
Mar 04 Javascript
原生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
解析如何通过PHP函数获取当前运行的环境 来进行判断执行逻辑(小技巧)
2013/06/25 PHP
ThinkPHP中I(),U(),$this-&gt;post()等函数用法
2014/11/22 PHP
PHP入门教程之自定义函数用法详解(创建,调用,变量,参数,返回值等)
2016/09/11 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
用jQuery技术实现Tab页界面之二
2009/09/21 Javascript
jQuery实现切换页面布局使用介绍
2011/10/09 Javascript
jquery事件重复绑定的快速解决方法
2014/01/03 Javascript
详细分析JavaScript函数定义
2015/07/16 Javascript
浅谈js中对象的使用
2016/08/11 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
2017/01/04 Javascript
微信小程序之网络请求简单封装实例详解
2017/06/28 Javascript
JS表单传值和URL编码转换
2018/03/03 Javascript
javascript实现5秒倒计时并跳转功能
2019/06/20 Javascript
react中Suspense的使用详解
2019/09/01 Javascript
精读《Vue3.0 Function API》
2020/05/20 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
2020/08/11 Javascript
手写Vue2.0 数据劫持的示例
2021/03/04 Vue.js
[03:41]2018完美盛典-《Fight With Us》
2018/12/16 DOTA
Python操作列表之List.insert()方法的使用
2015/05/20 Python
python实现批量下载新浪博客的方法
2015/06/15 Python
Python 网络爬虫--关于简单的模拟登录实例讲解
2018/06/01 Python
对Python中Iterator和Iterable的区别详解
2018/10/18 Python
Python参数解析模块sys、getopt、argparse使用与对比分析
2019/04/02 Python
win8.1安装Python 2.7版环境图文详解
2019/07/01 Python
学习和使用python的13个理由
2019/07/30 Python
三陽商会官方网站:Sanyo iStore
2019/05/15 全球购物
碧欧泉Biotherm加拿大官方网站:法国高端护肤品牌
2019/10/18 全球购物
资深生产主管自我评价
2013/09/22 职场文书
小学生学雷锋演讲稿
2014/04/25 职场文书
项目投资合作意向书
2014/07/29 职场文书
银行奉献演讲稿
2014/09/16 职场文书
上班迟到检讨书300字
2014/10/18 职场文书
大学生村官工作心得体会
2016/01/23 职场文书
2019年公司卫生管理制度样本
2019/08/21 职场文书
微信小程序scroll-view不能左右滑动问题的解决方法
2021/07/09 Javascript
排查MySQL生产环境索引没有效果
2022/04/11 MySQL