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 相关文章推荐
jQuery的deferred对象详解
Nov 12 Javascript
JavaScript如何自定义trim方法
Jul 28 Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
Sep 04 Javascript
JavaScript Split()方法
Dec 18 Javascript
JavaScript操作 url 中 search 部分方法函数
Jun 15 Javascript
JavaScript数据结构之数组的表示方法示例
Apr 12 Javascript
使用JavaScript实现表格编辑器(实例讲解)
Aug 02 Javascript
vue返回上一页面时回到原先滚动的位置的方法
Dec 20 Javascript
js实现倒计时器自定义时间和暂停
Feb 25 Javascript
了解前端理论:rscss和rsjs
May 23 Javascript
JavaScript链式调用原理与实现方法详解
May 16 Javascript
vue 使用localstorage实现面包屑的操作
Nov 16 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
使用adodb lite解决问题
2006/12/31 PHP
ThinkPHP模板引擎之导入资源文件方法详解
2014/06/18 PHP
ThinkPHP使用PHPExcel实现Excel数据导入导出完整实例
2014/07/22 PHP
PHP中比较时间大小实例
2014/08/21 PHP
php通过记录IP来防止表单重复提交方法分析
2014/12/16 PHP
thinkPHP5.0框架模块设计详解
2017/03/18 PHP
php格式文件打开的四种方法
2018/02/24 PHP
PHP常用工具函数小结【移除XSS攻击、UTF8与GBK编码转换等】
2019/04/27 PHP
传智播客学习之java 反射
2009/11/22 Javascript
基于jquery的动态创建表格的插件
2011/04/05 Javascript
JS中图片缓冲loading技术的实例代码
2013/08/29 Javascript
js jquery ajax的几种用法总结(及优缺点介绍)
2014/01/28 Javascript
JS遍历Json字符串中键值对先转成JSON对象再遍历
2014/08/15 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
2014/12/18 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
2015/05/18 Javascript
js控制多图左右滚动切换效果代码分享
2015/08/26 Javascript
基于jQuery实现的向下滑动二级菜单效果代码
2015/08/31 Javascript
JS折半插入排序算法实例
2015/12/02 Javascript
使用jQuery给input标签设置默认值
2016/06/20 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
2017/02/09 Javascript
tab栏切换原理
2017/03/22 Javascript
JS Math对象与Math方法实例小结
2019/07/05 Javascript
python的schedule定时任务模块二次封装方法
2019/02/19 Python
Python合并同一个文件夹下所有PDF文件的方法
2019/03/11 Python
python2.7实现复制大量文件及文件夹资料
2019/08/31 Python
Python pip安装模块提示错误解决方案
2020/05/22 Python
python装饰器三种装饰模式的简单分析
2020/09/04 Python
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
2013/01/06 HTML / CSS
北美个性化礼品商店:Things Remembered
2018/06/12 全球购物
文明教师事迹材料
2014/01/16 职场文书
大班亲子运动会方案
2014/06/10 职场文书
市场调查策划方案
2014/06/10 职场文书
社团活动总结书
2014/06/27 职场文书
教师批评与自我批评发言稿
2014/10/15 职场文书
SqlServer: 如何更改表的文件组?(进而改变存储位置)
2021/04/05 SQL Server
Redisson实现Redis分布式锁的几种方式
2021/08/07 Redis