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传值 判断
Oct 26 Javascript
JavaScript入门教程(10) 认识其他对象
Jan 31 Javascript
js 表单验证方法(实用)
Apr 28 Javascript
JQuery右键菜单插件ContextMenu使用指南
Dec 19 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
Dec 04 Javascript
悬浮广告方法日常收集整理
Mar 18 Javascript
浅谈js的ajax的异步和同步请求的问题
Oct 07 Javascript
Vue.js组件tree实现省市多级联动
Dec 02 Javascript
Node.js中的http请求客户端示例(request client)
May 04 Javascript
慕课网题目之js实现抽奖系统功能
Sep 19 Javascript
详解Vue.js项目API、Router配置拆分实践
Mar 16 Javascript
javascript中闭包closure的深入讲解
Mar 03 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
PHP4之COOKIE支持详解
2006/10/09 PHP
超级退弹代码
2008/07/07 Javascript
ExtJS 2.0实用简明教程 之Border区域布局
2009/04/29 Javascript
Javascript中找到子元素在父元素内相对位置的代码
2012/07/21 Javascript
jquery实现显示已选用户
2014/07/21 Javascript
jquery使用remove()方法删除指定class子元素
2015/03/26 Javascript
jquery显示loading图片直到网页加载完成的方法
2015/06/25 Javascript
js如何判断输入字符串长度
2015/12/16 Javascript
基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard
2016/06/17 Javascript
JS+CSS3实现超炫的散列画廊特效
2016/07/16 Javascript
图文讲解vue的v-if使用方法
2019/02/11 Javascript
JavaScript如何把两个数组对象合并过程解析
2019/10/10 Javascript
jQuery实现飞机大战小游戏
2020/07/05 jQuery
JavaScript缓动动画函数的封装方法
2020/11/25 Javascript
python聊天程序实例代码分享
2013/11/18 Python
python爬虫使用cookie登录详解
2017/12/27 Python
python实现数据导出到excel的示例--普通格式
2018/05/03 Python
python筛选出两个文件中重复行的方法
2018/05/31 Python
python实现切割url得到域名、协议、主机名等各个字段的例子
2019/07/25 Python
分享PyCharm的几个使用技巧
2019/11/10 Python
python 使用while循环输出*组成的菱形实例
2020/04/12 Python
新版Pycharm中Matplotlib不会弹出独立的显示窗口的问题
2020/06/02 Python
使用css3实现的windows8开机加载动画
2014/12/09 HTML / CSS
实例讲解CSS3中的border-radius属性
2015/08/18 HTML / CSS
详解Html5中video标签那些属性和方法
2019/07/01 HTML / CSS
KIKO比利时官网:意大利彩妆品牌
2017/07/23 全球购物
澳大利亚男士西服品牌:M.J.Bale
2018/02/06 全球购物
小学防溺水制度
2014/01/29 职场文书
2015年社区计生工作总结
2015/04/21 职场文书
廉洁自律证明
2015/06/24 职场文书
2016年六一文艺汇演开幕词
2016/03/04 职场文书
mysql优化
2021/04/06 MySQL
浅谈redis整数集为什么不能降级
2021/07/25 Redis
Window server中安装Redis的超详细教程
2021/11/17 Redis
python程序的组织结构详解
2021/12/06 Python
Django框架之路由用法
2022/06/10 Python