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

數組的判斷

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

首先我們都知道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
JavaScript引擎:比較實施JavaScript引擎:比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時,效果會有所不同,因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析:將源碼轉換為詞法單元。 2.語法分析:生成抽象語法樹。 3.優化和編譯:通過JIT編譯器生成機器碼。 4.執行:運行機器碼。 V8引擎通過即時編譯和隱藏類優化,SpiderMonkey使用類型推斷系統,導致在相同代碼上的性能表現不同。

超越瀏覽器:現實世界中的JavaScript超越瀏覽器:現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制:1.通過Node.js實現服務器端編程,適用於高並發請求處理。 2.通過ReactNative進行移動應用開發,支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制,適用於硬件交互。

使用Next.js(後端集成)構建多租戶SaaS應用程序使用Next.js(後端集成)構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序(一個Edtech應用程序),您可以做同樣的事情。 首先,什麼是多租戶SaaS應用程序? 多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js(前端集成)構建多租戶SaaS應用程序如何使用Next.js(前端集成)構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成,並使用Next.js構建功能性Edtech SaaS應用程序。 前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript:探索網絡語言的多功能性JavaScript:探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言,因其多樣性和靈活性而廣泛應用。 1)前端開發:通過DOM操作和現代框架(如React、Vue.js、Angular)構建動態網頁和單頁面應用。 2)服務器端開發:Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發:通過ReactNative和Electron實現跨平台開發,提高開發效率。

JavaScript的演變:當前的趨勢和未來前景JavaScript的演變:當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript:它的作用以及為什麼重要神秘的JavaScript:它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石,它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發,極大地提升了用戶體驗和跨平台開發的靈活性。

Python還是JavaScript更好?Python還是JavaScript更好?Apr 06, 2025 am 12:14 AM

Python更适合数据科学和机器学习,JavaScript更适合前端和全栈开发。1.Python以简洁语法和丰富库生态著称,适用于数据分析和Web开发。2.JavaScript是前端开发核心,Node.js支持服务器端编程,适用于全栈开发。

See all articles

熱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.能量晶體解釋及其做什麼(黃色晶體)
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解鎖Myrise中的所有內容
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

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

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

WebStorm Mac版

WebStorm Mac版

好用的JavaScript開發工具

SecLists

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。