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 相关文章推荐
HTML 自动伸缩的表格Table js实现
Apr 01 Javascript
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
Mar 25 Javascript
jQuery中json对象的复制方式介绍(数组及对象)
Jun 08 Javascript
两种JS实现屏蔽鼠标右键的方法
Aug 20 Javascript
原生javascript实现addClass,removeClass,hasClass函数
Feb 25 Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
Dec 20 Javascript
浅谈Node.js 中间件模式
Jun 12 Javascript
VUE预渲染及遇到的坑
Sep 03 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
Mar 31 Javascript
layui 实现表单和文件上传一起传到后台的例子
Sep 16 Javascript
JS实现网页时钟特效
Mar 25 Javascript
JavaScript实现点击出现子菜单效果
Feb 08 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 导出数据到淘宝助手CSV的方法分享
2010/02/27 PHP
mysql总结之explain
2012/02/27 PHP
LotusPhp笔记之:Cookie组件的使用详解
2013/05/06 PHP
PHP实现查询两个数组中不同元素的方法
2016/02/23 PHP
php使用strip_tags()去除html标签仍有空白的解决方法
2016/07/28 PHP
Docker配置PHP开发环境教程
2016/12/21 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
js 内存释放问题
2010/04/25 Javascript
重载toString实现JS HashMap分析
2011/03/13 Javascript
Jquery chosen动态设置值实例介绍
2013/08/08 Javascript
详解Bootstrap创建表单的三种格式(一)
2016/01/04 Javascript
AngularJS入门心得之directive和controller通信过程
2016/01/25 Javascript
微信小程序通过api接口将json数据展现到小程序示例
2017/01/20 Javascript
初探nodeJS
2017/01/24 NodeJs
React+Redux实现简单的待办事项列表ToDoList
2019/09/29 Javascript
微信小程序修改数组长度的问题的解决
2019/12/17 Javascript
javascript实现简单搜索功能
2020/03/26 Javascript
详解Python读取配置文件模块ConfigParser
2017/05/11 Python
python+opencv实现动态物体追踪
2018/01/09 Python
Python玩转PDF的各种骚操作
2019/05/06 Python
Python爬虫requests库多种用法实例
2020/05/28 Python
keras实现VGG16方式(预测一张图片)
2020/07/07 Python
基于python实现百度语音识别和图灵对话
2020/11/02 Python
利用python查看数组中的所有元素是否相同
2021/01/08 Python
python中time.ctime()实例用法
2021/02/03 Python
英国轻奢珠宝品牌:Astley Clarke
2016/12/18 全球购物
澳大利亚冲浪和时尚服装网上购物:SurfStitch
2017/07/29 全球购物
德国足球商店:OUTFITTER
2019/05/06 全球购物
西班牙语在线票务市场:SuperBoletería
2019/06/10 全球购物
构造方法和其他方法的区别?怎么调用父类的构造方法
2013/09/22 面试题
专科毕业生学习生活的自我评价
2013/10/26 职场文书
厂长岗位职责
2014/02/19 职场文书
典型事迹材料范文
2014/12/29 职场文书
清洁工个人总结
2015/03/04 职场文书
上学路上观后感
2015/06/16 职场文书
奖学金申请个人主要事迹材料
2015/11/04 职场文书