Js数组去重的多种方法

你的名字 2021-08-19 14:44 504阅读 0赞

### 方法一 ###

**原理：利用双层循环将相邻元素  arr\[i\]和arr\[i+1\] 进行比较，相等则数组删除arr\[i+1\]  下标元素**

### 方法二 ###

**原理：双层循环依次比对**

### 方法三 ###

**原理：使用数组的indexOf()方法判断此元素在该数组中首次出现的位置下标与循环的下标是否相等**

> 注意：需要考**虑兼容性问题**，所有主要浏览器都支持 indexOf() 方法，但是 Internet Explorer 8 及 更早IE版本不支持该方法。

所以，兼容性改进：

> **使用Polyfill库解决js兼容性**
> 
> **Polyfill是一个js库，主要抚平不同浏览器之间对js实现的差异**。比如，html5的storage(session,local), 不同浏览器，不同版本，有些支持，有些不支持。Polyfill（Polyfill有很多，在GitHub上https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills），帮你把这些差异化抹平，不支持的变得支持了（典型做法是在IE浏览器中增加 window.XMLHttpRequest ，内部实现使用 ActiveXObject。）
> 
> 提到Polyfill，不得不提shim,**polyfill 是 shim的一种。**   
> **shim是将不同 api封装成一种，比如 jQuery的 $.ajax 封装了 XMLHttpRequest和 IE用ActiveXObject方式创建xhr对象。**它将一个新的API引入到一个旧的环境中,而且仅靠旧环境中已有的手段实现。  
>

### 方法四 ###

**原理： 利用数组中的 array.filter(function(currentValue,index,arr)) 方法返回新的数组，不会影响原数组数据**

var arr = ['apple','strawberry','banana','pear','apple','orange','orange','strawberry'];
     var r = arr.filter(function(element,index,self){
        //筛选逻辑代码，如果没有符合条件的元素则返回空数组。
        return self.indexOf(element) === index;
     });
     console.log(r);

> 注意：** filter() 不会对空数组进行检测。浏览器兼容支持IE9+;**

### 方法五 ###

**原理：通过indexOf方判断当前元素在数组中的索引如果与循环的下标相等则push() 添加到新数组中**

## ##

### 方法六 ###

**原理：利用空对象来记录新数组中已经存储过的元素**

### 方法七 ###

**原理：借助新数组  判断新数组中是否存在该元素如果不存在则将此元素添加到新数组中**

### 方法八 ###

**原理：数组排序后（转换成字符串排序的），临近元素不相等则添加到新数组中**

> 注意：注意sort()方法排序数值大于100时的问题

### 方法九 ###

**原理：数组排序后，临近元素比较后splice()方法删除重复项**

### 方法十 ###

**原理：借助新数组，当双层循环对比中没有重复项时添加到新数组**

**PS：*array*.indexOf(*item*,*start*)方法的使用**

表示从start下标位置开始在数组中查找item项在数组中的位置，*start默认是0。lastI*ndexOf(*item*,*start*) 查询的是最后一个item所在位置。查询不到都会返回-1的值。

let array=["hello","world","jane","food","tom","world","wahaha"];
        console.log(array.indexOf("world"));  // 1
        console.log(array.lastIndexOf("world"));// 5
    
        console.log(array.indexOf("world",0));  // 1
        console.log(array.indexOf("world",1));  // 1，查询到的依旧是第一个world字符串所在位置
        console.log(array.indexOf("world",2));  // 5，从第三个元素开始只能查到下标为5的world字符串
        console.log(array.indexOf("world",4));  // 5
        console.log(array.indexOf("world",5));  // 5
        console.log(array.indexOf("world",6));  // -1 ，查询不到返回-1
    
        console.log(array.indexOf("world",7));  // -1
        console.log(array.indexOf("world",-2));  // 5 ，负数下标表示从数组尾部开始倒数起点
        console.log(array.indexOf("world",-6));  // 1
    
        console.log(array.lastIndexOf("world", -2)); // 5

学习网址：https://blog.csdn.net/E\_li\_na/article/details/79925094

[https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global\_Objects/Array/indexOf][https_developer.mozilla.org_zh-CN_docs_Web_JavaScript_Reference_Global_Objects_Array_indexOf]

[https_developer.mozilla.org_zh-CN_docs_Web_JavaScript_Reference_Global_Objects_Array_indexOf]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf