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 相关文章推荐
YUI 读码日记之 YAHOO.lang.is*
Mar 22 Javascript
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
Sep 14 Javascript
js获取当前日期代码适用于网页头部
Jun 27 Javascript
使用CSS样式position:fixed水平滚动的方法
Feb 19 Javascript
js判断浏览器类型为ie6时不执行
Jun 15 Javascript
JavaScript子窗口调用父窗口变量和函数的方法
Oct 09 Javascript
手机Web APP如何实现分享多平台功能
Aug 19 Javascript
简单的vue-resourse获取json并应用到模板示例
Feb 10 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
Sep 14 Javascript
vue axios同步请求解决方案
Sep 29 Javascript
Node.js readline 逐行读取、写入文件内容的示例
Mar 01 Javascript
element-ui的回调函数Events的用法详解
Oct 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
使用php判断网页是否gzip压缩
2013/06/25 PHP
php通过ajax实现双击table修改内容
2014/04/28 PHP
搭建基于Docker的PHP开发环境的详细教程
2015/07/01 PHP
在WordPress中使用PHP脚本来判断访客来自什么国家
2015/12/10 PHP
PHP匿名函数和use子句用法实例
2016/03/16 PHP
Laravel 修改默认日志文件名称和位置的例子
2019/10/17 PHP
JavaScript 学习笔记(六)
2009/12/31 Javascript
Jquery插件之打造自定义的select标签
2011/11/30 Javascript
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
2011/12/12 Javascript
JS图片根据鼠标滚动延时加载的实例代码
2013/07/13 Javascript
JS 按钮点击触发(兼容IE、火狐)
2013/08/07 Javascript
js 阻止子元素响应父元素的onmouseout事件具体实现
2013/12/23 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
2014/04/12 Javascript
使用js复制链接中的部分文字的方法
2015/07/30 Javascript
Active控件问题小结(附解决办法)
2016/06/09 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
2016/11/18 Javascript
JavaScript的事件机制详解
2017/01/17 Javascript
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
2017/07/18 Javascript
angularJs利用$scope处理升降序的方法
2018/10/08 Javascript
vue开发中遇到的问题总结
2020/04/07 Javascript
js实现扫雷源代码
2020/11/27 Javascript
JS+JQuery实现无缝连接轮播图
2020/12/30 jQuery
[02:31]《DAC最前线》之选手酒店现场花絮
2015/01/30 DOTA
python 安装virtualenv和virtualenvwrapper的方法
2017/01/13 Python
Python logging管理不同级别log打印和存储实例
2018/01/19 Python
python实现冒泡排序算法的两种方法
2018/03/10 Python
PyQt5每天必学之单行文本框
2018/04/19 Python
python梯度下降算法的实现
2020/02/24 Python
简单了解python调用其他脚本方法实例
2020/03/26 Python
建筑人员岗位职责
2013/12/25 职场文书
中学生自我评价范文
2014/02/08 职场文书
中国入世承诺
2014/04/01 职场文书
五水共治捐款倡议书
2014/05/14 职场文书
安全生产培训心得体会
2016/01/18 职场文书
MySQL之DML语言
2021/04/05 MySQL
详解Java实践之适配器模式
2021/06/18 Java/Android