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 相关文章推荐
让JavaScript 轻松支持函数重载 (Part 1 - 设计)
Aug 04 Javascript
JSON 学习之JSON in JavaScript详细使用说明
Feb 23 Javascript
jquery常用技巧及常用方法列表集合
Apr 06 Javascript
Mac地址验证的javascript代码
Nov 09 Javascript
js通过location.search来获取页面传来的参数
Sep 11 Javascript
JavaScript操作HTML元素和样式的方法详解
Oct 21 Javascript
详解vue移动端日期选择组件
Feb 22 Javascript
Vue 路由 过渡动效 数据获取方法
Jul 31 Javascript
微信小程序动态添加view组件的实例代码
May 23 Javascript
JavaScript如何获取一个元素的样式信息
Jul 29 Javascript
Vue vm.$attrs使用场景详解
Mar 08 Javascript
NestJs使用Mongoose对MongoDB操作的方法
Feb 22 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防盗链的常用方法小结
2010/07/02 PHP
php向js函数传参的几种方法
2014/08/10 PHP
php中file_get_contents与curl性能比较分析
2014/11/08 PHP
PHP实现动态柱状图改进版
2015/03/30 PHP
浅谈php+phpStorm+xdebug配置方法
2015/09/17 PHP
微信支付开发告警通知实例
2016/07/12 PHP
YII2自动登录Cookie总是失效的解决方法
2017/06/28 PHP
laravel手动创建数组分页的实现代码
2018/06/07 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
Yii框架函数简单用法分析
2019/09/09 PHP
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
2013/06/24 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
2013/12/14 Javascript
js获取腾讯视频ID的方法
2016/10/03 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
2016/11/23 Javascript
React Native使用百度Echarts显示图表的示例代码
2017/11/07 Javascript
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码
2018/05/21 Javascript
vue实现动态按钮功能
2019/05/13 Javascript
Node.js Windows Binary二进制文件安装方法
2019/05/16 Javascript
17道题让你彻底理解JS中的类型转换
2019/08/08 Javascript
Vue中this.$nextTick的作用及用法
2020/02/04 Javascript
解决vue动态下拉菜单 有数据未反应的问题
2020/08/06 Javascript
零基础写python爬虫之HTTP异常处理
2014/11/05 Python
Python K最近邻从原理到实现的方法
2019/08/15 Python
python线程安全及多进程多线程实现方法详解
2019/09/27 Python
Python3 翻转二叉树的实现
2019/09/30 Python
Python+pyftpdlib实现局域网文件互传
2020/08/24 Python
html5 video标签屏蔽右键视频另存为的js代码
2013/11/12 HTML / CSS
HTML5开发动态音频图的实现
2020/07/02 HTML / CSS
英国亚马逊官方网站:Amazon.co.uk
2019/08/09 全球购物
Orlebar Brown官网:设计师泳裤和泳装
2020/12/08 全球购物
幼儿园运动会加油词
2014/02/14 职场文书
党日活动总结
2014/05/07 职场文书
授权委托书格式范文
2014/08/02 职场文书
2015年销售员工作总结范文
2015/04/07 职场文书
中秋节英文祝福语句(14句)
2019/09/11 职场文书
python实现MD5进行文件去重的示例代码
2021/07/09 Python