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代码(自写)
Aug 12 Javascript
js 验证身份证信息有效性
Mar 28 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
Nov 20 Javascript
jQuery替换textarea中换行的方法
Jun 10 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
Sep 02 Javascript
JS经典正则表达式笔试题汇总
Dec 15 Javascript
jq checkbox 的全选并ajax传参的实例
Apr 01 Javascript
vuejs使用递归组件实现树形目录的方法
Sep 30 Javascript
9102了,你还不会移动端真机调试吗
Mar 25 Javascript
JavaScript位置参数实现原理及过程解析
Sep 14 Javascript
微信小程序自定义底部弹出框功能
Nov 18 Javascript
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
Jun 29 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获取中英混合字符串长度的方法
2014/06/07 PHP
javascript addBookmark 加入收藏 多浏览器兼容
2009/08/15 Javascript
用JS写的一个TableView控件代码
2010/01/23 Javascript
js实现动态添加、删除行、onkeyup表格求和示例
2013/08/18 Javascript
jquery实现的一个简单进度条效果实例
2014/05/12 Javascript
js数值计算时使用parseInt进行数据类型转换(jquery)
2014/10/07 Javascript
javascript修改图片src的方法
2015/01/27 Javascript
详解Angular开发中的登陆与身份验证
2016/07/27 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
2016/09/08 Javascript
详解js树形控件—zTree使用总结
2016/12/28 Javascript
vuejs指令详解
2017/02/07 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
2017/02/21 Javascript
js弹出窗口简单实现代码
2017/03/22 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
2017/08/16 Javascript
vue多页面开发和打包正确处理方法
2018/04/20 Javascript
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象,回归迭代和循环】
2018/05/07 Javascript
自己动手封装一个React Native多级联动
2018/09/19 Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
2019/03/01 Javascript
详解vue更改头像功能实现
2019/04/28 Javascript
JavaScript 实现HTML DOM增删改查操作的常见方法详解
2020/01/04 Javascript
JS实现音量控制拖动
2020/01/15 Javascript
javascript实现移动端红包雨页面
2020/06/23 Javascript
vue动画—通过钩子函数实现半场动画操作
2020/08/09 Javascript
用Python遍历C盘dll文件的方法
2015/05/06 Python
python学习之第三方包安装方法(两种方法)
2015/07/30 Python
Python基于百度AI的文字识别的示例
2018/04/21 Python
Python向Excel中插入图片的简单实现方法
2018/04/24 Python
python多环境切换及pyenv使用过程详解
2019/09/27 Python
Python输出指定字符串的方法
2020/02/06 Python
在PyCharm中遇到pip安装 失败问题及解决方案(pip失效时的解决方案)
2020/03/10 Python
python 怎样进行内存管理
2020/11/10 Python
Bose美国官网:购买Bose耳机和音箱
2019/03/10 全球购物
数控技术与应用毕业生自荐信
2013/09/24 职场文书
学术会议邀请函范文
2014/01/22 职场文书
作风建设剖析材料
2014/10/06 职场文书
朋友聚会祝酒词
2015/08/10 职场文书