资讯专栏INFORMATION COLUMN

<javaScript> 数组去重的方法总结(2017年)

hightopo / 3223人阅读

摘要:现在要求去重下面这个数组测试重复重复方法一测试重复重复去重后测试重复是新加的集合集合中的值不会重复。欢迎大家一起讨论提出新的去重方法。有任何错误请在评论指出。

</>复制代码

  1. 现在要求去重下面这个数组

[1, 2, 3, 3, 3, "0", "1", "2", "测试", "重复", "重复", NaN, NaN, false, false];

</>复制代码

  1. 方法一:ES6 Set()

</>复制代码

  1. let arr = [1, 2, 3, 3, 3, "0", "1", "2", "测试", "重复", "重复", NaN, NaN, false, false];
  2. arr = [...new Set(arr)]; //去重后: [ 1, 2, 3, "0", "1", "2", "测试", "重复", NaN, false ]

Set 是ES6新加的集合,集合中的值不会重复。 ...操作符 会将可遍历对象,转换为数组.

</>复制代码

  1. 方法二:利用对象

</>复制代码

  1. let arr = [1, 2, 3, 3, 3, "0", "1", "2", "测试", "重复", "重复", NaN, NaN, false, false];
  2. let obj ={};
  3. let temp=[];
  4. for( let i = 0; i < arr.length; i++ ) {
  5. let type= Object.prototype.toString.call(arr[i]);//不加类型 分不清 1 "1"
  6. if( !obj[ arr[i] +type] ) {
  7. temp.push( arr[i] );
  8. obj[ arr[i]+ type ] =true;//这里给true 利于代码阅读和判断。 如果给 0,"" ,false ,undefined 都会在if那里判断为 false 不利于代码阅读
  9. }
  10. }
  11. console.log(temp)//去重后: [ 1, 2, 3, "0", "1", "2", "测试", "重复", NaN, false ]

</>复制代码

  1. 方法三:sort排序后 在去重

</>复制代码

  1. let arr = [1, 2, 3, 3, 3, "0", "1", "2", "测试", "重复", "重复", NaN, NaN, false, false];
  2. arr = arr.sort();
  3. let temp =[];
  4. while(arr.length > 0) {
  5. if( Object.is(arr[0], arr[1]) ) {//Object.is() 用于比较2个值, 比===更靠谱 例如 Object.is(NaN,NaN) 会判断true
  6. arr.shift();
  7. }else{
  8. temp.push( arr.shift() );
  9. }
  10. }//此方法会清空原数组, 你可以复制个数组,在去进行操作
  11. console.log(temp)//去重后: [ "0", 1, "1", "2", 2, 3, NaN, false, "测试", "重复" ]

</>复制代码

  1. 方法四:for in

</>复制代码

  1. let arr = [1, 2, 3, 3, 3, "0", "1", "2", "测试", "重复", "重复", NaN, NaN, false, false];
  2. let temp =[];
  3. for(let i = 0; i < arr.length; i++) {
  4. if( !temp.includes( arr[i]) ) {//includes 检测数组是否有某个值 内部调用Object.is() 利用判断NaN
  5. temp.push(arr[i]);
  6. }
  7. }
  8. console.log(temp);//去重后: [ 1, 2, 3, "0", "1", "2", "测试", "重复", NaN, false ]

以上方法 在最新版本谷歌浏览器全部正常运行; 建议大家都用谷歌浏览器~~
但是还是要用Babel去转译这些代码 ,不然低级浏览器没法运行。
欢迎大家一起讨论, 提出新的去重方法。
有任何错误,请在评论指出。 谢谢大家。
刘志飞 2017.5.15

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/82983.html

相关文章

  • &lt;javaScript&gt; 数组重的方法总结(2017)

    摘要:现在要求去重下面这个数组测试重复重复方法一测试重复重复去重后测试重复是新加的集合集合中的值不会重复。欢迎大家一起讨论提出新的去重方法。有任何错误请在评论指出。 现在要求去重下面这个数组 [1, 2, 3, 3, 3, 0, 1, 2, 测试, 重复, 重复, NaN, NaN, false, false]; 方法一:ES6 Set() let arr = [1, 2, 3, 3, 3,...

    YanceyOfficial 评论0 收藏0
  • Python目录重的这些方法梳理

      此篇文章阐述了Python目录去重的这些方法,原文中根据实例编码推荐的十分详尽。对大家学习培训和工作具有很强的参照参考意义,需用的小伙伴可以参考一下  请定义函数,将列表[10,1,2,20,10,3,2,1,15,20,44,56,3,2,1]中的重复元素除去,写出至少3种方法。  方法一:利用集合去重  list_1=[10,1,2,20,10,3,2,1,15,20,44,56,3,2,...

    89542767 评论0 收藏0
  • 案例 - 收藏集 - 掘金

    摘要:同行这么做使用实现圆形进度条前端掘金在开发微信小程序的时候,遇到圆形进度条的需求。实现也谈数组去重前端掘金的数组去重是一个老生常谈的话题了。百度前端技术学院自定义前端掘金一标签概念元素表示用户界面中项目的标题。 闲话图片上传 - 掘金作者:孙辉,美团金融前端团队成员。15年毕业加入美团,相信技术,更相信技术只是大千世界里知识的一种,个人博客: https://sunyuhui.com ...

    张金宝 评论0 收藏0
  • 案例 - 收藏集 - 掘金

    摘要:同行这么做使用实现圆形进度条前端掘金在开发微信小程序的时候,遇到圆形进度条的需求。实现也谈数组去重前端掘金的数组去重是一个老生常谈的话题了。百度前端技术学院自定义前端掘金一标签概念元素表示用户界面中项目的标题。 闲话图片上传 - 掘金作者:孙辉,美团金融前端团队成员。15年毕业加入美团,相信技术,更相信技术只是大千世界里知识的一种,个人博客: https://sunyuhui.com ...

    huangjinnan 评论0 收藏0
  • JavaScript数组重的总结

    摘要:数组去重方法的总结前言在中数组是比较常用的,本文中总结了下数组去重的几种常用方法,如有问题,请指正。 JavaScript数组去重方法的总结 前言 在JavaScript中数组是比较常用的,本文中总结了下数组去重的几种常用方法,如有问题,请指正。 简单粗暴的一种,ES6中set方法: var arr = [1,2,2,3,3,4,5,5]; console.log([...new Se...

    Tonny 评论0 收藏0

发表评论

0条评论

hightopo

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<