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 相关文章推荐
js资料toString 方法
Mar 13 Javascript
jQuery源码分析-01总体架构分析
Nov 14 Javascript
js实现倒计时时钟的示例代码
Dec 17 Javascript
jQuery 2.0.3 源码分析之core(一)整体架构
May 27 Javascript
用JavaScript实现用一个DIV来包装文本元素节点
Sep 09 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
Jun 08 Javascript
ionic中列表项增加和删除的实现方法
Jan 22 Javascript
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
JS动态添加的div点击跳转到另一页面实现代码
Sep 30 Javascript
JS实现的文件拖拽上传功能示例
May 21 Javascript
微信小程序下拉框搜索功能的实现方法
Jul 31 Javascript
vue 查看dist文件里的结构(多种方式)
Jan 17 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
海贼王:最美的悬赏令!
2020/03/02 日漫
php 魔术函数使用说明
2010/02/21 PHP
PHP计划任务之关闭浏览器后仍然继续执行的函数
2010/07/22 PHP
使用php+Ajax实现唯一校验实现代码[简单应用]
2011/11/29 PHP
犀利的js 函数集合
2009/06/11 Javascript
浏览器解析js生成的html出现样式问题的解决方法
2012/04/16 Javascript
关于IE中getElementsByClassName不能用的问题解决方法
2013/08/26 Javascript
浅析jquery的作用与优势
2013/12/02 Javascript
javascript中数组的多种定义方法和常用函数简介
2014/05/09 Javascript
jQuery实现点击该行即可删除HTML表格行
2014/10/17 Javascript
JavaScript获取Url里的参数
2014/12/18 Javascript
JavaScript中用getDate()方法返回指定日期的教程
2015/06/09 Javascript
原生js三级联动的简单实现代码
2016/06/07 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
2017/04/21 Javascript
jquery submit()不能提交表单的解决方法
2017/04/24 jQuery
JS和Canvas实现图片的预览压缩和上传功能
2018/03/30 Javascript
解析vue data不可以使用箭头函数问题
2018/07/03 Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
2018/09/06 Javascript
js的对象与函数详解
2019/01/21 Javascript
vue中v-model对select的绑定操作
2020/08/31 Javascript
JS代码实现页面切换效果
2021/01/10 Javascript
python连接mysql并提交mysql事务示例
2014/03/05 Python
Django-Rest-Framework 权限管理源码浅析(小结)
2018/11/12 Python
HTML5 语音搜索(淘宝店语音搜素)
2013/01/03 HTML / CSS
美国女性服饰销售网站:Nasty Gal(坏女孩)
2016/07/26 全球购物
皮姆斯勒语言学习:Pimsleur Language Programs
2018/06/30 全球购物
BASIC HOUSE官方旗舰店:韩国著名的服装品牌
2018/09/27 全球购物
软件工程专业推荐信
2013/10/28 职场文书
公司年会主持词
2014/03/22 职场文书
学校学雷锋活动总结
2014/06/26 职场文书
乡领导班子四风问题对照检查材料
2014/09/25 职场文书
银行贷款收入证明
2014/10/17 职场文书
高考学习决心书
2015/02/04 职场文书
交通事故赔偿起诉书
2015/05/20 职场文书
未婚证明格式
2015/06/15 职场文书
美甲店的创业计划书模板
2019/08/23 职场文书