如何用js快速初始化數組
標籤(空格分隔): call apply
筆記版
#編寫程式碼中通常會有快速初始化陣列的需求,例如我們需要一個類似matlab裡的zeros
函數,假如這裡我們需要產生一個0-23的陣列用來表示一天24小時。
最基本的做法如下:
function(){ let hours = []; for(let k = 0; k < 24; k++ ) hours.push(k); return hours; }
下面我們來思考如何用更優雅的方式實現。
考慮使用new Array(24)
+ map
的方法來實作。
程式碼如下:
Array(24).map((_, h) => h);
注意,這裡map
的第二個參數是索引,平常用的少,這裡把索引當作數值。
結果與預期並不符合,為啥呢?
簡單搜尋了一下,發現時因為js裡的稀疏數組的邏輯導致的。
我們先來看看下面的程式碼:
let a = []; a[1000] = 2; console.log(a.length);// 1000a.forEach(x => console.log("hello"));// only one "hello"
js的處理邏輯是,對於沒有主動賦值的位置進行「空置」處理,對於這些「空置」未知,迭代器是不會理會的,這麼做最主要的目的就是避免不合理的賦值操作所導致的bug。
假設沒有這種邏輯,我們寫下了new Array(Date.now())
,這將導致系統新建一個非常大的數組,而實際上啥也沒存。
我們可以吧new Array(len)
幹的事情簡單理解為下面的過程:
function(len){ let r = []; r.length = len; return r;
這就是為什麼對new Array(len)
調用map
或forEach
的時候跟預期不一致了。
如何解決這個問題呢,除了使用new Array(len)
的形式,我們還可以使用new Array(1,2,3)
這種寫法來初始化數組,但是這麼寫就沒辦法實現我們寫初始化數組的目的了。
這時候我們想到了apply
,這個函數的第二個參數剛好就是一個數組,於是我們寫下了下面的程式碼。
// 借用apply Array.apply(null, Array(24)).map((_, h) => h); // [0, 1, ..., 24]
得到了我們希望的結果。這就說明,Array(24)
在apply
中當作參數的時候是被當做24個值對待的,因為這一點就保證了最後得到的陣列長度是24。
既然如此,我們當然同樣可以使用apply
的姊妹函數call
。
// 借用call Array.call(null, ...Array(24)).map((_, h) => h); // [0, 1... 23]
這也更確認了一件事,Array(len)
解構會得到len
個參數而非一個參數,當然call
的使用必須在支援解構操作符的環境中。
在熟悉了call
和apply
的原理後,我們可以進一步寫出下面的程式碼:
// Array本身 Array(...Array(24)).map((_, h) => h); // [0, 1, ..., 24]
這種形式已經足夠優雅了。
另外,在ES6
中,Array
提供了新方法fill
,借用該方法填充那些「空置」位,進而保證後續的操作能順利進行。
具體程式碼如下:
// 推荐 Array(24).fill(null).map((_, h) => h);
現在也比較推薦最後一種寫法,這種方法也最為直覺。
不過要注意fill
方法的使用,應該盡量避免盲目地填充,因為這樣會上面提到了js設計「空置」邏輯為了避免的bug。
有興趣的可以嘗試下面的程式碼:
// no-fillconsole.time("no-fill");let t = Array(5e7);console.timeEnd("no-fill");// fillconsole.time("fill");let q = Array(5e7).fill(null);console.timeEnd("fill");// => no-fill: 0.240ms// => fill: 3247.921ms
在瀏覽器中嘗試瀏覽器基本上會不回應,沒有設定更大的數值為了避免得不到結果。假設一個int佔用4個位元組的內存,這個fill會佔用200M的內存,而且需要循環5千萬次,這必然會佔用大量的CPU和內存,在單線程的js中是絕對不允許的。
#以上是如何用js快速初始化數組的詳細內容。更多資訊請關注PHP中文網其他相關文章!

熱AI工具

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

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

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

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

解決方法:1、重新安裝應用程式;2、修復或重新安裝DLL;3、系統還原或檢查點恢復;4、使用系統檔案檢查器(SFC)掃描;5、檢查啟動項目和服務;6、使用工具;7、查閱官方文件或論壇;8、考慮安全軟體;9、檢視事件檢視器;10、尋求專家協助等等。

WebSocket與JavaScript:實現即時監控系統的關鍵技術引言:隨著互聯網技術的快速發展,即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用,並給出程式碼範例,詳細解釋其實作原理。一、WebSocket技

win7系統是一款非常優秀的高效能係統,在對win7的不斷使用中有很多的朋友都在問win7怎麼初始化電腦!今天小編為大家帶來的就是win7電腦恢復出廠設定的操作方法。 win7怎麼初始化電腦的相關資訊:圖文詳解操作步驟:1、開啟“開始功能表”,然後進入。 2、點選進入左側底部的設定。 3、在Win10更新和恢復設定的介面中,選擇。 4、點選「刪除所有內容並重新安裝Windows」下方的。 5.可以看到如下「初始化」設定了,然後點選。 6、進入「你的電腦有多個驅動器」設定選項,這裡有和兩個選項,可以根據情況選擇

許多遊戲玩家遇到了遊戲無法初始化圖形系統的令人沮喪的問題。這篇文章將深入探討這個問題背後的常見原因,並找到簡單而有效的解決方案,讓你重新回到棋盤上,並在任何時間內通過關卡。因此,如果你在過山車大亨、刺客信條、托尼霍克的職業溜冰者等中收到無法初始化圖形系統錯誤訊息,請遵循本文中提到的解決方案。初始化錯誤無法初始化圖形系統。不支援顯示卡。修復無法初始化圖形系統錯誤訊息要解決過山車大亨、刺客信條、托尼霍克的專業溜冰者等遊戲中的無法初始化圖形系統錯誤,可以嘗試執行以下解決方法:更新顯示卡驅動程式在兼容模

win7系統是一款非常優秀的高效能係統,最近一段時間裡有很多win7系統的小夥伴們都在找win7怎麼初始化網路設定的方法,今天小編為大家帶來的就是win7電腦網路初始化的詳細教程一起來看看吧。 win7怎麼初始化網路設定的詳細教學:圖文操作步驟:1、點“開始”選單,找到並開啟“控制台”,進去之後再點“網路和共用中心”。 2、然後找到並點選「更改適配器設備」。 3.接下來,在打開的視窗中,滑鼠右鍵點擊“本地連接”,再點“屬性”。 4.開啟之後,就找到“Internet協定版本(TCP/IPv4)”,再雙

對比SpringBoot與SpringMVC,了解它們的差異隨著Java開發的不斷發展,Spring框架已經成為了許多開發人員和企業的首選。在Spring的生態系中,SpringBoot和SpringMVC是兩個非常重要的組件。雖然它們都是基於Spring框架的,但在功能和使用方式上卻有一些區別。本文將聚焦在SpringBoot與Sprin

Win11系統中「我的電腦」路徑有何不同?快速找方法!隨著Windows系統的不斷更新,最新的Windows11系統也帶來了一些新的變化和功能。其中一個常見的問題是使用者在Win11系統中找不到「我的電腦」的路徑,這在先前的Windows系統中通常是很簡單的操作。本文將介紹Win11系統中「我的電腦」的路徑有何不同,以及快速尋找的方法。在Windows1

JavaScript和WebSocket:打造高效的即時天氣預報系統引言:如今,天氣預報的準確性對於日常生活以及決策制定具有重要意義。隨著技術的發展,我們可以透過即時獲取天氣數據來提供更準確可靠的天氣預報。在本文中,我們將學習如何使用JavaScript和WebSocket技術,來建立一個高效的即時天氣預報系統。本文將透過具體的程式碼範例來展示實現的過程。 We
