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 相关文章推荐
Firefox 无法获取cssRules 的解决办法
Oct 11 Javascript
javascript 清除输入框中的数据
Apr 13 Javascript
jQuery 使用手册(三)
Sep 23 Javascript
jquery prop的使用介绍及与attr的区别
Dec 19 Javascript
JqueryMobile动态生成listView并实现刷新的两种方法
Mar 05 Javascript
js中confirm实现执行操作前弹出确认框的方法
Nov 01 Javascript
深入理解setTimeout函数和setInterval函数
May 20 Javascript
jQuery 操作input中radio的技巧
Jul 18 Javascript
Vue键盘事件用法总结
Apr 18 Javascript
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
Sep 21 Javascript
vue2.0使用swiper组件实现轮播效果
Nov 27 Javascript
详解JavaScript类型判断的四种方法
Oct 21 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 变量类型的强制转换
2009/10/23 PHP
PHP中怎样保持SESSION不过期 原理及方案介绍
2013/08/08 PHP
php获取淘宝分类id示例
2014/01/16 PHP
简明json介绍
2008/09/28 Javascript
Js 获取当前日期时间及其它操作实现代码
2021/03/04 Javascript
键盘 keycode的值 javascript时触发事件时很有用的要素
2009/11/02 Javascript
Javascript call和apply区别及使用方法
2013/11/14 Javascript
javascript编写贪吃蛇游戏
2015/07/07 Javascript
文字垂直滚动之javascript代码
2015/07/29 Javascript
详解Angularjs filter过滤器
2016/02/06 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
2016/08/01 Javascript
微信小程序 支付功能(前端)的实现
2017/05/24 Javascript
Three.js中网格对象MESH的属性与方法详解
2017/09/27 Javascript
JS实现的抛物线运动效果示例
2018/01/30 Javascript
javascript闭包的使用之按钮切换功能
2018/08/30 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
2018/09/26 Javascript
刷新页面后让控制台的js代码继续执行
2019/09/20 Javascript
Vue中fragment.js使用方法小结
2020/02/17 Javascript
vue数据更新UI不刷新显示的解决办法
2020/08/06 Javascript
在Python中关于中文编码问题的处理建议
2015/04/08 Python
Python-copy()与deepcopy()区别详解
2019/07/12 Python
django框架面向对象ORM模型继承用法实例分析
2019/07/29 Python
浅谈Python中(&amp;,|)和(and,or)之间的区别
2019/08/07 Python
如何把python项目部署到linux服务器
2020/08/26 Python
利用html5 canvas破解简单验证码及getImageData接口应用
2013/01/25 HTML / CSS
美国在线印刷公司:PsPrint
2017/10/12 全球购物
linux比较文件内容的命令是什么
2013/03/04 面试题
环境科学专业个人求职信
2013/09/26 职场文书
审计专业自荐信范文
2014/04/21 职场文书
小学六年级学生评语
2014/04/22 职场文书
简易离婚协议书范本2014
2014/10/15 职场文书
2014年宣传部个人工作总结
2014/12/06 职场文书
有关三国演义的读书笔记
2015/06/25 职场文书
php 防护xss,PHP的防御XSS注入的终极解决方案
2021/04/01 PHP
Python 数据可视化神器Pyecharts绘制图像练习
2022/02/28 Python
CSS 左边固定宽右边自适应的6种方法
2022/05/15 HTML / CSS