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中面向对象技术的模拟
Sep 25 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件
Dec 21 Javascript
Javascript 实现复制(Copy)动作方法大全
Jun 20 Javascript
JavaScript实现简单获取当前网页网址的方法
Nov 09 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
Mar 01 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
May 07 Javascript
Vue-cli-webpack搭建斗鱼直播步骤详解
Nov 17 Javascript
JS中的事件委托实例浅析
Mar 22 Javascript
vue2.x集成百度UEditor富文本编辑器的方法
Sep 21 Javascript
基于vue-cli、elementUI的Vue超简单入门小例子(推荐)
Apr 17 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
May 30 Javascript
微信小程序组件传值图示过程详解
Jul 31 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
在DC的漫画和电影中,蝙蝠侠的宿敌,小丑的真名是什么?
2020/04/09 欧美动漫
PHP创建桌面快捷方式的实例代码
2014/02/17 PHP
PHP把数字转成人民币大写的函数分享
2014/06/30 PHP
自制PHP框架之设计模式
2017/05/07 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
Laravel多用户认证系统示例详解
2018/03/13 PHP
深入理解JS中的变量及作用域、undefined与null
2014/03/04 Javascript
获取当前点击按钮的id用this.id实现
2014/03/17 Javascript
JS实现简单的键盘打字的效果
2015/04/24 Javascript
js获取图片宽高的方法
2015/11/25 Javascript
jQuery版本升级踩坑大全
2016/01/12 Javascript
Bootstrap每天必学之轮播(Carousel)插件
2016/04/25 Javascript
jQuery判断checkbox选中状态
2016/05/12 Javascript
浅谈JS之tagNaem和nodeName
2016/09/13 Javascript
JS实现“隐藏与显示”功能(多种方法)
2016/11/24 Javascript
深入理解vue.js双向绑定的实现原理
2016/12/05 Javascript
jQuery初级教程之网站品牌列表效果
2017/08/02 jQuery
基于Angularjs-router动态改变Title值的问题
2018/08/30 Javascript
如何在selenium中使用js实现定位
2020/08/18 Javascript
python函数中return后的语句一定不会执行吗?
2017/07/06 Python
python dict 相同key 合并value的实例
2019/01/21 Python
Python 实现的 Google 批量翻译功能
2019/08/26 Python
通过实例了解python property属性
2019/11/01 Python
python实现将两个文件夹合并至另一个文件夹(制作数据集)
2020/04/03 Python
如何利用Python写个坦克大战
2020/11/18 Python
Python结合百度语音识别实现实时翻译软件的实现
2021/01/18 Python
TripAdvisor德国:全球领先的旅游网站
2017/12/07 全球购物
Banana Republic英国官网:香蕉共和国,GAP集团旗下偏贵族风
2018/04/24 全球购物
C语言怎样定义和声明全局变量和函数最好
2013/11/26 面试题
电子商务应届生求职信
2013/11/16 职场文书
小学生期末评语
2014/04/21 职场文书
初中优秀教师事迹材料
2014/08/18 职场文书
2015年体育教师个人工作总结
2015/05/12 职场文书
初三语文教学反思
2016/03/03 职场文书
导游词之无锡梅园
2019/11/28 职场文书
Python基础之操作MySQL数据库
2021/05/06 Python