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 相关文章推荐
向fckeditor编辑器插入指定代码的方法
May 25 Javascript
jquery的index方法实现tab效果
Feb 16 Javascript
实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)
Jan 11 Javascript
如何防止回车(enter)键提交表单
May 11 Javascript
js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,000)
Jun 02 Javascript
JavaScript 学习笔记之操作符(续)
Jan 14 Javascript
微信jssdk在iframe页面失效问题的解决措施
Mar 03 Javascript
浅谈JS函数节流防抖
Oct 18 Javascript
Angular利用trackBy提升性能的方法
Jan 26 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
Jun 24 Javascript
Vue如何使用混合Mixins和插件开发详解
Feb 05 Javascript
Element InputNumber 计数器的实现示例
Aug 03 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从csv文件读取数据并输出到网页的方法
2015/03/14 PHP
php实现通过cookie换肤的方法
2015/07/13 PHP
Laravel使用支付宝进行支付的示例代码
2017/08/16 PHP
JavaScipt基本教程之前言
2008/01/16 Javascript
javascript 短路法代码精简
2009/08/20 Javascript
jquery pagination插件实现无刷新分页代码
2009/10/13 Javascript
js读取本地excel文档数据的代码
2010/11/11 Javascript
JavaScript中URL编码函数代码
2011/01/11 Javascript
jquery预览图片实现鼠标放上去显示实际大小
2014/01/16 Javascript
js老生常谈之this,constructor ,prototype全面解析
2016/04/05 Javascript
浅析js绑定事件的常用方法
2016/05/15 Javascript
浅谈jquery的map()和each()方法
2016/06/12 Javascript
jQuery模仿单选按钮选中效果
2016/06/24 Javascript
vue计算属性和监听器实例解析
2018/05/10 Javascript
Vue-Cli项目优化操作的实现
2019/10/27 Javascript
解决antd 下拉框 input [defaultValue] 的值的问题
2020/10/31 Javascript
解决Element中el-date-picker组件不回填的情况
2020/11/07 Javascript
部署Python的框架下的web app的详细教程
2015/04/30 Python
解决PyCharm中光标变粗的问题
2017/08/05 Python
详解python校验SQL脚本命名规则
2019/03/22 Python
Python使用Pickle模块进行数据保存和读取的讲解
2019/04/09 Python
Python这样操作能存储100多万行的xlsx文件
2019/04/16 Python
对PyQt5的输入对话框使用(QInputDialog)详解
2019/06/25 Python
python开启debug模式的方法
2019/06/27 Python
基于python3 的百度图片下载器的实现代码
2019/11/05 Python
Python BeautifulReport可视化报告代码实例
2020/04/13 Python
Python格式化输出--%s,%d,%f的代码解析
2020/04/29 Python
css3 clip实现圆环进度条的示例代码
2018/02/07 HTML / CSS
CSS3 二级导航菜单的制作的示例
2018/04/02 HTML / CSS
加拿大大码女装购物网站:Penningtons
2020/12/26 全球购物
户外婚礼策划方案
2014/02/08 职场文书
创业融资计划书
2014/04/25 职场文书
校园文化标语
2014/06/18 职场文书
新店开张宣传语
2015/07/13 职场文书
2016创先争优活动党员公开承诺书
2016/03/24 职场文书
关于考试抄袭的检讨书
2019/11/02 职场文书