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中关于break,continue的特殊用法与介绍
May 24 Javascript
拖动table标题实现改变td的大小(css+js代码)
Apr 16 Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
Aug 13 Javascript
SuperSlide标签切换、焦点图多种组合插件
Mar 14 Javascript
详解JavaScript按概率随机生成事件
Aug 02 Javascript
强大的JavaScript响应式图表Chartist.js的使用
Sep 13 Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
Mar 08 Javascript
微信小程序功能之全屏滚动效果的实现代码
Nov 22 Javascript
vue-cli配置flexible过程详解
Jul 04 Javascript
VSCode 配置uni-app的方法
Jul 11 Javascript
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
JavaScript事件的委托(代理)的用法示例详解
Feb 18 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初学者头疼问题总结
2006/07/08 PHP
php实现TCP端口检测的方法
2015/04/01 PHP
Netbeans 8.2将支持PHP7 更精彩
2016/06/13 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
JS的Document属性和方法小结
2013/09/17 Javascript
JavaScript DOM节点添加示例
2014/07/16 Javascript
javascript实现youku的视频代码自适应宽度
2015/05/25 Javascript
javascript+ajax实现产品页面加载信息
2015/07/09 Javascript
jQuery基于ajax实现星星评论代码
2015/08/07 Javascript
微信小程序 绘图之饼图实现
2016/10/24 Javascript
js记录点击某个按钮的次数-刷新次数为初始状态的实例
2017/02/15 Javascript
jQuery简易时光轴实现方法示例
2017/03/13 Javascript
jQuery实现的分页插件完整示例
2020/05/26 jQuery
Python中内置的日志模块logging用法详解
2016/07/12 Python
Python微信企业号开发之回调模式接收微信端客户端发送消息及被动返回消息示例
2017/08/21 Python
Python将多个excel表格合并为一个表格
2021/02/22 Python
浅谈django三种缓存模式的使用及注意点
2018/09/30 Python
Python多线程处理实例详解【单进程/多进程】
2019/01/30 Python
深入浅析Python中的迭代器
2019/06/04 Python
python实现微信自动回复及批量添加好友功能
2019/07/03 Python
jupyter使用自动补全和切换默认浏览器的方法
2020/11/18 Python
HTML5本地存储之Web Storage应用介绍
2013/01/06 HTML / CSS
使用PDF.JS插件在HTML中预览PDF文件的方法
2018/08/29 HTML / CSS
Expedia印度尼西亚站:预订酒店、廉价航班和度假套餐
2018/01/31 全球购物
德国最新街头服饰网上商店:BODYCHECK
2019/09/15 全球购物
Molton Brown美国官网:奢华美容、香水、沐浴和身体护理
2020/09/02 全球购物
艺术设计专业个人求职信
2013/09/21 职场文书
幼儿园园长自我鉴定
2013/10/22 职场文书
简短证婚人证婚词
2014/01/09 职场文书
高中毕业生登记表自我鉴定范文
2014/03/18 职场文书
辞职信的写法
2015/02/27 职场文书
盲山观后感
2015/06/11 职场文书
如何写观后感
2015/06/19 职场文书
初中政治教师教学反思
2016/02/23 职场文书
python numpy中multiply与*及matul 的区别说明
2021/05/26 Python
python如何利用cv2.rectangle()绘制矩形框
2022/12/24 Python