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 相关文章推荐
JQuery弹出炫丽对话框的同时让背景变灰色
May 22 Javascript
基于javascript的COOkie的操作实现只能点一次
Dec 26 Javascript
js判断浏览器类型及设备(移动页面开发)
Jul 30 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
Jan 23 Javascript
jQuery 获取页面li数组并删除不在数组中的key
Aug 02 Javascript
bootstrap PrintThis打印插件使用详解
Feb 20 Javascript
vue2.0模拟锚点的实例
Mar 14 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
May 15 Javascript
vue-cli3.0配置及使用注意事项详解
Sep 05 Javascript
vue中选项卡点击切换且能滑动切换功能的实现代码
Nov 25 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
Mar 09 Javascript
Openlayers显示瓦片网格信息的方法
Sep 28 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类
2006/11/25 PHP
linux系统下php安装mbstring扩展的二种方法
2014/01/20 PHP
PHP采用curl模仿用户登陆新浪微博发微博的方法
2014/11/07 PHP
php中switch与ifelse的效率区别及适用情况分析
2015/02/12 PHP
php自定义类fsocket模拟post或get请求的方法
2015/07/31 PHP
汇总PHPmailer群发Gmail的常见问题
2016/02/24 PHP
javascript 短路法代码精简
2009/08/20 Javascript
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
2010/05/06 Javascript
javascript 实用的文字链提示框效果
2010/06/30 Javascript
js用闭包遍历树状数组的方法
2014/03/19 Javascript
更快的异步执行(setTimeout多浏览器)
2014/08/12 Javascript
js实现class样式的修改、添加及删除的方法
2015/01/20 Javascript
第一次接触神奇的前端框架vue.js
2016/12/01 Javascript
Node连接mysql数据库方法介绍
2017/02/07 Javascript
微信小程序实现文件、图片上传功能
2020/08/18 Javascript
jQuery实现简单全选框
2020/09/13 jQuery
Vue-router编程式导航的两种实现代码
2021/03/04 Vue.js
用Python中的__slots__缓存资源以节省内存开销的方法
2015/04/02 Python
Python编程中的文件操作攻略
2015/10/16 Python
使用Python编写一个最基础的代码解释器的要点解析
2016/07/12 Python
python导入时小括号大作用
2017/01/10 Python
Python字典操作详细介绍及字典内建方法分享
2018/01/04 Python
python中的turtle库函数简单使用教程
2018/07/23 Python
python实现两张图片的像素融合
2019/02/23 Python
浅析Python 引号、注释、字符串
2019/07/25 Python
Python configparser模块配置文件过程解析
2020/03/03 Python
python不相等的两个字符串的 if 条件判断为True详解
2020/03/12 Python
Python字符串split及rsplit方法原理详解
2020/06/29 Python
深入浅出CSS3 background-clip,background-origin和border-image教程
2011/01/27 HTML / CSS
Ivory Isle Designs美国/加拿大:婚礼和活动文具公司
2018/08/21 全球购物
大一学生假期实习的自我评价
2013/10/12 职场文书
渔夫的故事教学反思
2014/02/14 职场文书
用人单位终止解除劳动合同证明书
2014/10/06 职场文书
七年级话题作文之执着
2019/11/19 职场文书
pytorch锁死在dataloader(训练时卡死)
2021/05/28 Python
SQL实现LeetCode(175.联合两表)
2021/08/04 MySQL