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 相关文章推荐
IE event.srcElement和FF event.target 功能比较
Mar 01 Javascript
js 关于=+与+=日期函数使用说明(赋值运算符)
Nov 15 Javascript
javascript:文字不间断向左移动的实例代码
Aug 08 Javascript
vue-cli如何快速构建vue项目
Apr 26 Javascript
利用jQuery实现简单的拖曳效果实例代码
Oct 20 jQuery
JavaScript模拟实现封装的三种方式及写法区别
Oct 27 Javascript
Angular4集成ng2-file-upload的上传组件
Mar 14 Javascript
Javascript 之封装(Package)
Sep 14 Javascript
vue使用rem实现 移动端屏幕适配
Sep 26 Javascript
jQuery pagination分页示例详解
Oct 23 jQuery
详解JavaScript的变量
Apr 04 Javascript
vuex vue简单使用知识点总结
Aug 29 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实现的线索二叉树及二叉树遍历方法详解
2016/04/25 PHP
ECSHOP完美解决Deprecated: preg_replace()报错的问题
2016/05/17 PHP
PHP基于递归实现的约瑟夫环算法示例
2017/08/27 PHP
php empty 函数判断结果为空但实际值却为非空的原因解析
2018/05/28 PHP
关于document.cookie的使用javascript
2010/10/29 Javascript
网易JS面试题与Javascript词法作用域说明
2010/11/09 Javascript
prettify 代码高亮着色器google出品
2010/12/28 Javascript
将文本输入框内容加入表中的js代码
2013/08/18 Javascript
jquery选择checked在ie8普通模式下的问题
2014/02/12 Javascript
JS实现仿百度输入框自动匹配功能的示例代码
2014/02/19 Javascript
jQuery实现首页图片淡入淡出效果的方法
2015/06/10 Javascript
jquery插件unobtrusive实现片段式加载
2015/06/15 Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
2016/01/26 Javascript
jQuery获取与设置iframe高度的方法
2016/08/01 Javascript
jQuery 实现ajax传入参数含有特殊字符的方法总结
2016/10/17 Javascript
ES6中Proxy与Reflect实现重载(overload)的方法
2017/03/30 Javascript
Vue实现动态响应数据变化
2017/04/28 Javascript
AngularJs1.x自定义指令独立作用域的函数传入参数方法
2018/10/09 Javascript
浅谈redux, koa, express 中间件实现对比解析
2019/05/23 Javascript
Vue+Java 通过websocket实现服务器与客户端双向通信操作
2020/09/22 Javascript
Python实现拼接多张图片的方法
2014/12/01 Python
Python性能提升之延迟初始化
2016/12/04 Python
Python 高级专用类方法的实例详解
2017/09/11 Python
PyQt5中向单元格添加控件的方法示例
2020/03/24 Python
解决Pymongo insert时会自动添加_id的问题
2020/12/05 Python
瑞典网上购买现代和复古家具:Reforma
2019/10/21 全球购物
铭立家具面试题
2012/12/06 面试题
为什么要使用servlet
2016/01/17 面试题
儿子婚宴答谢词
2014/01/09 职场文书
最新奶茶店创业计划书范文
2014/02/08 职场文书
前台文员职责范本
2014/03/07 职场文书
单位一把手群众路线四风问题整改措施
2014/09/25 职场文书
2015新学期校长寄语(3篇)
2015/03/25 职场文书
自定义函数实现单词排序并运用于PostgreSQL(实现代码)
2021/04/22 PostgreSQL
Python基于百度API识别并提取图片中文字
2021/06/27 Python
使用springMVC所需要的pom配置
2021/09/15 Java/Android