數組去重--這幾種方法夠不?

wendux 發布于2019-08-21 15:01 / 2343人閱讀

摘要：數組去重是校招面試的必考知識點。以下就是筆者所實現的數組去重的幾種簡單的方式。結合實現這種方法的關鍵點就是判斷是否相同的時候不要忽略對元素類型的判斷。以上就是筆者所想到的幾個數組去重的方式大家如果有更好的方法歡迎留言。

數組去重,是校招面試的必考知識點。簡單的說,數組去重就是將一個數組中的相同的元素刪除,只保留其中的一個。這里的相同其實是一個陷阱,有好多同學只認為值相等即為相同,而忽略類類型的判斷。所以大家在進行數組去重的時候,一定要考慮周全。以下,就是筆者所實現的數組去重的幾種簡單的方式。

1、Set實現

第一種方法就是使用es6新增的Array.from()和new Set()。如果現在你還不了解es6,那你可真是out了。建議閱讀ECMAScript 6 入門或者learn-es2015。

Array.prototype.unique = function() {
  return Array.from(new Set(this));
}

2、結合{}實現

這種方法的關鍵點就是：判斷是否相同的時候,不要忽略對元素類型的判斷。

Array.prototype.unique = function() {
  var json = {};
  var result = [];
  this.forEach(function(value){
    var type = Object.prototype.toString.call(value).match(/s(w+)/)[1].toLowerCase();
    if(!((type + "-"+value) in json)){
      json[type + "-"+value] = true;
      result.push(value);
    }
  })
  return result;
}

3、利用Array.prototype.filter實現

filter是es5中新增的數組的一個方法。不了解的同請閱讀Array.prototype.filter()

Array.prototype.unique = function() {
  var sortArr = this.sort();
  return sortArr.filter(function(v,i,context){
    return v !== context[i+1];
  })
}

4、利用Array.prototype.forEach實現

includes也是es6新增的方法。不了解的同請閱讀Array.prototype.includes()

Array.prototype.unique = function() {
  var result = [];
  this.forEach(function(v){
    if(!result.includes(v)){
      result.push(v);
    }
  })
  return result;
}

5、利用Array.prototype.splice()實現

這個方法是一個很常規的方法,關鍵點就是在splice一個元素之后,i要自減1。

Array.prototype.unique = function() {
  var sortArr = this.sort(),
    i = 0;
  for(; i < sortArr.length; i++){
    if(sortArr[i] === sortArr[i+1]){
      sortArr.splice(i,1);
      i--;
    }
  }
  return sortArr;
}

6、利用Array.prototype.reduce()實現

reduce是es5中新增的數組的一個方法。不了解的同學請閱讀Array.prototype.reduce()。

Array.prototype.unique = function() {
  var sortArr = this.sort(), result = [];
  sortArr.reduce((v1,v2) => {
    if(v1 !== v2){
      result.push(v1);
    }
    return v2;
  })
  result.push(sortArr[sortArr.length - 1]);
  return result;
}

以上就是筆者所想到的幾個數組去重的方式,大家如果有更好的方法,歡迎留言。也可以去我的github的倉庫snippetspr,這個倉庫主要用于前端代碼片段的搜集,歡迎大家踴躍貢獻。

云服務器 GPU云服務器數組去重數組去重二維數組去重 php數組去重

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88067.html

前端空間 - 收藏集 - 掘金

摘要：封裝手寫的方筆記使用檢測文件前端掘金副標題可以做什么以及使用中會遇到的坑。目的是幫助人們用純中文指南實現復選框中多選功能前端掘金作者緝熙簡介是推出的一個天挑戰。深入理解 JavaScript Errors 和 Stack Traces - 前端 - 掘金譯者注：本文作者是著名 JavaScript BDD 測試框架 Chai.js 源碼貢獻者之一，Chai.js 中會遇到很多異常處理...

you_De 2019-08-29 12:34 評論0 收藏0
前端空間 - 收藏集 - 掘金

摘要：封裝手寫的方筆記使用檢測文件前端掘金副標題可以做什么以及使用中會遇到的坑。目的是幫助人們用純中文指南實現復選框中多選功能前端掘金作者緝熙簡介是推出的一個天挑戰。深入理解 JavaScript Errors 和 Stack Traces - 前端 - 掘金譯者注：本文作者是著名 JavaScript BDD 測試框架 Chai.js 源碼貢獻者之一，Chai.js 中會遇到很多異常處理...

lwx12525 2019-08-20 16:35 評論0 收藏0
JS程序

摘要：設計模式是以面向對象編程為基礎的，的面向對象編程和傳統的的面向對象編程有些差別，這讓我一開始接觸的時候感到十分痛苦，但是這只能靠自己慢慢積累慢慢思考。想繼續了解設計模式必須要先搞懂面向對象編程，否則只會讓你自己更痛苦。 JavaScript 中的構造函數學習總結。知識只有分享才有存在的意義。是時候替換你的 for 循環大法了~ 《小分享》JavaScript中數組的那些迭代方法~ ...

melody_lql 2019-08-22 11:22 評論0 收藏0
2018年5月前端面試題

摘要：在上家公司裸辭之后，經過一段時間休整，月中下旬面試了一些公司，由于本人框架使用的是，所以面試題涉及到框架的都是，現將面試題整理一下列舉常用的特性。事件冒泡以及事件捕獲。其他前端分頁和后端分頁優缺點。包含多個子節點及孫節點，遍歷。在上家公司裸辭之后，經過一段時間休整，5月中下旬面試了一些公司，由于本人框架使用的是vue，所以面試題涉及到框架的都是vue，現將面試題整理一下： es6 ...

wwolf 2019-08-26 11:55 評論0 收藏0
2018年5月前端面試題

摘要：在上家公司裸辭之后，經過一段時間休整，月中下旬面試了一些公司，由于本人框架使用的是，所以面試題涉及到框架的都是，現將面試題整理一下列舉常用的特性。事件冒泡以及事件捕獲。其他前端分頁和后端分頁優缺點。包含多個子節點及孫節點，遍歷。在上家公司裸辭之后，經過一段時間休整，5月中下旬面試了一些公司，由于本人框架使用的是vue，所以面試題涉及到框架的都是vue，現將面試題整理一下： es6 ...

Lavender 2019-08-02 10:35 評論0 收藏0