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面向对象设计一 工厂模式
Dec 20 Javascript
在linux中使用包管理器安装node.js
Mar 13 Javascript
jQuery删除当前节点元素
Dec 07 Javascript
bootstrap paginator分页前后台用法示例
Jun 17 Javascript
Three.js利用顶点绘制立方体的方法详解
Sep 27 Javascript
Angularjs按需查询实例代码
Oct 30 Javascript
vue axios请求拦截实例代码
Mar 29 Javascript
node.js使用redis储存session的方法
Sep 26 Javascript
在Express中提供静态文件的实现方法
Oct 17 Javascript
js实现拖拽元素选择和删除
Aug 25 Javascript
JS实现拖拽元素时与另一元素碰撞检测
Aug 27 Javascript
JavaScript实现随机点名小程序
Oct 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利用iframe实现无刷新文件上传功能的代码
2011/09/29 PHP
php利用scws实现mysql全文搜索功能的方法
2014/12/25 PHP
php返回字符串中所有单词的方法
2015/03/09 PHP
详解PHP数组赋值方法
2015/11/07 PHP
php实现学生管理系统
2020/03/21 PHP
Linux平台PHP5.4设置FPM线程数量的方法
2016/11/09 PHP
PHP用函数嵌入网站访问量计数器
2017/10/27 PHP
PHP常量DIRECTORY_SEPARATOR原理及用法解析
2020/11/10 PHP
js 图片缩放(按比例)控制代码
2009/05/27 Javascript
ExtJs 3.1 XmlTreeLoader Example Error
2010/02/09 Javascript
一个原生的用户等级的进度条
2010/07/03 Javascript
遍历jquery对象的代码分享
2011/11/02 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
2013/02/05 Javascript
使用Js让Html中特殊字符不被转义
2013/11/05 Javascript
原生javascript实现匀速运动动画效果
2016/02/26 Javascript
基于AngularJS实现的工资计算器实例
2017/06/16 Javascript
Vue2路由动画效果的实现代码
2017/07/10 Javascript
jQuery Collapse1.1.0折叠插件简单使用
2017/08/28 jQuery
Vue学习笔记之表单输入控件绑定
2017/09/05 Javascript
jQuery实现checkbox全选功能完整实例
2018/07/12 jQuery
JavaScript实现构造json数组的方法分析
2018/08/17 Javascript
Angularjs之ngModel中的值验证绑定方法
2018/09/13 Javascript
JavaScript中callee和caller的区别与用法实例分析
2019/06/28 Javascript
vue 组件间的通信之子组件向父组件传值的方式
2020/07/29 Javascript
Python脚本判断 Linux 是否运行在虚拟机上
2015/04/25 Python
Python实现购物评论文本情感分析操作【基于中文文本挖掘库snownlp】
2018/08/07 Python
Python3的介绍、安装和命令行的认识(推荐)
2018/10/20 Python
Python箱型图处理离群点的例子
2019/12/09 Python
python实现按日期归档文件
2021/01/30 Python
HTML5 3D衣服摇摆动画特效
2016/03/17 HTML / CSS
法国在线药房:Shop Pharmacie
2019/11/26 全球购物
.net开发工程师面试题
2014/02/25 面试题
《中国的气候》教学反思
2014/02/23 职场文书
节能宣传周活动总结
2014/05/08 职场文书
《狼牙山五壮士》读后感:宁死不屈,视死如归
2019/08/16 职场文书
SQL Server #{}可以防止SQL注入
2022/05/11 SQL Server