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 相关文章推荐
IE和Firefox在JavaScript应用中的兼容性探讨
Apr 01 Javascript
常用简易JavaScript函数
Apr 09 Javascript
jquery关于图形报表的运用实现代码
Jan 06 Javascript
Node.js中AES加密和其它语言不一致问题解决办法
Mar 10 Javascript
jQuery之DOM对象和jQuery对象的转换与区别分析
Jan 08 Javascript
JS实现让访问者自助选择网页文字颜色的方法
Feb 24 Javascript
jQuery 开发之EasyUI 添加数据的实例
Sep 26 jQuery
js 图片转base64的方式(两种)
Apr 24 Javascript
vue完成项目后,打包成静态文件的方法
Sep 03 Javascript
详解element-ui表格中勾选checkbox,高亮当前行
Sep 02 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
Jul 27 Javascript
vue选项卡切换的实现案例
Apr 11 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下MYSQL limit的优化
2008/01/10 PHP
解析php中如何调用用户自定义函数
2013/08/06 PHP
PHP使用pear实现mail发送功能 windows环境下配置pear
2016/04/15 PHP
Laravel中log无法写入问题的解决
2017/06/17 PHP
PHP设计模式之策略模式原理与用法实例分析
2019/04/04 PHP
js 日期转换成中文格式的函数
2009/07/07 Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
2013/06/24 Javascript
jquery使用$(element).is()来判断获取的tagName
2014/08/24 Javascript
js判断浏览器版本以及浏览器内核的方法
2015/01/20 Javascript
jQuery实现平滑滚动到指定锚点的方法
2015/03/20 Javascript
JS更改select内option属性的方法
2015/10/14 Javascript
jQuery操作基本控件方法实例分析
2015/12/31 Javascript
javascript中apply、call和bind的使用区别
2016/04/05 Javascript
JS中使用apply、bind实现为函数或者类传入动态个数的参数
2016/04/26 Javascript
详解Vue-Cli 异步加载数据的一些注意点
2017/08/12 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
2018/03/05 Javascript
详解微信小程序的 request 封装示例
2018/08/21 Javascript
element-ui table span-method(行合并)的实现代码
2018/12/20 Javascript
nodejs对mongodb数据库的增加修删该查实例代码
2020/01/05 NodeJs
原生JS实现萤火虫效果
2020/03/07 Javascript
vue中使用vue-pdf的方法详解
2020/09/05 Javascript
vue 项目@change多个参数传值多个事件的操作
2021/01/29 Vue.js
在Windows8上的搭建Python和Django环境
2014/07/03 Python
用Python的Flask框架结合MySQL写一个内存监控程序
2015/11/07 Python
python调用java的jar包方法
2018/12/15 Python
Python使用dict.fromkeys()快速生成一个字典示例
2019/04/24 Python
对Python 检查文件名是否规范的实例详解
2019/06/10 Python
Python中如何引入第三方模块
2020/05/27 Python
python爬虫判断招聘信息是否存在的实例代码
2020/11/20 Python
python爬虫分布式获取数据的实例方法
2020/11/26 Python
CSS3制作Dropdown下拉菜单的方法
2015/07/18 HTML / CSS
印尼在线精品店:Berrybenka.com
2016/10/22 全球购物
阿迪达斯荷兰官方网站:adidas荷兰
2018/03/16 全球购物
2014年语文教师工作总结
2014/12/18 职场文书
西双版纳导游词
2015/02/03 职场文书
餐厅如何利用“营销策略”扭转亏本局面
2019/10/15 职场文书