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 相关文章推荐
一段利用WSH修改和查看IP配置的代码
May 11 Javascript
JavaScript 判断判断某个对象是Object还是一个Array
Jan 28 Javascript
网页前台通过js非法字符过滤代码(骂人的话等等)
May 26 Javascript
映彩衣的js随笔(js图片切换效果)
Jul 31 Javascript
Javascript仿PHP $_GET获取URL中的参数
May 12 Javascript
JavaScript返回当前会话cookie全部键值对照的方法
Apr 03 Javascript
jQuery实现背景滑动菜单
Dec 02 Javascript
微信小程序开发之实现自定义Toast弹框
Jun 08 Javascript
微信小程序之蓝牙的链接
Sep 26 Javascript
JS实现将二维数组转为json格式字符串操作示例
Jul 12 Javascript
vue+canvas实现移动端手写签名
May 21 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
Oct 30 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的Laravel框架结合MySQL与Redis数据库的使用部署
2016/03/21 PHP
PHP使用GD库输出汉字的方法【测试可用】
2016/11/10 PHP
php实现的双色球算法示例
2017/06/20 PHP
JavaScript起点(严格模式深度了解)
2013/01/28 Javascript
使用GruntJS构建Web程序之合并压缩篇
2014/06/06 Javascript
Three.js学习之文字形状及自定义形状
2016/08/01 Javascript
Javascript 6里的4个新语法
2016/08/25 Javascript
bootstrap中的 form表单属性role=&quot;form&quot;的作用详解
2017/01/20 Javascript
使用jquery datatable和bootsrap创建表格实例代码
2017/03/17 Javascript
原JS实现banner图的常用功能
2017/06/12 Javascript
JavaScript阻止表单提交方法(附代码)
2017/08/15 Javascript
基于vue-ssr的静态网站生成器VuePress 初体验
2018/04/17 Javascript
Angularjs之ngModel中的值验证绑定方法
2018/09/13 Javascript
Vue js 的生命周期(看了就懂)(推荐)
2019/03/29 Javascript
vue cli 3.x 项目部署到 github pages的方法
2019/04/17 Javascript
让 babel webpack vue 配置文件支持智能提示的方法
2019/06/22 Javascript
深度解读vue-resize的具体用法
2020/07/08 Javascript
python实现自动登录人人网并采集信息的方法
2015/06/28 Python
python实现mysql的单引号字符串过滤方法
2015/11/14 Python
基于python if 判断选择结构的实例详解
2019/05/06 Python
python实现的分析并统计nginx日志数据功能示例
2019/12/21 Python
python日期与时间戳的各种转换示例
2020/02/12 Python
Canvas与Image互相转换示例代码
2013/08/09 HTML / CSS
美国领先的奢侈手表在线零售商:WatchMaxx
2017/12/17 全球购物
台湾网友喜爱的综合型网路购物商城:Yahoo! 奇摩购物中心
2018/03/10 全球购物
美国伴娘礼服商店:Evening Collective
2019/10/07 全球购物
日本订房网站,预订日本星级酒店/温泉旅馆:Relux(支持中文)
2020/01/03 全球购物
Python里面search()和match()的区别
2016/09/21 面试题
Java文件和目录(IO)操作
2014/08/26 面试题
财务总经理岗位职责
2014/02/16 职场文书
2014年组织部工作总结
2014/11/14 职场文书
2014酒店客房部工作总结
2014/12/16 职场文书
2015年个人剖析材料范文
2014/12/29 职场文书
单位考核聘任报告
2015/03/02 职场文书
2015年工商局个人工作总结
2015/07/23 职场文书
MySQL数据库如何给表设置约束详解
2022/03/13 MySQL