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 &amp; DHTML 实例编程(教程)DOM基础和基本API
Jun 02 Javascript
jQuery 页面 Mask实现代码
Jan 09 Javascript
整理8个很棒的 jQuery 倒计时插件和教程
Dec 12 Javascript
ExtJS实现文件下载的方法实例
Nov 09 Javascript
jquery实现点击页面计算点击次数
Jan 23 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
Aug 15 Javascript
ECMAScript6快速入手攻略
Jul 18 Javascript
通过一次报错详细谈谈Point事件
May 17 Javascript
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 jQuery
浅谈JS中this在各个场景下的指向
Aug 14 Javascript
jquery实现有过渡效果的tab切换
Jul 17 jQuery
Vue中nprogress页面加载进度条的方法实现
Nov 13 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
xml+php动态载入与分页
2006/10/09 PHP
php动态实现表格跨行跨列实现代码
2012/11/06 PHP
PHP的魔术常量__METHOD__简介
2014/07/08 PHP
php实现excel中rank函数功能的方法
2015/01/20 PHP
PHP永久登录、记住我功能实现方法和安全做法
2015/04/27 PHP
php readfile下载大文件失败的解决方法
2017/05/22 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
javascript下判断一个元素是否存在的代码
2010/03/05 Javascript
利用毫秒减值计算时长的js代码
2013/09/22 Javascript
js实现网页标题栏闪烁提示效果实例分析
2014/11/20 Javascript
Java遍历集合方法分析(实现原理、算法性能、适用场合)
2016/04/25 Javascript
JS前端加密算法示例
2016/12/22 Javascript
详解Vue 实例中的生命周期钩子
2017/03/21 Javascript
vuejs手把手教你写一个完整的购物车实例代码
2017/07/06 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
2018/03/19 Javascript
vue中的数据绑定原理的实现
2018/07/02 Javascript
对vue 键盘回车事件的实例讲解
2018/08/25 Javascript
JS实现带阴历的日历功能详解
2019/01/24 Javascript
Vue 实现分页与输入框关键字筛选功能
2020/01/02 Javascript
微信小程序用户盒子、宫格列表的实现
2020/07/01 Javascript
详解javascript void(0)
2020/07/13 Javascript
Vue组件通信$attrs、$listeners实现原理解析
2020/09/03 Javascript
python使用内存zipfile对象在内存中打包文件示例
2014/04/30 Python
使用Python编写简单网络爬虫抓取视频下载资源
2014/11/04 Python
Python函数可变参数定义及其参数传递方式实例详解
2015/05/25 Python
Python 项目转化为so文件实例
2019/12/23 Python
django自定义非主键自增字段类型详解(auto increment field)
2020/03/30 Python
奢华时尚的独特视角:La Garçonne
2018/06/07 全球购物
学生打架检讨书1000字
2014/01/16 职场文书
酒吧创业计划书
2014/01/18 职场文书
自荐书4要点
2014/01/25 职场文书
六查六看剖析材料
2014/02/15 职场文书
写求职信有什么意义
2014/02/17 职场文书
情侣之间的道歉短信
2015/05/12 职场文书
2016年11月份红领巾广播稿
2015/12/21 职场文书
《开国大典》教学反思
2016/02/16 职场文书