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 相关文章推荐
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
Feb 22 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
Jan 09 Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
Mar 25 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
Nov 09 Javascript
vue.js将unix时间戳转换为自定义时间格式
Jan 03 Javascript
JS求Number类型数组中最大元素方法
Apr 08 Javascript
vue 表单验证按钮事件交由父组件触发的方法
Dec 17 Javascript
Vue-cli3简单使用(图文步骤)
Apr 30 Javascript
Vue CLI3中使用compass normalize的方法
May 30 Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
Jul 17 Javascript
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
May 14 Javascript
javascript实现点击按钮切换轮播图功能
Sep 23 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中存储用户ID和密码到mysql数据库的方法
2013/02/06 PHP
php递归删除目录下的文件但保留的实例分享
2014/05/10 PHP
php调用mysql存储过程实例分析
2014/12/29 PHP
Mac下php 5升级到php 7的步骤详解
2017/04/26 PHP
PHP保存Base64图片base64_decode的问题整理
2019/11/04 PHP
从javascript语言本身谈项目实战
2006/12/27 Javascript
jQuery在vs2008及js文件中的无智能提示的解决方法
2010/12/30 Javascript
js实现杯子倒水问题自动求解程序
2013/03/25 Javascript
jQuery中;function($,undefined) 前面的分号的用处
2014/12/17 Javascript
JS实现随机乱撞彩色圆球特效的方法
2015/05/05 Javascript
在JS方法中返回多个值的方法汇总
2015/05/20 Javascript
通过javascript进行UTF-8编码的实现方法
2016/06/27 Javascript
React Native基础入门之调试React Native应用的一小步
2018/07/02 Javascript
JavaScript设计模式之原型模式分析【ES5与ES6】
2018/07/26 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
2019/07/22 Javascript
js全屏事件fullscreenchange 实现全屏、退出全屏操作
2019/09/17 Javascript
js实现一款简单踩白块小游戏(曾经很火)
2019/12/02 Javascript
[02:11]2016国际邀请赛中国区预选赛最美TA采访现场玩家
2016/06/28 DOTA
[55:16]Mski vs VGJ.S Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
python扫描proxy并获取可用代理ip的实例
2017/08/07 Python
Python zip函数打包元素实例解析
2019/12/11 Python
使用pytorch实现可视化中间层的结果
2019/12/30 Python
keras tensorflow 实现在python下多进程运行
2020/02/06 Python
python实现Oracle查询分组的方法示例
2020/04/30 Python
Python如何用wx模块创建文本编辑器
2020/06/07 Python
python中@property的作用和getter setter的解释
2020/12/22 Python
详解css3自定义滚动条样式写法
2017/12/25 HTML / CSS
前端canvas动画如何转成mp4视频的方法
2019/06/17 HTML / CSS
意大利在线购买隐形眼镜网站:VisionDirect.it
2019/03/18 全球购物
英国著名药妆店:Superdrug
2021/02/13 全球购物
学校安全检查制度
2014/01/27 职场文书
2015年党风廉政建设目标责任书
2015/05/08 职场文书
Html5新增了哪些功能
2021/04/16 HTML / CSS
Python字典和列表性能之间的比较
2021/06/07 Python
小程序实现文字循环滚动动画
2021/06/14 Javascript
pycharm部署django项目到云服务器的详细流程
2021/06/29 Python