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实例教程(19) 使用HoTMetal(6)
Dec 23 Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
Jun 24 Javascript
jQuery实现简单的日期输入格式化控件
Mar 12 Javascript
浅析Node.js中的内存泄漏问题
Jun 23 Javascript
七个不允许错过的jQuery小技巧
Dec 21 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
Feb 17 Javascript
jQuery实现的网格线绘制方法
Jun 20 Javascript
JS选取DOM元素的简单方法
Jul 08 Javascript
JavaScript新增样式规则(推荐)
Jul 19 Javascript
js阻止默认右键的下拉菜单方法
Jan 02 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
Apr 14 Javascript
javascript实现视频弹幕效果(两个版本)
Nov 28 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/08/27 PHP
通过php快速统计某个数据库中每张表的数据量
2012/09/04 PHP
PHP设置图片文件上传大小的具体实现方法
2013/10/11 PHP
php 二维数组时间排序实现代码
2016/11/19 PHP
PHP实现的策略模式简单示例
2017/08/25 PHP
Laravel框架实现model层的增删改查(CURD)操作示例
2018/05/12 PHP
JQuery UI DatePicker中z-index默认为1的解决办法
2010/09/28 Javascript
js实现通用的微信分享组件示例
2014/03/10 Javascript
javascript修改IMG标签的src问题
2014/03/28 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
2016/07/07 Javascript
基于jQuery实现瀑布流页面
2017/04/11 jQuery
浅谈struts1 &amp; jquery form 文件异步上传
2017/05/25 jQuery
Node.js开发第三方微信公众平台
2017/06/05 Javascript
javascript实现二叉树的代码
2017/06/08 Javascript
浅谈Vue.js路由管理器 Vue Router
2018/08/16 Javascript
Webpack按需加载打包chunk命名的方法
2019/09/22 Javascript
Vue组件模板及组件互相引用代码实例
2020/03/11 Javascript
vue 子组件和父组件传值的示例
2020/09/11 Javascript
[42:32]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第二局
2016/02/27 DOTA
python通过正则查找微博@(at)用户的方法
2015/03/13 Python
Python的多维空数组赋值方法
2018/04/13 Python
python判断列表的连续数字范围并分块的方法
2018/11/16 Python
Python自动化测试笔试面试题精选
2020/03/12 Python
python爬虫学习笔记之pyquery模块基本用法详解
2020/04/09 Python
如何向scrapy中的spider传递参数的几种方法
2020/11/18 Python
html5指南-1.html5全局属性(html5 global attributes)深入理解
2013/01/07 HTML / CSS
HTML5 Canvas鼠标与键盘事件demo示例
2013/07/04 HTML / CSS
台湾良兴购物网:EcLife
2019/12/01 全球购物
介绍一下常见的木马种类
2014/11/15 面试题
如何选择使用结构还是类
2014/05/30 面试题
索桥的故事教学反思
2014/02/06 职场文书
党的群众路线教育实践活动个人承诺书
2014/05/22 职场文书
小学阳光体育活动总结
2014/07/05 职场文书
员工趣味活动方案
2014/08/27 职场文书
关于清明节的演讲稿
2014/09/13 职场文书
2015年社区综治宣传月活动总结
2015/03/25 职场文书