脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js 数组去重

JavaScript常见的五种数组去重的方式

 更新时间：2016年12月15日 10:34:38   作者：老板丶鱼丸粗面  
本文主要JavaScript常见的五种数组去重的方式进行一一思路分析实例介绍，易于理解与学习，具有很好的参考价值，需要的朋友一起来看下吧

大致介绍

JavaScript的数组去重问题在许多面试中都会遇到，现在做个总结

先来建立一个数组

var arr = [1,2,3,3,2,'我','我',34,'我的',NaN,NaN];

第一种

思路：建立一个临时数组，用for循环去依次判断arr中的每个项在临时数组中是否有相同的值，如果没有则将这个值添加到临时数组，如果有相同的值则不添加，最后返回这个临时数组

代码：

Array.prototype.removeDuplicate = function(){
  var n = [];
  for(var i=0;i<this.length;i++){
  if(n.indexOf(this[i]) == -1 ){
  n.push(this[i]);
  }
  }
 return n;
}
var m = arr.removeDuplicate();
console.log(m);//[1, 2, 3, "我", 34, "我的", NaN, NaN]

注意：不会去掉重复的NaN值

第二种　　　

思路：建立一个临时数组，用for循环利用indexOf()方法去依次判断arr中的每个项在arr中第一次出现的位置，如果这个项在arr中第一次出现的位置就是它的位置，表明在它之前没有相同的值则把它添加到临时数组中，如果这个项在arr中第一次出现的位置不是他的位置则表明在它之前有相同的值，则不把他添加到临时数组中；最后返回临时数组

代码：

Array.prototype.removeDuplicate = function(){
  var n = [];
  for(var i=0;i<this.length-1;i++){
  if(this.indexOf(this[i]) == i){
  n.push(this[i]);
  }
  }
 return n;
 }
 var m = arr.removeDuplicate();
 console.log(m);//[1, 2, 3, "我", 34, "我的"]

注意：会把NaN值删除

第三种

思路：建立一个临时对象，利用for循环检测这个临时对象有没有arr[i]这个属性，如果没有这个属性表明arr[i]在它之前没有和它重复的值。把临时对象的arr[i]属性设置为true，表明有这个属性并把这个项添加到临时数组中；最后返回临时数组

代码：

Array.prototype.removeDuplicate = function(){
  var n = [],m = {};
  for(var i=0;i<this.length;i++){
  if(!m[this[i]]){
  m[this[i]] = true;
  n.push(this[i]);
  }
  }
 return n;
 }
var m = arr.removeDuplicate();
console.log(m);//[1, 2, 3, "我", 34, "我的", NaN]

第四种

思路：先将这个数组排序，然后比较每个项和它后面的项的值是否相等，如果不相等则添加到临时数组中；最后返回临时数组

代码：

Array.prototype.removeDuplicate = function(){
 var n = [];
 this.sort();
 for(var i=0;i<this.length;i++){
 if(this[i] != this[i+1]){
  n.push(this[i]);
  }
 }
 return n;
 }
var m = arr.removeDuplicate();
console.log(m);//[1, 2, 3, 34, NaN, NaN, "我", "我的"]

注意：不会去掉重复的NaN值

第五种

思路：利用ES6的方法set方法去重，并用Array.from转换为数组

set是一种新的数据结构，它可以接收一个数组或者是类数组对象，自动去重其中的重复项目,返回一个对象

代码：

Array.prototype.removeDuplicate = function(){
 return (Array.from(new Set(this)));
 }
 var m = arr.removeDuplicate();
 console.log(m);//[1, 2, 3, "我", 34, "我的", NaN]

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • JavaScript实现滑块验证案例

    JavaScript实现滑块验证案例

    这篇文章主要为大家详细介绍了JavaScript实现滑块验证案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-01-01
  • JS中的几种循环和跳出方式

    JS中的几种循环和跳出方式

    这篇文章介绍了JS中的几种循环和跳出方式，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-07-07
  • vue2.0获取自定义属性的值

    vue2.0获取自定义属性的值

    这篇文章主要为大家详细介绍了vue2.0如何获取自定义属性的值，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-03-03
  • 基于JavaScript伪随机正态分布代码实例

    基于JavaScript伪随机正态分布代码实例

    这篇文章主要介绍了基于JavaScript伪随机正态分布代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-11-11
  • js 数组详细操作方法及解析合集

    js 数组详细操作方法及解析合集

    在开发中，数组的使用场景非常多，平日中也涉及到很多数组的api/相关操作，一直也没有对这块内容进行一块整理总结，很多时候就算用过几次这个api，在开发中也很容易忘记，还是要谷歌一下
    2018-06-06
  • JavaScript使用Promise实现分批处理接口请求

    JavaScript使用Promise实现分批处理接口请求

    当我们在实际项目中遇到需要批量发起上百条接口请求怎么办呢,本文就来为大家介绍一下JavaScript如何使用Promise实现分批处理接口请求,需要的小伙伴可以参考一下
    2023-11-11
  • JavaScript中的函数式编程详解

    JavaScript中的函数式编程详解

    这篇文章主要介绍了JavaScript中的函数式编程详解,需要的朋友可以参考下
    2020-08-08
  • JS实现1000以内被3或5整除的数字之和

    JS实现1000以内被3或5整除的数字之和

    今天在技术群里看到一道这样的提：求1000以内被3或5整除的数字之和。小编把我的解决办法分享到脚本之家平台，供大家参考
    2016-02-02
  • JavaScript设置首页和收藏页面的小例子

    JavaScript设置首页和收藏页面的小例子

    这篇文章介绍了JavaScript设置首页和收藏页面的小例子，有需要的朋友可以参考一下
    2013-11-11
  • Javascript函数式编程简单介绍

    Javascript函数式编程简单介绍

    什么是函数式编程？根据百度百科的描述，“函数式编程是种编程典范，它将电脑运算视为函数的计算。函数编程语言最重要的基础是 λ 演算（lambda calculus）。而且λ演算的函数可以接受函数当作输入（参数）和输出（返回值）。”
    2015-10-10

最新评论