js数组去重的N种方法(小结)


Posted in Javascript onJune 07, 2018

对于数组去重我们有n种方法可以实现。

es5实现方法

for循环+indexOf
function unique(arr) {
  var uniqueArr = [],
   len = arr.length
  for (var i = 0; i < len; i++) {
   if (uniqueArr.indexOf(arr[i]) == -1) {
    uniqueArr.push(arr[i])
   }
  }
  return uniqueArr
 }
 var arr = [1, 2, 3, 1, 5, "1"]
 var uniqueArr = unique(arr)
 console.log(arr)  //[1, 2, 3, 1, 5, "1"]
 console.log(uniqueArr)  //[ 1, 2, 3, 5, '1' ]

排序后去重

function unique(arr) {
  var uniqueArr = [],
   sortArr = arr.concat().sort(),
   len = sortArr.length,
   prev
  for (var i = 0; i < len; i++) {
   if (!i || prev !== sortArr[i]) {
    uniqueArr.push(sortArr[i])
   }
   prev = sortArr[i]
  }
  return uniqueArr
 }
 var arr = [1, 2, 3, 1, 5, "1"]
 var uniqueArr = unique(arr)
 console.log(arr)  //[ 1, 2, 3, 1, 5, '1' ]
 console.log(uniqueArr)  //[ 1, '1', 2, 3, 5 ]
利用对象
function unique(arr) {
  var uniqueArr = [],
   obj = {},
   len = arr.length
  for (var i = 0; i < len; i++) {
   obj[typeof arr[i] + arr[i]] = arr[i]
  }
  for (var i in obj) {
   uniqueArr.push(obj[i])
  }
  console.log(obj)  //{ number1: 1, number2: 2, number3: 3, number5: 5, string1: '1' }
  return uniqueArr
 }
 var arr = [1, 2, 3, 1, 5, "1"]
 var uniqueArr = unique(arr)
 console.log(arr)  // [1, 2, 3, 1, 5, "1"]
 console.log(uniqueArr)  //[ 1, 2, 3, 5, '1' ]

es6实现方法

利用Set结构和Array.from
function unique(arr) {
  return Array.from(new Set(arr))
 }
 var arr = [1, 2, 3, 1, 5, "1"]
 var uniqueArr = unique(arr)
 console.log(arr)   //[ 1, 2, 3, 1, 5, '1' ]
 console.log(uniqueArr)  //[ 1, 2, 3, 5, '1' ]
利用Set结构和...
function unique(arr) {
  return [...new Set(arr)]
 }
 var arr = [1, 2, 3, 1, 5, "1"]
 var uniqueArr = unique(arr)
 console.log(arr)  //[ 1, 2, 3, 1, 5, '1' ]
 console.log(uniqueArr)   //[ 1, 2, 3, 5, '1' ]

数组常用方法

  • slice() 用于提取目标数组的一部分,返回一个新数组,原数组不变。
  • concat() 用于多个数组的合并。它将新数组的成员,添加到原数组成员的后部,然后返回一个新数组,原数组不变。
  • reverse() 用于颠倒排列数组元素,返回改变后的数组。注意,该方法将改变原数组。
  • sort() 对数组成员进行排序,默认是按照字典顺序排序。排序后,原数组将被改变。
  • push() 用于在数组的末端添加一个或多个元素,并返回添加新元素后的数组长度。注意,该方法会改变原数组。
  • pop() 用于删除数组的最后一个元素,并返回该元素。注意,该方法会改变原数组。
  • unshift() 用于在数组的第一个位置添加元素,并返回添加新元素后的数组长度。注意,该方法会改变原数组。
  • shift() 用于删除数组的第一个元素,并返回该元素。注意,该方法会改变原数组。
  • splice() 用于删除原数组的一部分成员,并可以在删除的位置添加新的数组成员,返回值是被删除的元素。注意,该方法会改变原数组。
  • map() 将数组的所有成员依次传入参数函数,然后把每一次的执行结果组成一个新数组返回。
  • forEach() 与map方法很相似,也是对数组的所有成员依次执行参数函数。但是,forEach方法不返回值,只用来操作数据。
  • filter() 用于过滤数组成员,满足条件的成员组成一个新数组返回。
  • join() 以指定参数作为分隔符,将所有数组成员连接为一个字符串返回。如果不提供参数,默认用逗号分隔。
  • indexOf() 返回给定元素在数组中第一次出现的位置,如果没有出现则返回-1。
  • lastIndexOf() 返回给定元素在数组中最后一次出现的位置,如果没有出现则返回-1。

总结

以上所述是小编给大家介绍的js数组去重的N种方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript面向对象的方式实现的弹出层效果代码
Jan 28 Javascript
Jquery中$.post和$.ajax的用法小结
Apr 28 Javascript
Angular.js中用ng-repeat-start实现自定义显示
Oct 18 Javascript
javascript深拷贝的原理与实现方法分析
Apr 10 Javascript
WebSocket实现简单客服聊天系统
May 12 Javascript
自定义vue全局组件use使用、vuex的使用详解
Jun 14 Javascript
Javascript实现跨域后台设置拦截的方法详解
Aug 04 Javascript
JS如何实现在页面上快速定位(锚点跳转问题)
Aug 14 Javascript
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
微信小程序获取音频时长与实时获取播放进度问题
Aug 28 Javascript
OpenLayers实现图层切换控件
Sep 25 Javascript
vue+axios新手实践实现登陆的示例代码
Jun 06 #Javascript
vue2.0实现音乐/视频播放进度条组件
Jun 06 #Javascript
vue实现简单loading进度条
Jun 06 #Javascript
security.js实现的RSA加密功能示例
Jun 06 #Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
Jun 06 #Javascript
基于vue实现可搜索下拉框定制组件
Mar 26 #Javascript
深入浅析Vue中的 computed 和 watch
Jun 06 #Javascript
You might like
php日历[测试通过]
2008/03/27 PHP
屏蔽机器人从你的网站搜取email地址的php代码
2012/11/14 PHP
php之curl设置超时实例
2014/11/03 PHP
php绘制圆形的方法
2015/01/24 PHP
php单例模式的简单实现方法
2016/06/10 PHP
Yii框架创建cronjob定时任务的方法分析
2017/05/23 PHP
在线所见即所得HTML编辑器的实现原理浅析
2015/04/25 Javascript
jquery衣服颜色选取插件效果代码分享
2015/08/28 Javascript
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
2016/06/22 Javascript
解析预加载显示图片艺术
2016/12/05 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
2016/12/08 Javascript
COM组件中调用JavaScript函数详解及实例
2017/02/23 Javascript
JavaScript中数组Array.sort()排序方法详解
2017/03/01 Javascript
浅谈Angular4实现热加载开发旅程
2017/09/08 Javascript
Three.js实现绘制字体模型示例代码
2017/09/26 Javascript
发布一款npm包帮助理解npm的使用
2019/01/03 Javascript
详解Vuex下Store的模块化拆分实践
2019/07/31 Javascript
JS实现transform实现扇子效果
2020/01/17 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
2020/06/28 Javascript
[51:28]EG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/16 DOTA
Python 模板引擎的注入问题分析
2017/01/01 Python
Python爬虫DOTA排行榜爬取实例(分享)
2017/06/13 Python
基于python时间处理方法(详解)
2017/08/14 Python
python3实现zabbix告警推送钉钉的示例
2019/02/20 Python
Python底层封装实现方法详解
2020/01/22 Python
css 元素选择器的简单实例
2016/05/23 HTML / CSS
html5 web本地存储将取代我们的cookie
2012/12/26 HTML / CSS
英国著名的药妆网站:Escentual
2016/07/29 全球购物
美国嘻哈首饰购物网站:Hip Hop Bling
2016/12/30 全球购物
美国体育用品商店:Academy Sports + Outdoors
2020/01/04 全球购物
社区学习十八大感想
2014/01/22 职场文书
大学生两会精神学习心得体会
2014/03/10 职场文书
不遵守课堂纪律的检讨书
2014/09/24 职场文书
文体活动总结
2015/02/04 职场文书
python基础之停用词过滤详解
2021/04/21 Python
python中opencv实现图片文本倾斜校正
2021/06/11 Python