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代码
Mar 05 Javascript
js操作二级联动实现代码
Jul 27 Javascript
javascript学习笔记(二十) 获得和设置元素的特性(属性)
Jun 20 Javascript
JavaScript中的ubound函数使用实例
Nov 04 Javascript
jQuery实现仿Google首页拖动效果的方法
May 04 Javascript
jQuery获取与设置iframe高度的方法
Aug 01 Javascript
JQuery.validationEngine表单验证插件(推荐)
Dec 10 Javascript
vue组件传递对象中实现单向绑定的示例
Feb 28 Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
May 30 Javascript
vue实现滚动鼠标滚轮切换页面
Dec 13 Vue.js
微信小程序实现下拉加载更多商品
Dec 29 Javascript
JS class语法糖的深入剖析
Jul 07 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 字符过滤类,用于过滤各类用户输入的数据
2009/05/27 PHP
Wordpress php 分页代码
2009/10/21 PHP
一漂亮的PHP图片验证码实例
2014/03/21 PHP
JSON 编辑器实现代码
2009/12/06 Javascript
onkeypress字符按键兼容所有浏览器使用介绍
2013/04/24 Javascript
jQuery中ajax和post处理json的不同示例对比
2014/11/02 Javascript
node.js中的console.time方法使用说明
2014/12/09 Javascript
node.js中的console.assert方法使用说明
2014/12/10 Javascript
在JavaScript中访问字符串的子串
2015/07/07 Javascript
全面解析Bootstrap中form、navbar的使用方法
2016/05/30 Javascript
原生js代码实现图片放大境效果
2016/10/30 Javascript
基于vue2.0+vuex的日期选择组件功能实现
2017/03/13 Javascript
jQuery 添加样式属性的优先级别方法(推荐)
2017/06/08 jQuery
微信小程序搜索组件wxSearch实例详解
2017/06/08 Javascript
jQuery实现拖动效果的实例代码
2017/06/25 jQuery
详解vue mint-ui源码解析之loadmore组件
2017/10/11 Javascript
javaScript字符串工具类StringUtils详解
2017/12/08 Javascript
react脚手架如何配置less和ant按需加载的方法步骤
2018/11/28 Javascript
Vue 封装防刷新考试倒计时组件的实现
2020/06/05 Javascript
解决echarts数据二次渲染不成功的问题
2020/07/20 Javascript
[03:17]DOTA2英雄基础教程 剧毒术士
2013/12/12 DOTA
Python中optparser库用法实例详解
2018/01/26 Python
详解Python 装饰器执行顺序迷思
2018/08/08 Python
python 通过麦克风录音 生成wav文件的方法
2019/01/09 Python
Windows环境下Python3.6.8 importError: DLLload failed:找不到指定的模块
2020/11/01 Python
如何创建一个Flask项目并进行简单配置
2020/11/18 Python
Python datetime模块的使用示例
2021/02/02 Python
五款漂亮的纯CSS3动画按钮的实例教程
2014/11/21 HTML / CSS
整理的15个非常有用的 HTML5 开发教程和速查手册
2011/10/18 HTML / CSS
求职毕业生自荐书
2014/02/08 职场文书
2015年党日活动总结范文
2015/03/25 职场文书
Oracle中update和select 关联操作
2022/01/18 Oracle
2022漫威和DC电影上映作品
2022/04/05 欧美动漫
vue中控制mock在开发环境使用,在生产环境禁用方式
2022/04/06 Vue.js
解决vue中provide inject的响应式监听
2022/04/19 Vue.js
在Oracle表中进行关键词搜索的过程
2022/06/10 Oracle