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 相关文章推荐
IE事件对象(The Internet Explorer Event Object)
Jun 27 Javascript
Javascript无阻塞加载具体方式
Jun 28 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
Dec 09 Javascript
JavaScript汉诺塔问题解决方法
Apr 21 Javascript
JS实现动态移动层及拖动浮层关闭的方法
Apr 30 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
Jul 10 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
Dec 14 Javascript
JQuery和HTML5 Canvas实现弹幕效果
Jan 04 Javascript
利用NPM淘宝的node.js镜像加速nvm
Mar 27 Javascript
Node.js利用断言模块assert进行单元测试的方法
Sep 28 Javascript
记一次vue去除#问题处理经过小结
Jan 24 Javascript
Vue.js中该如何自己维护路由跳转记录
May 19 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 获取全局变量的代码
2011/04/21 PHP
PHP的Yii框架中Model模型的学习教程
2016/03/29 PHP
php使用number_format函数截取小数的方法分析
2016/05/27 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
PHPStorm2020.1永久激活及下载更新至2020(推荐)
2020/09/25 PHP
JQuery 将元素显示在屏幕的中央的代码
2010/02/27 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战二)
2013/08/21 Javascript
js+div实现图片滚动效果代码
2014/02/10 Javascript
NodeJs中的VM模块详解
2015/05/06 NodeJs
javascript通过获取html标签属性class实现多选项卡的方法
2015/07/27 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
2016/07/27 Javascript
Node.js中使用jQuery的做法
2016/08/17 Javascript
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
2018/08/22 Javascript
python实现一个简单的并查集的示例代码
2018/03/19 Python
python矩阵的转置和逆转实例
2018/12/12 Python
python读取文件名并改名字的实例
2019/01/07 Python
python3 assert 断言的使用详解 (区别于python2)
2019/11/27 Python
如何创建一个Flask项目并进行简单配置
2020/11/18 Python
HTML5离线应用与客户端存储的实现
2018/05/03 HTML / CSS
html5写一个BUI折叠菜单插件的实现方法
2019/09/11 HTML / CSS
东南亚旅游平台:The Trip Guru
2018/01/01 全球购物
美国领先的医疗警报服务:Philips Lifeline
2018/03/12 全球购物
解释一下ArrayList Vector和LinkedList的实现和区别
2013/04/26 面试题
阿尔卡特(中国)的面试题目
2014/08/20 面试题
行政人员岗位职责
2013/12/08 职场文书
员工薪酬福利制度
2014/01/17 职场文书
酒店管理毕业生自我鉴定
2014/03/02 职场文书
课程改革实施方案
2014/03/16 职场文书
树转促学习心得体会
2014/09/10 职场文书
临时租车协议范本
2014/09/23 职场文书
银行优秀员工推荐信
2015/03/24 职场文书
社区青年志愿者活动总结
2015/05/06 职场文书
党务工作者主要事迹材料
2015/11/03 职场文书
python爬取企查查企业信息之selenium自动模拟登录企查查
2021/04/08 Python
Python机器学习之逻辑回归
2021/05/11 Python
CSS中Single Div 绘图技巧的实现
2021/06/18 HTML / CSS