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 相关文章推荐
js下将字符串当函数执行的方法
Jul 13 Javascript
javascript采用数组实现tab菜单切换效果
Dec 12 Javascript
juery框架写的弹窗效果适合新手
Nov 27 Javascript
jQuery页面加载初始化常用的三种方法
Jun 04 Javascript
JS中捕获console.log()输出的方法
Apr 16 Javascript
详解javascript函数的参数
Nov 10 Javascript
Javascript removeChild()删除节点及删除子节点的方法
Dec 27 Javascript
javascript中去除数组重复元素的实现方法【实例】
Apr 12 Javascript
微信小程序 form组件详解及简单实例
Jan 10 Javascript
B/S(Web)实时通讯解决方案分享
Apr 06 Javascript
vue指令v-html使用过滤器filters功能实例
Oct 25 Javascript
基于VUE实现简单的学生信息管理系统
Jan 13 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生成缩略图的类代码
2008/10/02 PHP
ThinkPHP空模块和空操作详解
2014/06/30 PHP
php魔术变量用法实例详解
2014/11/13 PHP
PHP中快速生成随机密码的几种方式
2017/04/17 PHP
php图像验证码生成代码
2017/06/08 PHP
Laravel 实现密码重置功能
2018/02/23 PHP
thinkPHP框架中layer.js的封装与使用方法示例
2019/01/18 PHP
建立良好体验度的Web注册系统ajax
2007/07/09 Javascript
Ext JS Grid在IE6 下宽度的问题解决方法
2009/02/15 Javascript
浅析Js中的单引号与双引号问题
2013/11/06 Javascript
js复制网页内容并兼容各主流浏览器的代码
2013/12/17 Javascript
js通过八个点 拖动改变div大小的实现方法
2014/03/05 Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
2015/06/23 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
2015/10/23 Javascript
在windows上用nodejs搭建静态文件服务器的简单方法
2016/08/11 NodeJs
jquery实现图片列表鼠标移入微动
2016/12/01 Javascript
浅谈Angular.js中使用$watch监听模型变化
2017/01/10 Javascript
详解基于angular路由的requireJs按需加载js
2017/01/20 Javascript
JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】
2017/03/03 Javascript
JS实现页面打印功能
2017/03/16 Javascript
vue组件开发之用户无限添加自定义填写表单的方法
2018/08/28 Javascript
基于jquery实现的tab选项卡功能示例【附源码下载】
2019/06/10 jQuery
js+springMVC 提交数组数据到后台的实例
2019/09/21 Javascript
Vue环境搭建+VSCode+Win10的详细教程
2020/08/19 Javascript
js面试题之异步问题的深入理解
2020/09/20 Javascript
pyqt4教程之实现半透明的天气预报界面示例
2014/03/02 Python
Python数据结构之Array用法实例
2014/10/09 Python
Python转换时间的图文方法
2019/07/01 Python
用HTML5实现鼠标滚轮事件放大缩小图片的功能
2015/06/25 HTML / CSS
LookFantastic丹麦:英国美容护肤精品在线商城
2016/08/18 全球购物
股东合作协议书范本
2014/04/14 职场文书
物业公司的岗位任命书
2014/06/06 职场文书
公司新员工欢迎词
2015/09/30 职场文书
党性修养心得体会2016
2016/01/21 职场文书
python单元测试之pytest的使用
2021/06/07 Python
CSS 实现磨砂玻璃(毛玻璃)效果样式
2023/05/21 HTML / CSS