JS学习笔记之数组去重实现方法小结


Posted in Javascript onMay 29, 2019

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

操作的数组

let arr=[0,1,23,'1',4,2,8,5,5,6,9,'asdasd','5']

1、
利用ES6 的set 来进行数组去重

JS学习笔记之数组去重实现方法小结

console.time("set")
  let type1=new Set(arr)
  console.log(type1)
  type1=[...type1]
  console.log(type1)
  console.timeEnd("set")

2、
  利用indexof和forEach 多次遍历来搜索是否有相同的值

JS学习笔记之数组去重实现方法小结

console.time("indexOf")
  let type2=[]
  arr.forEach(function(item,index){
    if(type2.indexOf(item)<0){
      type2.push(item)
    }
  })
  console.log(type2)
  console.timeEnd("indexOf")

3、
双循环实现数组去重

splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。

缺点  会对元素组造成影响,所以建议先拷贝数组

JS学习笔记之数组去重实现方法小结

console.time("splice")
let arr2=[0,1,23,'1',4,2,8,5,5,6,9,'asdasd','5']
  for(let i=0;i<arr2.length;i++){
    for(let j=i+1;j<arr2.length;j++){
      if(arr2[i]===arr2[j]){
        arr2.splice(i,1)
      }
    }
  }
  console.log(arr2)
console.timeEnd("splice")

4、

利用 对象属性  不重复的特性  以及 typeof  来实现数组去重

JS学习笔记之数组去重实现方法小结

console.time("obj属性")
let obj1={}
let type4=[]
arr.forEach(function(item,index){
  let tf=typeof item
  if(!obj1[tf+"_"+item]){
    obj1[tf+"_"+item]=true
  }
})
console.log(obj1)
for(item in obj1){
  type4.push(item.split("_")[0].toLowerCase()=="number"?+item.split("_")[1]:item.split("_")[1])
}
obj1=null;
console.log(type4)
console.timeEnd("obj属性")

5、

利用sort排序 相同值就会被排列到一起

会对元素组产生操作
JS学习笔记之数组去重实现方法小结

console.time("sort排序")
let arr3=[0,1,23,'1',4,2,8,5,5,6,9,'asdasd','5']
arr3.sort()
for(let i=0;i<arr3.length;i++){
  if(arr3[i]===arr3[i+1]){
    arr3.splice(i,1)
  }
}
console.log(arr3)
console.timeEnd("sort排序")

效果展示

JS学习笔记之数组去重实现方法小结

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

Javascript 相关文章推荐
用javascript实现页面打印的三种方法
Mar 05 Javascript
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
Oct 24 Javascript
JavaScript判断变量是否为undefined的两种写法区别
Dec 04 Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
Mar 24 Javascript
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 jQuery
H5基于iScroll实现下拉刷新和上拉加载更多
Jul 18 Javascript
vue文件运行的方法教学
Feb 12 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
May 16 Javascript
vue elementui tree 任意级别拖拽功能代码
Aug 31 Javascript
基于javascript原生判断DOM是否加载完毕
Oct 14 Javascript
jQuery实现回到顶部效果
Oct 19 jQuery
js 实现验证码输入框示例详解
Sep 23 Javascript
基于Vue实现电商SKU组合算法问题
May 29 #Javascript
JS学习笔记之闭包小案例分析
May 29 #Javascript
JS学习笔记之贪吃蛇小游戏demo实例详解
May 29 #Javascript
elementUI select组件value值注意事项详解
May 29 #Javascript
elementUI select组件使用及注意事项详解
May 29 #Javascript
通过vue手动封装on、emit、off的代码详解
May 29 #Javascript
el-select数据过多懒加载的解决(loadmore)
May 29 #Javascript
You might like
PHP常用函数小技巧
2008/09/11 PHP
php将文件夹打包成zip文件的简单实现方法
2016/10/04 PHP
PHP实现单文件、多个单文件、多文件上传函数的封装示例
2019/09/02 PHP
让回调函数 showResponse 也带上参数的代码
2007/08/13 Javascript
js获取GridView中行数据的两种方法 分享
2013/07/13 Javascript
jquery获取当前点击对象的value方法
2014/02/28 Javascript
html的DOM中Event对象onabort事件用法实例
2015/01/21 Javascript
jQuery的几个我们必须了解的特点
2015/05/03 Javascript
jQuery带时间的日期控件代码分享
2015/08/26 Javascript
JavaScript必知必会(十) call apply bind的用法说明
2016/06/08 Javascript
Backbone View 之间通信的三种方式
2016/08/09 Javascript
Angularjs手动解析表达式($parse)
2016/10/12 Javascript
jquery PrintArea 实现票据的套打功能(代码)
2017/03/17 Javascript
BootStrap中的Fontawesome 图标
2017/05/25 Javascript
JS实现加载时锁定HTML页面元素的方法
2017/06/24 Javascript
Bootstrap datepicker日期选择器插件使用详解
2017/07/26 Javascript
在vue项目中引入highcharts图表的方法(详解)
2018/03/05 Javascript
JS 实现获取验证码 倒计时功能
2018/10/29 Javascript
浅谈webpack devtool里的7种SourceMap模式
2019/01/14 Javascript
vue-cli和v-charts实现可视化图表过程解析
2019/10/08 Javascript
python统计文本字符串里单词出现频率的方法
2015/05/26 Python
Python使用multiprocessing实现一个最简单的分布式作业调度系统
2016/03/14 Python
python中子类继承父类的__init__方法实例
2016/12/15 Python
django反向解析URL和URL命名空间的方法
2018/06/05 Python
python实现简单的文字识别
2018/11/27 Python
Pytorch对Himmelblau函数的优化详解
2020/02/29 Python
paramiko使用tail实时获取服务器的日志输出详解
2020/12/06 Python
关于多种方式完美解决Python pip命令下载第三方库的问题
2020/12/21 Python
亚洲领先的旅游体验市场:Voyagin
2019/11/23 全球购物
什么是"引用"?申明和使用"引用"要注意哪些问题?
2016/03/03 面试题
群众路线批评与自我批评
2014/02/06 职场文书
中学生学雷锋演讲稿
2014/04/26 职场文书
土建工程师岗位职责
2014/06/10 职场文书
政风行风建设整改方案
2014/10/27 职场文书
基层工作经验证明样本
2014/11/16 职场文书
2015年秋季学校开学标语
2015/07/16 职场文书