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 相关文章推荐
在你的网页中嵌入外部网页的方法
Apr 02 Javascript
jQuery基本过滤选择器使用介绍
Apr 18 Javascript
js获取下拉列表框中的value和text的值示例代码
Jan 11 Javascript
javascript正则表达式之search()用法实例
Jan 19 Javascript
JavaScript判断DIV内容是否为空的方法
Jan 29 Javascript
JS实现设置ff与ie元素绝对位置的方法
Mar 08 Javascript
详解jQuery中的deferred对象的使用(一)
May 27 Javascript
Ionic快速安装教程
Jun 03 Javascript
js关于getImageData跨域问题的解决方法
Oct 14 Javascript
js中通过getElementsByName访问name集合对象的方法
Oct 31 Javascript
EditPlus中的正则表达式 实战(2)
Dec 15 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
Aug 11 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操作mysqli(示例代码)
2013/10/28 PHP
PHP中实现生成静态文件的方法缓解服务器压力
2014/01/07 PHP
PHP使用curl_multi实现并发请求的方法示例
2018/04/29 PHP
用javascript连接access数据库的方法
2006/11/17 Javascript
浅谈EasyUI中编辑treegrid的方法
2015/03/01 Javascript
JS检测移动端横竖屏的代码
2016/05/30 Javascript
React教程之Props验证的具体用法(Props Validation)
2017/09/04 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
2017/09/07 jQuery
javascript刷新父页面方法汇总详解
2019/10/10 Javascript
vue 移动端记录页面浏览位置的方法
2020/03/11 Javascript
JS面试题中深拷贝的实现讲解
2020/05/07 Javascript
python自然语言编码转换模块codecs介绍
2015/04/08 Python
python动态性强类型用法实例
2015/05/09 Python
python实现爬虫统计学校BBS男女比例(一)
2015/12/31 Python
python数据结构链表之单向链表(实例讲解)
2017/07/25 Python
python+PyQT实现系统桌面时钟
2020/06/16 Python
对python捕获ctrl+c手工中断程序的两种方法详解
2018/12/26 Python
python打包exe开机自动启动的实例(windows)
2019/06/28 Python
python多线程实现TCP服务端
2019/09/03 Python
py-charm延长试用期限实例
2019/12/22 Python
下载与当前Chrome对应的chromedriver.exe(用于python+selenium)
2020/01/14 Python
详解Python中@staticmethod和@classmethod区别及使用示例代码
2020/12/14 Python
css3的图形3d翻转效果应用示例
2014/04/08 HTML / CSS
365 Tickets英国:全球景点门票
2019/07/06 全球购物
关键字final的用法
2013/10/02 面试题
高中毕业生个人自我鉴定
2013/11/24 职场文书
担保书怎么写
2014/04/01 职场文书
个人投资计划书
2014/05/01 职场文书
官僚主义现象查摆问题整改措施
2014/10/04 职场文书
街道党风廉政建设调研报告
2015/01/01 职场文书
幼儿园感谢信
2015/01/21 职场文书
党员年终个人总结
2015/02/14 职场文书
员工工作表扬信
2015/05/05 职场文书
2015秋季开学典礼新闻稿
2015/07/17 职场文书
Python djanjo之csrf防跨站攻击实验过程
2021/05/14 Python
div与span之间的区别与使用介绍
2021/12/06 HTML / CSS