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 相关文章推荐
input+select(multiple) 实现下拉框输入值
May 21 Javascript
JS 的应用开发初探(mootools)
Dec 19 Javascript
某人初学javascript的时候写的学习笔记
Dec 30 Javascript
JavaScript中的面向对象介绍
Jun 30 Javascript
如何获取JQUERY AJAX返回的JSON结果集实现代码
Dec 10 Javascript
JS获取农历日期具体实例
Nov 14 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
May 30 Javascript
使用js获取地址栏参数的方法推荐(超级简单)
Jun 14 Javascript
详解在vue-cli项目中安装node-sass
Jun 21 Javascript
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
详解js类型判断
May 22 Javascript
JavaScript实现随机点名器实例详解
May 07 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
239军机修复记
2021/03/02 无线电
优化PHP程序的方法小结
2012/02/23 PHP
浅析HTTP消息头网页缓存控制以及header常用指令介绍
2013/06/28 PHP
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
php生成HTML文件的类方法
2019/10/11 PHP
用showModalDialog弹出页面后,提交表单总是弹出一个新窗口
2009/07/18 Javascript
对Jquery中的ajax再封装,简化操作示例
2014/02/12 Javascript
jQuery判断一个元素是否可见的方法
2015/06/05 Javascript
使用jquery动态加载Js文件和Css文件
2015/10/24 Javascript
php基于redis处理session的方法
2016/03/14 Javascript
Angularjs 设置全局变量的方法总结
2016/10/20 Javascript
详解js中Number()、parseInt()和parseFloat()的区别
2016/12/20 Javascript
JavaScript html5利用FileReader实现上传功能
2020/03/27 Javascript
JavaScript严格模式下关于this的几种指向详解
2017/07/12 Javascript
浅谈关于angularJs中使用$.ajax的注意点
2017/08/12 Javascript
vue轮播图插件vue-awesome-swiper
2017/11/27 Javascript
使用layui实现树形结构的方法
2019/09/20 Javascript
layui文件上传控件带更改后数据传值的方法
2019/09/23 Javascript
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
2020/12/15 Vue.js
ES6的循环与可迭代对象示例详解
2021/01/31 Javascript
详解React中共享组件逻辑的三种方式
2021/02/02 Javascript
Python实现比较两个列表(list)范围
2015/06/12 Python
python读取中文txt文本的方法
2018/04/12 Python
使用 Django Highcharts 实现数据可视化过程解析
2019/07/31 Python
手机使用python操作图片文件(pydroid3)过程详解
2019/09/25 Python
python通过实例讲解反射机制
2019/10/17 Python
CSS3系列之3D制作方法案例
2017/08/14 HTML / CSS
印度最大的酒店品牌网络:OYO Rooms
2016/07/24 全球购物
生产车间主任的个人自我鉴定
2013/10/25 职场文书
大学生职业生涯规划书模板
2014/01/03 职场文书
祖国在我心中演讲稿
2014/01/15 职场文书
质量承诺书怎么写
2014/05/24 职场文书
公安局副政委班子个人对照检查材料
2014/10/04 职场文书
2014年保安个人工作总结
2014/11/13 职场文书
美丽心灵观后感
2015/06/01 职场文书
转学证明范本
2015/06/19 职场文书