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 相关文章推荐
JQuery 小练习(实例代码)
Aug 07 Javascript
SWFObject 2.1以上版本语法介绍
Jul 10 Javascript
JQuery的ajax获取数据后的处理总结(html,xml,json)
Jul 14 Javascript
juqery 学习之六 CSS--css、位置、宽高
Feb 11 Javascript
JS中如何设置readOnly的值
Dec 25 Javascript
JavaScript中的prototype和constructor简明总结
Apr 05 Javascript
JS模拟bootstrap下拉菜单效果实例
Jun 17 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
Nov 24 Javascript
ES6 javascript的异步操作实例详解
Oct 30 Javascript
JavaScript多种滤镜算法实现代码实例
Dec 10 Javascript
js实现上传按钮并显示缩略图小轮子
May 04 Javascript
vue中是怎样监听数组变化的
Oct 24 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
重料打造自己的“宝马”---第三代
2021/03/02 无线电
PHP实现获取图片颜色值的方法
2014/07/11 PHP
PHP+MYSQL会员系统的开发实例教程
2014/08/23 PHP
Laravel 5框架学习之表单验证
2015/04/08 PHP
PHP stream_context_create()函数的使用示例
2015/05/12 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
laravel 去掉index.php伪静态的操作方法
2019/10/12 PHP
浅谈php常用的7大框架的优缺点
2020/07/20 PHP
Nigma vs Alliance BO5 第五场2.14
2021/03/10 DOTA
jquery自定义类似$.ajax()的方法实现代码
2013/08/13 Javascript
为jQuery添加Webkit的触摸的方法分享
2014/02/02 Javascript
jQuery之Deferred对象详解
2014/09/04 Javascript
超级简单实现JavaScript MVC 样式框架
2015/03/24 Javascript
IE6兼容透明背景图片及解决方案
2015/08/19 Javascript
详解Angularjs filter过滤器
2016/02/06 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
2016/03/21 Javascript
浅析jquery与checkbox的checked属性的问题
2016/04/27 Javascript
浅谈JavaScript对象与继承
2016/07/10 Javascript
Angular利用内容投射向组件输入ngForOf模板的方法
2018/03/05 Javascript
在微信小程序中保存网络图片
2019/02/12 Javascript
每天学点Vue源码之vm.$mount挂载函数
2019/03/11 Javascript
对于Python编程中一些重用与缩减的建议
2015/04/14 Python
浅谈Python实现Apriori算法介绍
2017/12/20 Python
python 检查是否为中文字符串的方法
2018/12/28 Python
python 已知一个字符,在一个list中找出近似值或相似值实现模糊匹配
2020/02/29 Python
Python Tornado核心及相关原理详解
2020/06/24 Python
基于python实现操作redis及消息队列
2020/08/27 Python
PyCharm2020.3.2安装超详细教程
2021/02/08 Python
html5实现完美兼容各大浏览器的播放器
2014/12/26 HTML / CSS
法国在线药房:DoctiPharma
2020/10/21 全球购物
写自荐信要注意什么
2013/12/26 职场文书
校园活动策划方案
2014/06/13 职场文书
财务负责人岗位职责
2015/02/03 职场文书
个性与发展自我评价
2015/03/06 职场文书
花木兰观后感
2015/06/10 职场文书
python文本处理的方案(结巴分词并去除符号)
2021/05/26 Python