前言

我經(jīng)常在面試中問候：你能用 JavaScript 生成一個二維數(shù)組嗎？這個問題看似簡單，實(shí)際上卻能揭示出面試者對 JavaScript 的熟練程度。就像茴字有多種寫法一樣，生成二維數(shù)組也有多種方法。今天，就讓我們一起來探索這個問題背后的答案，揭開生成二維數(shù)組的多種秘密。

掌握不同的方法不僅能讓我們在面對不同的場景時更加得心應(yīng)手，還能在面試中展示我們對 JavaScript 的深入理解。畢竟，在編程世界里，靈活多變往往比死記硬背更為重要。

建議大家在閱讀文章時，對于每個方法先不要看答案，而是先自己思考如何實(shí)現(xiàn)，這樣會更有收獲。

創(chuàng)建一維數(shù)組

在生成二維數(shù)組之前，我們先來學(xué)習(xí)如何創(chuàng)建一維數(shù)組。創(chuàng)建一維數(shù)組的方法有多種，以下是一些常見的方法：

1. 數(shù)組字面量

這是創(chuàng)建數(shù)組的最簡單方法，直接使用方括號[]來定義數(shù)組。

let arr = [1, 2, 3];

2. 使用 Array 構(gòu)造函數(shù)

上面的數(shù)組也可以使用 Array 構(gòu)造函數(shù)來創(chuàng)建。

let arr = new Array(1, 2, 3);

但當(dāng)使用 Array 構(gòu)造函數(shù)時，需要注意，如果只傳入一個參數(shù)，則表示數(shù)組的長度。如果想要創(chuàng)建包含單個元素的數(shù)組，除了使用上面的方法外，還可以使用 Array.of() 方法。當(dāng)有多個參數(shù)時，Array.of 和 Array 構(gòu)造函數(shù)的效果是一樣的。

let arr = Array.of(2);
console.log(arr); // [2]

可以使用這種 Array 構(gòu)造函數(shù)來創(chuàng)建一個指定長度的數(shù)組。但需要注意的是，這種方法創(chuàng)建的數(shù)組元素是空位，并不是 undefined。

let arr = new Array(3);
console.log(arr); // [empty × 3]

為了避免空位的問題，可以結(jié)合使用 Array.fill() 方法來填充數(shù)組：

let arr = new Array(3).fill(0);
console.log(arr); // [0, 0, 0]

3. 使用 Array.from()

Array.from() 方法可以從一個類數(shù)組或可迭代對象創(chuàng)建一個新的數(shù)組實(shí)例。它還可以接受一個映射函數(shù)作為第二個參數(shù)，用于初始化數(shù)組元素。

let arr = Array.from({ length: 3 }, () => 0);
console.log(arr); // [0, 0, 0]

4. 使用展開運(yùn)算符和 Array()

可以結(jié)合使用展開運(yùn)算符（...）和 Array() 構(gòu)造函數(shù)來創(chuàng)建并初始化數(shù)組。

let arr = [...Array(3)].map(() => 0);
console.log(arr); // [0, 0, 0]

掌握這些創(chuàng)建一維數(shù)組的方法可以幫助我們更靈活地處理各種編程場景。在接下來的部分，我們將探討如何擴(kuò)展這些方法來創(chuàng)建二維數(shù)組。

二維數(shù)組簡介

二維數(shù)組，顧名思義，就是數(shù)組的數(shù)組。在 JavaScript 中，它可以用來表示矩陣、網(wǎng)格或任何需要行和列的數(shù)據(jù)結(jié)構(gòu)。想象一下一個棋盤，每一行都是一個數(shù)組，整個棋盤就是一個二維數(shù)組。

二維數(shù)組在編程面試中經(jīng)常出現(xiàn)，尤其是在處理矩陣相關(guān)的問題時。例如：

• 矩陣相關(guān)： 給定一個 n x n 的二維矩陣，要求原地旋轉(zhuǎn) 90 度。
• 島嶼數(shù)量： 給定一個由'1'（陸地）和'0'（水）組成的二維網(wǎng)格，計算島嶼的數(shù)量。
• 動態(tài)規(guī)劃： 求解最大子數(shù)組和問題。

掌握二維數(shù)組的操作對于解決這些問題至關(guān)重要，因此了解如何在 JavaScript 中有效地生成和操作二維數(shù)組是非常有用的。

生成二維數(shù)組的方法有很多，今天我們將探討以下幾種，并分析其優(yōu)缺點(diǎn)：

• 使用嵌套循環(huán)
• 使用 Array.from()
• 使用 Array.fill() 和 map()
• 使用展開運(yùn)算符和 map()

1. 使用嵌套循環(huán)

這是最直接的方法。先創(chuàng)建一個外層數(shù)組，然后在每個位置上創(chuàng)建一個內(nèi)層數(shù)組。

function create2DArray(m, n) {
  let arr = new Array(m);
  for (let i = 0; i < m; i++) {
    arr[i] = new Array(n);
    for (let j = 0; j < n; j++) {
      arr[i][j] = 0; // 或其他初始值
    }
  }
  return arr;
}

優(yōu)點(diǎn)：直觀易懂。

缺點(diǎn)：代碼稍顯冗長。

2. 使用 Array.from()

Array.from() 可以根據(jù)給定的參數(shù)創(chuàng)建一個新數(shù)組，而 map() 則可以對數(shù)組的每個元素進(jìn)行處理。

function create2DArray(m, n) {
  return Array.from({ length: m }, () => Array.from({ length: n }, () => 0));
}

優(yōu)點(diǎn)：代碼更簡潔。

缺點(diǎn)：對于初學(xué)者來說，可能需要一些時間來理解這種寫法。

3. 使用 Array.fill() 和 map()

類似于上一個方法，但是使用了 Array.fill() 來創(chuàng)建初始數(shù)組。

function create2DArray(m, n) {
  return Array(m)
    .fill()
    .map(() => Array(n).fill(0));
}

優(yōu)點(diǎn)：非常簡潔。

缺點(diǎn)：與上一個方法相似，對初學(xué)者可能有一定難度。

4. 使用展開運(yùn)算符和 map()

展開運(yùn)算符（...）可以用來展開數(shù)組，與 map() 結(jié)合使用可以創(chuàng)建二維數(shù)組。

function create2DArray(m, n) {
  return [...Array(m)].map(() => Array(n).fill(0));
}

優(yōu)點(diǎn)：代碼簡潔，易于理解。

缺點(diǎn)：性能可能略遜于其他方法。

總結(jié)

每種方法都有其優(yōu)缺點(diǎn)，選擇哪一種取決于你的具體需求和個人喜好。如果你追求代碼的簡潔性，那么使用 Array.from() 可能是一個不錯的選擇。如果你更傾向于易于理解和維護(hù)的代碼，那么使用嵌套循環(huán)可能更適合你。

掌握生成二維數(shù)組的多種方法是每個 JavaScript 開發(fā)者的必備技能。通過這些方法，我們可以靈活地處理各種數(shù)據(jù)結(jié)構(gòu)和算法問題。希望這篇文章能幫助你更好地理解和使用這些技巧。下次面試的時候，當(dāng)這個問題再次出現(xiàn)時，你將滿懷信心地給出答案。

我的推薦寫法

在所有方法中，我個人偏好使用 Array.from() 的方法，因?yàn)樗浅?qiáng)大。當(dāng)然 Array.fill 方法也非常不錯，其優(yōu)點(diǎn)是語義化，代碼更易讀。

function create2DArray(m, n) {
  return Array.from({ length: m }, () => Array.from({ length: n }, () => 0));
}
function create2DArray(m, n) {
  return Array(m)
    .fill()
    .map(() => Array(n).fill(0));
}

感謝大家閱讀這篇文章！掌握 JavaScript 中生成二維數(shù)組的多種方法可以幫助我們在面對不同編程挑戰(zhàn)時更加游刃有余。每種方法都有其獨(dú)特之處，你最喜歡哪一種呢？歡迎在評論區(qū)交流你的想法和經(jīng)驗(yàn)，讓我們一起進(jìn)步！

以上就是JavaScript生成二維數(shù)組的多種方法小結(jié)的詳細(xì)內(nèi)容，更多關(guān)于JavaScript生成二維數(shù)組的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論