如何快速高效創(chuàng)建JavaScript 二維數(shù)組方法詳解
引言
在 JavaScript 中,創(chuàng)建二維數(shù)組是一個常見的需求,尤其是在開發(fā) Web 應(yīng)用程序和游戲時。
然而,為了避免使用復(fù)雜的代碼來創(chuàng)建二維數(shù)組,我們需要一種快速而高效的方法。
方法1: 使用雙重循環(huán)創(chuàng)建二維數(shù)組
在 JavaScript 中,使用雙重循環(huán)是創(chuàng)建二維數(shù)組的一種常見方法。以下是一個示例代碼:
function createArray(rows, cols) { var arr = new Array(rows); for (var i = 0; i < rows; i++) { arr[i] = new Array(cols); for (var j = 0; j < cols; j++) { arr[i][j] = 0; } } return arr; } // 創(chuàng)建一個3x3的二維數(shù)組 var myArray = createArray(3, 3); // 打印二維數(shù)組 console.log(myArray);
在上述代碼中,我們首先創(chuàng)建了一個行數(shù)為 rows
、列數(shù)為 cols
的數(shù)組。然后,使用雙重循環(huán)遍歷數(shù)組,將每個元素設(shè)置為0。
盡管這種方法很簡單,但在處理大型二維數(shù)組時,其效率可能不高。
方法2: 使用 Array.from() 創(chuàng)建二維數(shù)組
ES6 的 Array.from()
方法提供了一種更高效的方法來創(chuàng)建二維數(shù)組。以下是一個示例代碼:
function createArray(rows, cols) { return Array.from({ length: rows }, () => new Array(cols).fill(0)); } // 創(chuàng)建一個3x3的二維數(shù)組 var myArray = createArray(3, 3); // 打印二維數(shù)組 console.log(myArray);
在上述代碼中,我們使用了 Array.from()
方法來創(chuàng)建行數(shù)為 rows
、列數(shù)為 cols
的數(shù)組。然后,我們在回調(diào)函數(shù)中使用了 new Array(cols).fill(0)
,它將返回一個列數(shù)為 cols
、元素都為 0 的數(shù)組。最后,我們使用 fill()
方法將每個行數(shù)組填充為0。
這種方法更加簡潔和高效,因?yàn)樗恍枰淮窝h(huán),而不是兩次循環(huán)。因此,如果你需要創(chuàng)建大型二維數(shù)組,這種方法可能更加適合。
示例
創(chuàng)建一個1-100的二維數(shù)組
function createArray(x, y) { let result = []; for (let i = 0; i < x; i++) { result[i] = []; for (let j = 0; j < y; j++) { result[i][j] = i * y + j + 1; } } return result; } console.log("createArray(10, 10) = ", createArray(10, 10));
在這個示例中,我們使用了兩個嵌套的 for
循環(huán)來創(chuàng)建一個二維數(shù)組。我們首先創(chuàng)建一個空數(shù)組 result
,然后在外部的循環(huán)中為每個行創(chuàng)建一個空數(shù)組。在內(nèi)部循環(huán)中,我們使用 (i * y + j + 1)
來為每個元素分配一個遞增的值,并將其存儲在相應(yīng)的行和列位置。最后,我們返回整個二維數(shù)組。這種方法雖然使用了 for
循環(huán),但在某些情況下可能比其他方法更簡單和直觀。
function createArray(x, y) { return Array.from({ length: x }, (_, i) => Array.from({ length: y }, (_, j) => j + i * y + 1) ); } console.log("createArray(10, 10) = ", createArray(10, 10));
在這個示例中,我們使用了 Array.from() 方法來創(chuàng)建一個二維數(shù)組。我們首先創(chuàng)建一個行數(shù)為 x、列數(shù)為 y 的數(shù)組,然后在回調(diào)函數(shù)中使用 (j + i * y + 1) 來為每個元素分配一個遞增的值。最后,我們將行數(shù)組收集在一個大數(shù)組中,并返回整個二維數(shù)組。這種方法是使用 Array.from() 方法創(chuàng)建二維數(shù)組的一種常見方法。
function createArray(x, y) { let count = 1; return Array.from({ length: x }, () => Array.from({ length: y }, () => count++) ); } console.log("createArray(10, 10) = ", createArray(10, 10));
在這個示例中,我們也使用了 Array.from() 方法來創(chuàng)建一個二維數(shù)組。我們在外部創(chuàng)建了一個計(jì)數(shù)器變量 count,然后在回調(diào)函數(shù)中使用 count++ 來為每個元素分配一個遞增的值。最后,我們將行數(shù)組收集在一個大數(shù)組中,并返回整個二維數(shù)組。這種方法與示例1相似,只是使用了計(jì)數(shù)器變量而不是 (j + i * y + 1)。
function createArray(x, y) { let count = 1; return Array(x).fill().map(() => Array(y).fill().map(() => count++)); } console.log("createArray(10, 10) = ", createArray(10, 10));
在這個示例中,我們使用了 fill() 和 map() 方法來創(chuàng)建一個二維數(shù)組。我們首先使用 Array(x).fill() 創(chuàng)建一個大小為 x 的數(shù)組,然后在回調(diào)函數(shù)中使用 Array(y).fill().map(() => count++) 來創(chuàng)建一個大小為 y 的行數(shù)組,并將其填充為遞增的值。最后,我們將行數(shù)組收集在一個大數(shù)組中,并返回整個二維數(shù)組。這種方法雖然使用了較多的方法調(diào)用,但是在某些情況下可能比其他方法更快。
結(jié)論
無論你是創(chuàng)建一個小型還是大型的二維數(shù)組,這兩種方法都是很有用的。使用雙重循環(huán)創(chuàng)建二維數(shù)組方法雖然簡單,但可能在處理大型數(shù)組時效率低下。使用 Array.from()
方法來創(chuàng)建二維數(shù)組方法更加簡潔和高效,適用于大型數(shù)組。因此,可以根據(jù)自己的需求來選擇適合自己的方法。
希望這篇文章能夠幫助你更好地了解如何創(chuàng)建 JavaScript 二維數(shù)組,以及如何選擇適合自己的方法。無論你是在開發(fā) Web 應(yīng)用程序、游戲還是其他應(yīng)用程序,創(chuàng)建一個高效的二維數(shù)組是一個重要的任務(wù)。盡管有多種方法可以實(shí)現(xiàn)這個任務(wù),但使用 Array.from()
方法通常是更好的選擇。
請記住,創(chuàng)建一個高效的程序不僅取決于使用的技術(shù),還取決于你的設(shè)計(jì)和實(shí)現(xiàn)。因此,在開發(fā)過程中,你需要考慮到其他方面,例如代碼的可讀性、可維護(hù)性和擴(kuò)展性。只有在你綜合考慮了這些因素之后,才能真正創(chuàng)建一個優(yōu)秀的程序。
以上就是如何快速高效創(chuàng)建JavaScript 二維數(shù)組方法詳解的詳細(xì)內(nèi)容,更多關(guān)于JavaScript 二維數(shù)組創(chuàng)建的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
JS實(shí)現(xiàn)仿Windows7風(fēng)格的網(wǎng)頁右鍵菜單效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)仿Windows7風(fēng)格的網(wǎng)頁右鍵菜單效果代碼,涉及JavaScript鼠標(biāo)右鍵響應(yīng)及動態(tài)生成頁面菜單的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09使用js實(shí)現(xiàn)html標(biāo)簽、文本的隱藏、顯示、刪除及添加
在設(shè)計(jì)網(wǎng)頁時,有時需要靜態(tài)或動態(tài)地隱藏標(biāo)簽或顯示被隱藏的標(biāo)簽,那該怎么實(shí)現(xiàn)呢?這篇文章主要給大家介紹了關(guān)于使用js實(shí)現(xiàn)html標(biāo)簽、文本的隱藏、顯示、刪除及添加的相關(guān)資料,需要的朋友可以參考下2023-06-06JS實(shí)現(xiàn)點(diǎn)擊button按鈕切換圖片
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)點(diǎn)擊button按鈕切換圖片,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-07-07詳解用Webpack與Babel配置ES6開發(fā)環(huán)境
這篇文章主要介紹了詳解用Webpack與Babel配置ES6開發(fā)環(huán)境,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03HTML Table 空白單元格補(bǔ)全的簡單實(shí)現(xiàn)
下面小編就為大家?guī)硪黄狧TML Table 空白單元格補(bǔ)全的簡單實(shí)現(xiàn)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-10javascript密碼強(qiáng)度校驗(yàn)代碼(兩種方法)
為了保證網(wǎng)站個人信息的安全,很多網(wǎng)站在注冊頁面都設(shè)置密碼強(qiáng)度這項(xiàng),用javascript如何實(shí)現(xiàn)密碼強(qiáng)度校驗(yàn)代碼呢?下面小編給大家整理了兩種方法使用javascript密碼強(qiáng)度校驗(yàn)代碼,有需要的朋友可以參考下2015-08-08