JavaScript数组去重的几种方法详谈

 更新时间:2021年10月24日 17:09:08   作者:Maple-Ning  
这篇文章给大家总结下JavaScript数组去重的几种方法,面试中也经常会遇到这个问题。文中给大家引申的还有合并数组并去重的方法,感兴趣的朋友跟随脚本之家小编一起学习吧

一、Set去重

 function funSet(arr){
   return Array.from(new Set(arr));
 }

二、双重for循环去重

function funFor(arr){
  for(let i=0,len=arr.length;i<len;i++){
    for(let j=i+1,len=arr.length;j<len;j++){
      if(arr[i]===arr[j]){
        arr.splice(j,1);
        len--;
        j--;
      }
    }
  }
  return arr;
}

三、利用indexOf去重

function funIndex(arr){
  let newArr=[];
  for(let i=0;i<arr.length;i++){
    if(newArr.indexOf(arr[i])===-1){
      newArr.push(arr[i])
    }
  }
  return newArr;
}

四、利用icludes去重

function funInclude(arr){
  let newArr=[];
  for(let i=0;i<arr.length;i++){
    if(!newArr.includes(arr[i])){
      newArr.push(arr[i])
    }
  }
  return newArr;
}

五、filter

function funFilter(arr){
  return arr.filter(function(item,index){
    return arr.indexOf(item,0)===index;
  })
}

六、Map

function funMap(arr){
  let map=new Map();
  let newArr=[];
  for(let i=0,len=arr.length;i<len;i++){
    if(map.has(arr[i])){
      map.set(arr[i],true);
    }else{
      map.set(arr[i],false);
      newArr.push(arr[i]);
    }
  }
  return newArr;
}

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!

相关文章

  • javascript+HTML5的Canvas实现Lab单车动画效果

    javascript+HTML5的Canvas实现Lab单车动画效果

    这篇文章主要介绍了javascript+HTML5的Canvas实现Lab单车动画效果,涉及javascript使用Canvas配合数学运算实现自行车动画效果,需要的朋友可以参考下
    2015-08-08
  • 微信小程序实现皮肤功能(夜间模式)

    微信小程序实现皮肤功能(夜间模式)

    这篇文章主要给大家介绍了关于利用微信小程序实现皮肤功能,也就是实现夜间模式的相关资料,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-06-06
  • 必备的JS调试技巧汇总

    必备的JS调试技巧汇总

    试想一下:出现了某个bug,有人用几分钟就搞定了,有人用了半天或者一天都找不到原因所在。你愿意当前者还是后者呢?想当前者的就请好好看完本篇文章吧。文中涉及较多Gif演示动画请注意。
    2016-07-07
  • 详解如何在Canvas上实现坐标定位

    详解如何在Canvas上实现坐标定位

    这篇文章我们将来详细的给大家讲解一下如何在 canvas 上实现坐标的定位,文中有详细的代码示例供大家参考,具有一定的参考价值,需要的朋友可以参考下
    2023-08-08
  • 微信小程序实现富文本图片宽度自适应的方法

    微信小程序实现富文本图片宽度自适应的方法

    小程序里图片会显示不全,这时就应该做相应的处理,使小程序里图片显示正确,这篇文章主要介绍了微信小程序实现富文本图片宽度自适应的方法,感兴趣的小伙伴们可以参考一下
    2019-01-01
  • ES6新特征数字、数组、字符串

    ES6新特征数字、数组、字符串

    这篇文章主要介绍了es6新特征之数字数组和字符串的相关资料,需要的朋友可以参考下
    2016-10-10
  • JS async 函数的含义和用法实例总结

    JS async 函数的含义和用法实例总结

    这篇文章主要介绍了JS async 函数的含义和用法,结合实例形式总结分析了JS async 函数的基本功能、含义、使用方法及操作注意事项,需要的朋友可以参考下
    2020-04-04
  • 前端文件上传实现代码示例(文件上传,分片上传,断点续传)

    前端文件上传实现代码示例(文件上传,分片上传,断点续传)

    本文总结了普通文件上传和分片上传的方法,普通上传通过FormData和axios实现文件发送,而分片上传则将大文件切割并并行或串行上传,最后合并分片,提高上传效率和稳定性,还介绍了断点续传和处理上传过程中的异常情况,需要的朋友可以参考下
    2024-09-09
  • 微信小程序实现计算器功能

    微信小程序实现计算器功能

    这篇文章主要为大家详细介绍了微信小程序实现计算器功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-07-07
  • JS实现Date日期格式的本地化的方法小结

    JS实现Date日期格式的本地化的方法小结

    为了更好的更新多语言日期的显示,所以希望实现日期的本地化格式显示要求,常规的特殊字符型格式化无法满足显示要求,这里整理了几种我思考实现的本地化实现功能
    2024-06-06

最新评论