js去重方法总结

男娘i 2022-05-20 07:23 183阅读 0赞

**一、前言：**

我们在实际工作中，或者在面试找工作时，都会用到或者被问到一个问题，那就是“数组如何去重”。是的，这个问题有很多种解决方案，看看下面的十种方式吧！

**二、数组去重方式大汇总：**

**Methods 1**: 思路：定义一个新数组，并存放原数组的第一个元素，然后将元素组一一和新数组的元素对比，若不同则存放在新数组中。

[?][Link 1]

<table style="margin-left:0px;width:643px;"> 
 <tbody> 
 <tr> 
 <td style="border-color:#cccccc;vertical-align:baseline;"> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 </td> 
 <td style="border-color:#cccccc;vertical-align:baseline;width:603px;"> <code>function</code> <code>unique(arr){ </code> <code>&nbsp;</code><code>var</code> <code>res = [arr[0]];</code> <code>&nbsp;</code><code>for</code><code>(</code><code>var</code> <code>i=1; i&lt;arr.length; i++){ </code> <code>&nbsp;&nbsp;</code><code>var</code> <code>repeat = </code><code>false</code><code>;</code> <code>&nbsp;&nbsp;</code><code>for</code><code>(</code><code>var</code> <code>j=0; j&lt;res.length; j++){ </code> <code>&nbsp;&nbsp;&nbsp;</code><code>if</code><code>(arr[i] === res[j]){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>repeat = </code><code>true</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>break</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>if</code><code>(!repeat){ </code> <code>&nbsp;&nbsp;&nbsp;</code><code>res.push(arr[i]);</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;</code><code>}</code> <code>&nbsp;</code><code>return</code> <code>res;</code> <code>}</code> <code>console.log(</code><code>'------------方法一---------------'</code><code>);</code> &nbsp; <code>console.log(unique([1,1,2,3,5,3,1,5,6,7,4]));</code> </td> 
 </tr> 
 </tbody> 
</table>

**Methods 2: **思路：先将原数组排序，在与相邻的进行比较，如果不同则存入新数组。

[?][Link 1]

<table style="margin-left:0px;width:643px;"> 
 <tbody> 
 <tr> 
 <td style="border-color:#cccccc;vertical-align:baseline;"> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 </td> 
 <td style="border-color:#cccccc;vertical-align:baseline;width:603px;"> <code>function</code> <code>unique2(arr){ </code> <code>&nbsp;</code><code>var</code> <code>arr2 = arr.sort();</code> <code>&nbsp;</code><code>var</code> <code>res = [arr2[0]];</code> <code>&nbsp;</code><code>for</code><code>(</code><code>var</code> <code>i=1; i&lt;arr2.length; i++){ </code> <code>&nbsp;&nbsp;</code><code>if</code><code>(arr2[i] !== res[res.length-1]){ </code> <code>&nbsp;&nbsp;&nbsp;</code><code>res.push(arr2[i]);</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;</code><code>} </code> <code>&nbsp;</code><code>return</code> <code>res;</code> <code>}</code> &nbsp; <code>console.log(</code><code>'------------方法二---------------'</code><code>);</code> &nbsp; <code>console.log(unique2([1,1,2,3,5,3,1,5,6,7,4]));</code> </td> 
 </tr> 
 </tbody> 
</table>

**Methods 3**: 利用对象属性存在的特性，如果没有该属性则存入新数组。

[?][Link 1]

<table style="margin-left:0px;width:643px;"> 
 <tbody> 
 <tr> 
 <td style="border-color:#cccccc;vertical-align:baseline;"> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 </td> 
 <td style="border-color:#cccccc;vertical-align:baseline;width:603px;"> <code>function</code> <code>unique3(arr){ </code> <code>&nbsp;</code><code>var</code> <code>res = [];</code> <code>&nbsp;</code><code>var</code> <code>obj = {};</code> <code>&nbsp;</code><code>for</code><code>(</code><code>var</code> <code>i=0; i&lt;arr.length; i++){ </code> <code>&nbsp;&nbsp;</code><code>if</code><code>( !obj[arr[i]] ){ </code> <code>&nbsp;&nbsp;&nbsp;</code><code>obj[arr[i]] = 1;</code> <code>&nbsp;&nbsp;&nbsp;</code><code>res.push(arr[i]);</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;</code><code>} </code> <code>&nbsp;</code><code>return</code> <code>res;</code> <code>}</code> &nbsp; <code>console.log(</code><code>'------------方法三---------------'</code><code>);</code> &nbsp; <code>console.log(unique3([1,1,2,3,5,3,1,5,6,7,4]));</code> </td> 
 </tr> 
 </tbody> 
</table>

**Methods 4:** 利用数组的indexOf下标属性来查询。

[?][Link 1]

<table style="margin-left:0px;width:643px;"> 
 <tbody> 
 <tr> 
 <td style="border-color:#cccccc;vertical-align:baseline;"> 1 2 3 4 5 6 7 8 9 10 11 12 13 </td> 
 <td style="border-color:#cccccc;vertical-align:baseline;width:603px;"> <code>function</code> <code>unique4(arr){ </code> <code>&nbsp;</code><code>var</code> <code>res = [];</code> <code>&nbsp;</code><code>for</code><code>(</code><code>var</code> <code>i=0; i&lt;arr.length; i++){ </code> <code>&nbsp;&nbsp;</code><code>if</code><code>(res.indexOf(arr[i]) == -1){ </code> <code>&nbsp;&nbsp;&nbsp;</code><code>res.push(arr[i]);</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;</code><code>}</code> <code>&nbsp;</code><code>return</code> <code>res;</code> <code>}</code> &nbsp; <code>console.log(</code><code>'------------方法四---------------'</code><code>);</code> &nbsp; <code>console.log(unique4([1,1,2,3,5,3,1,5,6,7,4]));</code> </td> 
 </tr> 
 </tbody> 
</table>

**Methods 5**: 利用数组原型对象上的includes方法。

[?][Link 1]

<table style="margin-left:0px;width:643px;"> 
 <tbody> 
 <tr> 
 <td style="border-color:#cccccc;vertical-align:baseline;"> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 </td> 
 <td style="border-color:#cccccc;vertical-align:baseline;width:603px;"> <code>function</code> <code>unique5(arr){ </code> <code>&nbsp;</code><code>var</code> <code>res = [];</code> <code>&nbsp;</code>&nbsp; <code>&nbsp;</code><code>for</code><code>(</code><code>var</code> <code>i=0; i&lt;arr.length; i++){ </code> <code>&nbsp;&nbsp;</code><code>if</code><code>( !res.includes(arr[i]) ){ </code><code>// 如果res新数组包含当前循环item</code> <code>&nbsp;&nbsp;&nbsp;</code><code>res.push(arr[i]);</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;</code><code>}</code> <code>&nbsp;</code><code>return</code> <code>res;</code> <code>}</code> &nbsp; <code>console.log(</code><code>'------------方法五---------------'</code><code>);</code> &nbsp; <code>console.log(unique5([1,1,2,3,5,3,1,5,6,7,4]));</code> </td> 
 </tr> 
 </tbody> 
</table>

**Methods 6**: 利用数组原型对象上的 filter 和 includes方法。

[?][Link 1]

<table style="margin-left:0px;width:643px;"> 
 <tbody> 
 <tr> 
 <td style="border-color:#cccccc;vertical-align:baseline;"> 1 2 3 4 5 6 7 8 9 10 11 12 </td> 
 <td style="border-color:#cccccc;vertical-align:baseline;width:603px;"> <code>function</code> <code>unique6(arr){ </code> <code>&nbsp;</code><code>var</code> <code>res = [];</code> <code>&nbsp;</code>&nbsp; <code>&nbsp;</code><code>res = arr.filter(</code><code>function</code><code>(item){ </code> <code>&nbsp;&nbsp;</code><code>return</code> <code>res.includes(item) ? </code><code>''</code> <code>: res.push(item);</code> <code>&nbsp;</code><code>});</code> <code>&nbsp;</code><code>return</code> <code>res;</code> <code>}</code> &nbsp; <code>console.log(</code><code>'------------方法六---------------'</code><code>);</code> &nbsp; <code>console.log(unique6([1,1,2,3,5,3,1,5,6,7,4]));</code> </td> 
 </tr> 
 </tbody> 
</table>

**Methods 7**: 利用数组原型对象上的 forEach 和 includes方法。

[?][Link 1]

<table style="margin-left:0px;width:643px;"> 
 <tbody> 
 <tr> 
 <td style="border-color:#cccccc;vertical-align:baseline;"> 1 2 3 4 5 6 7 8 9 10 11 12 </td> 
 <td style="border-color:#cccccc;vertical-align:baseline;width:603px;"> <code>function</code> <code>unique7(arr){ </code> <code>&nbsp;</code><code>var</code> <code>res = [];</code> <code>&nbsp;</code>&nbsp; <code>&nbsp;</code><code>arr.forEach(</code><code>function</code><code>(item){ </code> <code>&nbsp;&nbsp;</code><code>res.includes(item) ? </code><code>''</code> <code>: res.push(item);</code> <code>&nbsp;</code><code>}); </code> <code>&nbsp;</code><code>return</code> <code>res;</code> <code>}</code> &nbsp; <code>console.log(</code><code>'------------方法七---------------'</code><code>);</code> &nbsp; <code>console.log(unique7([1,1,2,3,5,3,1,5,6,7,4]));</code> </td> 
 </tr> 
 </tbody> 
</table>

**Methods 8**: 利用数组原型对象上的 splice 方法。

[?][Link 1]

<table style="margin-left:0px;width:643px;"> 
 <tbody> 
 <tr> 
 <td style="border-color:#cccccc;vertical-align:baseline;"> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 </td> 
 <td style="border-color:#cccccc;vertical-align:baseline;width:603px;"> <code>function</code> <code>unique8(arr){ </code> <code>&nbsp;</code><code>var</code> <code>i,</code> <code>&nbsp;&nbsp;</code><code>j,</code> <code>&nbsp;&nbsp;</code><code>len = arr.length; </code> <code>&nbsp;</code><code>for</code><code>(i = 0; i &lt; len; i++){ </code> <code>&nbsp;&nbsp;</code><code>for</code><code>(j = i + 1; j &lt; len; j++){ </code> <code>&nbsp;&nbsp;&nbsp;</code><code>if</code><code>(arr[i] == arr[j]){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>arr.splice(j,1);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>len--;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>j--;</code> <code>&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;</code><code>}</code> <code>&nbsp;</code><code>return</code> <code>arr;</code> <code>}</code> &nbsp; <code>console.log(</code><code>'------------方法八---------------'</code><code>);</code> &nbsp; <code>console.log(unique8([1,1,2,3,5,3,1,5,6,7,4]));</code> </td> 
 </tr> 
 </tbody> 
</table>

**Methods 9**: 利用数组原型对象上的 lastIndexOf 方法。

[?][Link 1]

<table style="margin-left:0px;width:643px;"> 
 <tbody> 
 <tr> 
 <td style="border-color:#cccccc;vertical-align:baseline;"> 1 2 3 4 5 6 7 8 9 10 11 </td> 
 <td style="border-color:#cccccc;vertical-align:baseline;width:603px;"> <code>function</code> <code>unique9(arr){ </code> <code>&nbsp;</code><code>var</code> <code>res = []; </code> <code>&nbsp;</code><code>for</code><code>(</code><code>var</code> <code>i=0; i&lt;arr.length; i++){ </code> <code>&nbsp;&nbsp;</code><code>res.lastIndexOf(arr[i]) !== -1 ? </code><code>''</code> <code>: res.push(arr[i]);</code> <code>&nbsp;</code><code>}</code> <code>&nbsp;</code><code>return</code> <code>res;</code> <code>}</code> &nbsp; <code>console.log(</code><code>'------------方法九---------------'</code><code>);</code> &nbsp; <code>console.log(unique9([1,1,2,3,5,3,1,5,6,7,4]));</code> </td> 
 </tr> 
 </tbody> 
</table>

**Methods 10**: 利用 ES6的set 方法。

[?][Link 1]

<table style="margin-left:0px;width:643px;"> 
 <tbody> 
 <tr> 
 <td style="border-color:#cccccc;vertical-align:baseline;"> 1 2 3 4 5 6 7 8 </td> 
 <td style="border-color:#cccccc;vertical-align:baseline;width:611px;"> <code>function</code> <code>unique10(arr){ </code> <code>&nbsp;</code><code>//Set数据结构，它类似于数组，其成员的值都是唯一的</code> <code>&nbsp;</code><code>return</code> <code>Array.from(</code><code>new</code> <code>Set(arr)); </code><code>// 利用Array.from将Set结构转换成数组</code> <code>}</code> &nbsp; <code>console.log(</code><code>'------------方法十---------------'</code><code>);</code> &nbsp; <code>console.log(unique10([1,1,2,3,5,3,1,5,6,7,4]));</code> </td> 
 </tr> 
 </tbody> 
</table>

### 更多精彩技术分享请浏览本人博客：[https://blog.csdn.net/wohiusdashi][https_blog.csdn.net_wohiusdashi] ###

[Link 1]: https://www.jb51.net/article/121410.htm#
[https_blog.csdn.net_wohiusdashi]: https://blog.csdn.net/wohiusdashi