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 相关文章推荐
Jquery 常用方法经典总结
Jan 28 Javascript
asp.net+js 实现无刷新上传解析csv文件的代码
May 17 Javascript
struts2+jquery组合验证注册用户是否存在
Apr 30 Javascript
javascript实现C语言经典程序题
Nov 29 Javascript
关于JS中的方法是否加括号的问题
Jul 27 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
Sep 05 Javascript
微信小程序 网络请求(post请求,get请求)
Jan 17 Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
Mar 13 Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
Aug 19 Javascript
基于JavaScript表单脚本(详解)
Oct 18 Javascript
JavaScript原型对象、构造函数和实例对象功能与用法详解
Aug 04 Javascript
js+css实现扇形导航效果
Aug 18 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:风雨欲来 路在何方?
2006/10/09 PHP
php实现处理输入转义字符的代码
2015/11/08 PHP
Laravel中获取路由参数Route Parameters的五种方法示例
2017/09/29 PHP
JavaScript ECMA-262-3 深入解析.第三章.this
2011/09/28 Javascript
对于this和$(this)的个人理解
2013/09/08 Javascript
Jquery attr(&quot;checked&quot;) 返回checked或undefined 获取选中失效
2013/10/10 Javascript
javascript实现判断鼠标的状态
2015/07/10 Javascript
学习JavaScript设计模式之状态模式
2016/01/08 Javascript
jquery按回车键实现表单提交的简单实例
2016/05/25 Javascript
微信小程序开发图片拖拽实例详解
2017/05/05 Javascript
详解Angular2学习笔记之Html属性绑定
2018/01/03 Javascript
在angular 6中使用 less 的实例代码
2018/05/13 Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
2021/01/30 Javascript
jQuery操作attr、prop、val()/text()/html()、class属性
2019/05/23 jQuery
Vue快速实现通用表单验证的示例代码
2020/01/09 Javascript
开发Node CLI构建微信小程序脚手架的示例
2020/03/27 Javascript
功能完善的小程序日历组件的实现
2020/03/31 Javascript
详解JS预解析原理
2020/06/16 Javascript
浅谈python中scipy.misc.logsumexp函数的运用场景
2016/06/23 Python
Python实现定时任务
2017/02/08 Python
Python 多线程Threading初学教程
2017/08/22 Python
PyQt5每天必学之滑块控件QSlider
2018/04/20 Python
用Python写一个自动木马程序
2019/09/17 Python
Python tkinter三种布局实例详解
2020/01/06 Python
jupyter notebook 恢复误删单元格或者历史代码的实现
2020/04/17 Python
python3中sys.argv的实例用法
2020/04/24 Python
python中JWT用户认证的实现
2020/05/18 Python
python中altair可视化库实例用法
2021/01/26 Python
BudgetAir印度:预订航班、酒店和汽车租赁
2019/07/07 全球购物
JMS中Topic和Queue有什么区别
2013/05/15 面试题
自荐信模版
2013/10/24 职场文书
数学检讨书1000字
2014/02/24 职场文书
爱心活动计划书
2014/04/26 职场文书
红领巾广播站广播稿
2014/10/19 职场文书
观后感开头
2015/06/19 职场文书
承诺书应该怎么写?
2019/09/10 职场文书