首頁 web前端 js教程 Javascript中陣列去重拍平的方法範例

Javascript中陣列去重拍平的方法範例

Feb 03, 2017 pm 01:01 PM

數組的判斷

在說如何進行數組的去重和拍平之前,先說一下怎麼判斷數組,因為要進行數組的處理當然要先判斷下傳過來的數據是不是數組。

首先我們都知道js的資料型別只有5種,分別是Undefined、Null、Boolean、Number和String,數組只是一個對象,用typeof([])傳回的結果知識一個Object的字串,因此我們需要透過其他手段來判斷它,這裡就說兩種方法。

第一種用instenceof方法

instanceof是ES5提供的一個方法,它可以用來判斷實例是否是某個類別的實例,例如:

[] instenceof Array
//返回结果是true
登入後複製

這種方法的不好之處就是相容性不好,對於一些低版瀏覽器不支援ES5的就要懵逼了。

第二種方法是透過原型鏈的方式來判斷

了解js的話都應該懂得js這個語言的特點就是原型鍊式的,所有的物件都繼承自Object.prototype,而prototype上又有toString( )方法,這個toString()方法是做什麼用的呢?就是以字串的形式傳回目前物件的值。第一次看可能這句話可能不大明白,舉例:

var num = 123;
num.toString(); //返回结果为"123"
登入後複製

有沒有看懂一點?就是傳回num這個物件值的字串形式,也就是」123”。好了,這跟判斷數組有什麼關係?想一下所有的物件都繼承自Object.prototype,數組也是啊,如果把數組送到Object.prototype裡作為一個“值”,在調用toString()方法,那它應該顯示出這個物件的名字才對啊,這就是判斷的原理,程式碼如下:

Object.prototype.toString.call([]); //结果是"[object Array]"
登入後複製

像jQuery這樣的腳本庫的isArray()用的就是這個方法。

陣列拍平

說完判直奔主題,先是陣列拍平,什麼是陣列拍平呢?就是把[1,[2,[3,4],5]]鋪成[1,2,3,4,5]。關於陣列拍平我有兩種思路,第二種比較奇葩,留點懸念吧哈哈。

第一種是常規思路

對數組進行遍歷,如果數組裡面套著數組就繼續遍歷裡面的,直到把每個元素都遍歷完,然後一邊遍歷一邊塞入新的數組變數裡,這樣就完成拍平了,具體程式碼如下:

panelArr = function(arr){
 var newArr = [];
 var isArray = function(obj) {
  return Object.prototype.toString.call(obj) === '[object Array]';
 };
 var dealArr = function(arr){
  for (var i = 0;i<arr.length;i++){
   isArray(arr[i]) ? dealArr(arr[i]) : newArr.push(arr[i]);
  }
 };
 dealArr(arr);
 return newArr;
};
console.log(panelArr([1,[2,3]])); //[1,2,3]
登入後複製

   

當然這個方法也可以寫在Array.prototype裡,使用起來更方便。這個方法有個問題就是記憶體佔用上,因為採用遞歸如果資料量大了會佔用大量大量記憶體。

第二種奇葩思路

第二種思路就是不把數組來看,也不遍歷了直接拍平。聽起來略奇怪,怎麼能不遍歷就拍平?就是使用join()方法,將陣列轉換成字串,然後正規去掉符號最後合併,這個方法在使用注意不能join("") ,因為如果這樣分割的話,13是1和3還是13?不好區分,程式碼如下:

var arr = [1,2,[33,43],20,19];
arr.join(".").replace(/,/g,".").split("."); //["1", "2", "33", "43", "20", "19"]
登入後複製

   

注意:這個方法會轉換資料型別成字串。

數組去重

下面是數組去重,舉例來說就是[1,2,3,3,4,5,5,5,6]變成[1,2,3,4,5,6 ]。這個實現的核心就是去重這裡,如果能夠快速判斷元素是否重複就是關鍵。

還是兩種思路

第一種遍歷的思路

就是準備一個新的數組變量,塞入前每次對這個變量進行遍歷看看是否有重複的,如果沒有就塞入,最後生成的新數組就是去重後的數組了。範例程式碼如下:

function uniqueArr(arr){
 var newArr = [];
 newArr.push(arr[0]);
 for(var i = 1; i<arr.length;i++){
 var repeat = false;
 for(var j = 0;j<newArr.length;j++){
 if(arr[i] == newArr[j]){
 repeat = true;
 }
 }
 if(!repeat){
 newArr.push(arr[i]);
 }
 }
 return newArr;
}
登入後複製

   

第二種使用哈希判斷

上面那個時間複雜度為O(n^2)的方法並不是什麼好方法,它的瓶頸就是判斷是否重複這裡,所以我們換成一個更有效率的檢索是否重複的方法,這個方法就是哈希,為什麼哈希檢索最快?翻翻資料結構吧,這裡就不在贅述了。

這個方法的想法就是在原始數組和去重數組之間加入一個哈希過濾,總的來看就是原數組資料交給哈希,看是否有重複,若是沒有則加進去。具體程式碼如下:

function uniqueArr(arr){
 var newArr = [],
 hashFilter = {};
 for(var i = 0;i<arr.length;i++){
 if(!hashFilter[arr[i]]){
 //若不存在将此属性对应的值改为true,并塞入去重数组中
 hashFilter[arr[i]] = true;
 newArr.push(arr[i]);
 }
 }
 return newArr;
}
登入後複製

我青睞第二種,因為在判斷是否重複這裡真的很快,可以說是秒出。

總結

以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或工作能帶來一定的幫助,如果有疑問大家可以留言交流。

更多Javascript中數組去重與拍平的方法範例相關文章請關注PHP中文網!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它們
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

如何創建和發布自己的JavaScript庫? 如何創建和發布自己的JavaScript庫? Mar 18, 2025 pm 03:12 PM

文章討論了創建,發布和維護JavaScript庫,專注於計劃,開發,測試,文檔和促銷策略。

如何在瀏覽器中優化JavaScript代碼以進行性能? 如何在瀏覽器中優化JavaScript代碼以進行性能? Mar 18, 2025 pm 03:14 PM

本文討論了在瀏覽器中優化JavaScript性能的策略,重點是減少執行時間並最大程度地減少對頁面負載速度的影響。

前端熱敏紙小票打印遇到亂碼問題怎麼辦? 前端熱敏紙小票打印遇到亂碼問題怎麼辦? Apr 04, 2025 pm 02:42 PM

前端熱敏紙小票打印的常見問題與解決方案在前端開發中,小票打印是一個常見的需求。然而,很多開發者在實...

如何使用瀏覽器開發人員工具有效調試JavaScript代碼? 如何使用瀏覽器開發人員工具有效調試JavaScript代碼? Mar 18, 2025 pm 03:16 PM

本文討論了使用瀏覽器開發人員工具的有效JavaScript調試,專注於設置斷點,使用控制台和分析性能。

誰得到更多的Python或JavaScript? 誰得到更多的Python或JavaScript? Apr 04, 2025 am 12:09 AM

Python和JavaScript開發者的薪資沒有絕對的高低,具體取決於技能和行業需求。 1.Python在數據科學和機器學習領域可能薪資更高。 2.JavaScript在前端和全棧開發中需求大,薪資也可觀。 3.影響因素包括經驗、地理位置、公司規模和特定技能。

如何使用源地圖調試縮小JavaScript代碼? 如何使用源地圖調試縮小JavaScript代碼? Mar 18, 2025 pm 03:17 PM

本文說明瞭如何使用源地圖通過將其映射回原始代碼來調試JAVASCRIPT。它討論了啟用源地圖,設置斷點以及使用Chrome DevTools和WebPack之類的工具。

如何使用JavaScript將具有相同ID的數組元素合併到一個對像中? 如何使用JavaScript將具有相同ID的數組元素合併到一個對像中? Apr 04, 2025 pm 05:09 PM

如何在JavaScript中將具有相同ID的數組元素合併到一個對像中?在處理數據時,我們常常會遇到需要將具有相同ID�...

console.log輸出結果差異:兩次調用為何不同? console.log輸出結果差異:兩次調用為何不同? Apr 04, 2025 pm 05:12 PM

深入探討console.log輸出差異的根源本文將分析一段代碼中console.log函數輸出結果的差異,並解釋其背後的原因。 �...

See all articles