JavaScript数组去重实现方法小结


Posted in Javascript onJanuary 17, 2020

本文实例讲述了JavaScript数组去重实现方法。分享给大家供大家参考,具体如下:

一、ES3方法:

var arr = ['a', 'a', 'b', 'b', 'b', 'c', 'e', 'f', 1, 2, 2, 3, 3, 3];

创建一个空数组与原来数组进行比较

//与前面的数组进行比较(不会改变原数组)
function deleteRepeat() {
  var result = [];
  label: for(var i=0; i<arr.length; i++) {
    for(var j=0; j<result.length; j++) {
      if(result[j] == arr[i]) {
        continue label;
      }
    }
    result.push(arr[i]);
  }
  return result;
}
//与后面的进行比较(不会改变原数组)
function deleteRepeat() {
  var result = [];
  for(var i = 0; i < arr.length; i++) {
    for(var j = i+1; j < arr.length; j++) {
      if(arr[i] == arr[j]) {
        j = ++i;
      }
    }
    result.push(arr[i]);
  }
  return result;
}
// splice()方法 (会改变原数组)
function deleteRepeat() {
  for(var i = 0; i < arr.length; i++) {
    for(var j = i+1; j < arr.length; j++) {
      if(arr[i] == arr[j]) {
        arr.splice(j, 1);
        j--;
      }
    }
  }
  return arr;
}
// 利用对象的属性不能重复特点(不会改变原数组)
function deleteRepeat() {
  var result = [];
  var object = {};
  for(var i = 0; i < arr.length; i++) {
    var t = arr[i];
    if(!object[t]) {
      result.push(t);
      object[t] = true;
    } 
  }
  return result;
}
// 先排序再去重(只需要进行一次for循环、 会改变原数组)
function deleteRepeat() {
  var arr1 = arr.sort();
  var result = [];
  for(var i = 0; i < arr1.length; i++) {
    if(arr1[i] != arr1[i+1]) {
      result.push(arr1[i]);
    }
  }
  return result;
}

二、ES5方法:

利用IndexOf()方法

map()方法或forEach()方法或filter()方法

三、ES6方法

var a = [1, 2, 2, 3, 3, 3];
[...new Set(a)];
[1, 2, 3]

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

Javascript 相关文章推荐
JS window.opener返回父页面的应用
Oct 24 Javascript
jquery html动态生成select标签出问题的解决方法
Nov 20 Javascript
理解JavaScript中Promise的使用
Jan 18 Javascript
简单实现js页面切换功能
Jan 10 Javascript
Bootstrap Navbar Component实现响应式导航
Oct 08 Javascript
JavaScript闭包和范围实例详解
Dec 19 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
解决修复npm安装全局模块权限的问题
May 17 Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
Sep 27 Javascript
puppeteer库入门初探
Jan 09 Javascript
JavaScript制作3D旋转相册
Aug 02 Javascript
Javascript节流函数throttle和防抖函数debounce
Dec 03 Javascript
JS面向对象之多选框实现
Jan 17 #Javascript
JavaScript基于面向对象实现的无缝滚动轮播示例
Jan 17 #Javascript
JS面向对象之单选框实现
Jan 17 #Javascript
原生JavaScript实现的无缝滚动功能详解
Jan 17 #Javascript
vuejs中父子组件之间通信方法实例详解
Jan 17 #Javascript
React Hooks 实现和由来以及解决的问题详解
Jan 17 #Javascript
详解搭建一个vue-cli的移动端H5开发模板
Jan 17 #Javascript
You might like
php设计模式 FlyWeight (享元模式)
2011/06/26 PHP
php session_start()出错原因分析及解决方法
2013/10/28 PHP
WordPress中重置文章循环的rewind_posts()函数讲解
2016/01/11 PHP
Smarty模板类内部原理实例分析
2019/07/03 PHP
PHP实现提取多维数组指定一列的方法总结
2019/12/04 PHP
jQuery中需要注意的细节问题小结
2011/12/06 Javascript
JQuery中关于jquery.js与jquery.min.js的比较探讨
2013/05/15 Javascript
Jquery实现自定义tooltip示例代码
2014/02/12 Javascript
JS实现5秒钟自动封锁div层的方法
2015/02/20 Javascript
jQuery获得包含margin的outerWidth和outerHeight的方法
2015/03/25 Javascript
jQuery事件绑定与解除绑定实现方法
2015/04/15 Javascript
JQuery实现鼠标移动图片显示描述层的方法
2015/06/25 Javascript
jQuery中的siblings用法实例分析
2015/12/24 Javascript
基于jQuery实现美观且实用的倒计时实例代码
2015/12/30 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
2017/02/15 Javascript
jQuery EasyUI结合zTree树形结构制作web页面
2017/09/01 jQuery
深入理解requireJS-实现一个简单的模块加载器
2018/01/15 Javascript
浅谈Webpack下多环境配置的思路
2018/06/27 Javascript
详解Vue中使用插槽(slot)、聚类插槽
2019/04/12 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
2019/09/12 Javascript
[02:14]完美“圣”典2016风云人物:xiao8专访
2016/12/01 DOTA
[01:54]TI珍贵瞬间系列(五):压力
2020/08/29 DOTA
[01:06:59]完美世界DOTA2联赛PWL S2 Magma vs FTD 第一场 11.29
2020/12/02 DOTA
python实现类似ftp传输文件的网络程序示例
2014/04/08 Python
Python使用cx_Oracle模块将oracle中数据导出到csv文件的方法
2015/05/16 Python
python实现猜单词小游戏
2020/05/22 Python
python 已知平行四边形三个点,求第四个点的案例
2020/04/12 Python
举例讲解Python装饰器
2020/12/24 Python
出口公司经理求职简历中的自我评价
2013/10/13 职场文书
安全生产承诺书
2014/03/26 职场文书
《小动物过冬》教学反思
2014/04/17 职场文书
2014年行政工作总结
2014/11/19 职场文书
售后服务承诺函格式
2015/01/21 职场文书
2019暑假阅读倡议书
2019/06/24 职场文书
matplotlib之pyplot模块实现添加子图subplot的使用
2021/04/25 Python
Android Gradle 插件自定义Plugin实现注意事项
2022/06/16 Java/Android