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

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

高洛峰
高洛峰原創
2017-02-03 13:01:281306瀏覽

數組的判斷

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

首先我們都知道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