目錄
筆記版
首頁 web前端 js教程 如何用js快速初始化數組

如何用js快速初始化數組

Sep 09, 2017 am 10:43 AM
javascript 初始化 快速

標籤(空格分隔): 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)調用mapforEach的時候跟預期不一致了。
如何解決這個問題呢,除了使用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的使用必須在支援解構操作符的環境中。

在熟悉了callapply的原理後,我們可以進一步寫出下面的程式碼:

// 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中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡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脫衣器

Video Face Swap

Video Face Swap

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

熱工具

記事本++7.3.1

記事本++7.3.1

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

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

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

動態連結函式庫初始化例程失敗什麼辦 動態連結函式庫初始化例程失敗什麼辦 Dec 29, 2023 am 10:30 AM

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

WebSocket與JavaScript:實現即時監控系統的關鍵技術 WebSocket與JavaScript:實現即時監控系統的關鍵技術 Dec 17, 2023 pm 05:30 PM

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

win7怎麼初始化電腦 win7怎麼初始化電腦 Jan 07, 2024 am 11:53 AM

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

修復無法初始化PC上的圖形系統錯誤 修復無法初始化PC上的圖形系統錯誤 Mar 08, 2024 am 09:55 AM

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

如何重置win7網路設置 如何重置win7網路設置 Dec 26, 2023 pm 06:51 PM

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

理解SpringBoot和SpringMVC之間的差異及比較 理解SpringBoot和SpringMVC之間的差異及比較 Dec 29, 2023 am 09:20 AM

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

Win11系統中「我的電腦」路徑有何不同?快速找方法! Win11系統中「我的電腦」路徑有何不同?快速找方法! Mar 29, 2024 pm 12:33 PM

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

JavaScript與WebSocket:打造高效率的即時天氣預報系統 JavaScript與WebSocket:打造高效率的即時天氣預報系統 Dec 17, 2023 pm 05:13 PM

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

See all articles