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跨浏览器显示的file上传控件
Oct 24 Javascript
基于jquery的多功能软键盘插件
Jul 25 Javascript
Javascript基础知识(一)核心基础语法与事件模型
Sep 29 Javascript
Jquery修改页面标题title其它JS失效的解决方法
Oct 31 Javascript
jQuery获取DOM节点实例分析(2种方式)
Dec 15 Javascript
js实现文字闪烁特效的方法
Dec 17 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
Jun 28 Javascript
一个Js文件函数中调用另一个Js文件函数的方法演示
Aug 14 Javascript
requireJS模块化实现返回顶部功能的方法详解
Oct 16 Javascript
在小程序/mpvue中使用flyio发起网络请求的方法
Sep 13 Javascript
JS异步处理的进化史深入讲解
Aug 25 Javascript
在vue中通过render函数给子组件设置ref操作
Nov 17 Vue.js
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 变量的定义方法
2010/01/26 PHP
WordPress中用于获取及自定义头像图片的PHP脚本详解
2015/12/17 PHP
PHP的时间戳与具体时间转化的简单实现
2016/06/13 PHP
PHP中功能强大却很少使用的函数实例小结
2016/11/10 PHP
javascript中的括号()用法小结
2014/04/14 Javascript
纯js实现遮罩层效果原理分析
2014/05/27 Javascript
javascript实现字符串反转的方法
2015/02/05 Javascript
基于Javascript实现文件实时加载进度的方法
2016/10/12 Javascript
js仿京东轮播效果 选项卡套选项卡使用
2017/01/12 Javascript
js实现可以点击收缩或张开的悬浮窗
2017/09/18 Javascript
react-native 圆弧拖动进度条实现的示例代码
2018/04/12 Javascript
详解vue-cli 本地开发mock数据使用方法
2018/05/29 Javascript
浅谈React之状态(State)
2018/09/19 Javascript
详解ng-alain动态表单SF表单项设置必填和正则校验
2019/06/11 Javascript
微信小程序实现拍照画布指定区域生成图片
2019/07/18 Javascript
Vue v-model组件封装(类似弹窗组件)
2020/01/08 Javascript
react实现移动端下拉菜单的示例代码
2020/01/16 Javascript
Python切片用法实例教程
2014/09/08 Python
windows 10下安装搭建django1.10.3和Apache2.4的方法
2017/04/05 Python
Python(Django)项目与Apache的管理交互的方法
2018/05/16 Python
使用python中的in ,not in来检查元素是不是在列表中的方法
2018/07/06 Python
记一次python 内存泄漏问题及解决过程
2018/11/29 Python
python中的反斜杠问题深入讲解
2019/08/12 Python
NumPy排序的实现
2020/01/21 Python
Python range与enumerate函数区别解析
2020/02/28 Python
Windows下Pycharm远程连接虚拟机中Centos下的Python环境(图文教程详解)
2020/03/19 Python
10个python爬虫入门实例(小结)
2020/11/01 Python
Python3.9.0 a1安装pygame出错解决全过程(小结)
2021/02/02 Python
印度最好的在线药品订购网站:PharmEasy
2018/11/30 全球购物
Travelstart沙特阿拉伯:廉价航班、豪华酒店和实惠的汽车租赁优惠
2019/04/06 全球购物
Topshop美国官网:英国快速时尚品牌
2019/05/16 全球购物
《童年》教学反思
2014/02/18 职场文书
会走路的树教学反思
2014/02/20 职场文书
小学数学课题方案
2014/06/15 职场文书
学习十八大标语
2014/10/09 职场文书
超市食品安全承诺书
2015/04/29 职场文书