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 相关文章推荐
判断用户的在线状态 onbeforeunload事件
Mar 05 Javascript
js写的评论分页(还不错)
Dec 23 Javascript
深入浅析JavaScript中对事件的三种监听方式
Sep 29 Javascript
移动手机APP手指滑动切换图片特效附源码下载
Nov 30 Javascript
jquery利用json实现页面之间传值的实例解析
Dec 12 Javascript
BootStrap的双日历时间控件使用
Jul 25 Javascript
Bootstrap Table 搜索框和查询功能
Nov 30 Javascript
zepto.js 实时监听输入框的方法
Dec 04 Javascript
原生JS实现随机点名项目的实例代码
Apr 30 Javascript
微信小程序开发之左右分栏效果的实例代码
May 20 Javascript
vue瀑布流组件实现上拉加载更多
Mar 10 Javascript
JavaScript WeakMap使用详解
Feb 05 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内核探索:变量概述
2014/01/30 PHP
php获取URL中带#号等特殊符号参数的解决方法
2014/09/02 PHP
ECshop 迁移到 PHP7版本时遇到的兼容性问题
2016/02/15 PHP
Yii框架防止sql注入,xss攻击与csrf攻击的方法
2016/10/18 PHP
PHP 常用时间函数资料整理
2016/10/22 PHP
php实现的中秋博饼游戏之掷骰子并输出结果功能详解
2017/11/06 PHP
关于JavaScript中的关联数组分析
2013/04/09 Javascript
基于JavaScript 声明全局变量的三种方式详解
2013/05/07 Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
2013/07/09 Javascript
js如何判断不同系统的浏览器类型
2013/10/28 Javascript
jQuery实现带滚动线条导航效果的方法
2015/01/30 Javascript
jQuery插件formValidator自定义函数扩展功能实例详解
2015/11/25 Javascript
基于jquery实现智能表单验证操作
2016/05/09 Javascript
深入理解jquery中的事件与动画
2016/05/24 Javascript
angularjs 中$apply,$digest,$watch详解
2016/10/13 Javascript
详解js数组的完全随机排列算法
2016/12/16 Javascript
javascript输出AscII码扩展集中的字符方法
2016/12/26 Javascript
利用require.js与angular搭建spa应用的方法实例
2017/07/19 Javascript
Vue路由切换页面不更新问题解决方案
2020/07/10 Javascript
Python基础之文件读取的讲解
2019/02/16 Python
Python实现去除列表中重复元素的方法总结【7种方法】
2019/02/16 Python
python实现ssh及sftp功能(实例代码)
2020/03/16 Python
在使用非全零作为空指针内部表达的机器上, NULL是如何定义
2014/11/09 面试题
请用Java实现列出某个目录下的所有文件
2013/09/23 面试题
中专毕业生自我鉴定范文
2013/11/09 职场文书
毕业研究生的自我鉴定
2013/11/30 职场文书
销售主管的自我评价分享
2014/01/03 职场文书
初中美术教学反思
2014/01/29 职场文书
文字自荐书范文
2014/02/10 职场文书
黄金搭档广告词
2014/03/21 职场文书
保护环境建议书400字
2014/05/13 职场文书
慈善晚会策划方案
2014/05/14 职场文书
任命书格式
2014/06/05 职场文书
实验室标语
2014/06/21 职场文书
Python绘制分类图的方法
2021/04/20 Python
MySQL官方导出工具mysqlpump的使用
2021/05/21 MySQL