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 相关文章推荐
用ADODB.Stream转换
Jan 22 Javascript
Jquery 基础学习笔记之文档处理
May 29 Javascript
javascript 清空form表单中某种元素的值
Dec 26 Javascript
jquery 单击li防止重复加载的实现代码
Dec 24 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
Jul 31 Javascript
JSON字符串转JSON对象
Jul 31 Javascript
AngularJS ng-app 指令实例详解
Jul 30 Javascript
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
Dec 25 Javascript
React为 Vue 引入容器组件和展示组件的教程详解
May 03 Javascript
js实现随机点名程序
Sep 17 Javascript
jquery实现吸顶导航效果
Jan 08 jQuery
详解react组件通讯方式(多种)
May 06 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 mysql数据库操作类
2008/06/04 PHP
PHP中读写文件实现代码
2011/10/20 PHP
解析linux下安装memcacheq(mcq)全过程笔记
2013/06/27 PHP
php自定义加密与解密程序实例
2014/12/31 PHP
解析WordPress中函数钩子hook的作用及基本用法
2015/12/22 PHP
PHP中加速、缓存扩展的区别和作用详解(eAccelerator、memcached、xcache、APC )
2016/07/09 PHP
YII框架学习笔记之命名空间、操作响应与视图操作示例
2019/04/30 PHP
JavaScript Event学习第十一章 按键的检测
2010/02/10 Javascript
JQuery验证工具类搜集整理
2013/01/16 Javascript
Js点击弹出下拉菜单效果实例
2013/08/12 Javascript
javascript按位非运算符的使用方法
2013/11/14 Javascript
javascript异步编程的4种方法
2014/02/19 Javascript
JS网页在线获取鼠标坐标值的方法
2015/02/28 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
2015/11/24 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
2016/05/23 Javascript
原生js的数组除重复简单实例
2016/05/24 Javascript
浅谈几种常用的JS类定义方法
2016/06/08 Javascript
jQuery 实现图片的依次加载图片功能
2017/07/06 jQuery
微信小程序中setInterval的使用方法
2017/09/29 Javascript
JavaScript编程设计模式之构造器模式实例分析
2017/10/25 Javascript
vue和webpack打包项目相对路径修改的方法
2018/06/15 Javascript
在vue中读取本地Json文件的方法
2018/09/06 Javascript
javascript数组去重方法总结(推荐)
2019/03/20 Javascript
JS FormData对象使用方法实例详解
2020/02/12 Javascript
python3.5实现socket通讯示例(TCP)
2017/02/07 Python
解决Python2.7中IDLE启动没有反应的问题
2018/11/30 Python
Django框架之DRF 基于mixins来封装的视图详解
2019/07/23 Python
Python word文本自动化操作实现方法解析
2020/11/05 Python
HTML5+lufylegend实现游戏中的卷轴
2016/02/29 HTML / CSS
Gap加拿大官网:Gap Canada
2017/08/24 全球购物
公立医院改革实施方案
2014/03/14 职场文书
五四演讲稿范文
2014/09/03 职场文书
四风个人对照检查材料思想汇报
2014/09/25 职场文书
岳麓书院导游词
2015/02/03 职场文书
综合办公室主任岗位职责
2015/04/01 职场文书
血轮眼轮回眼特效 html+css
2021/03/31 HTML / CSS