前言

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

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

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

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

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

1. 數(shù)組字面量

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

let arr = [1, 2, 3];

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

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

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

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

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

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

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

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

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

3. 使用 Array.from()

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

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

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

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

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

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

二維數(shù)組簡(jiǎn)介

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

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

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

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

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

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

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

這是最直接的方法。先創(chuàng)建一個(gè)外層數(shù)組，然后在每個(gè)位置上創(chuàng)建一個(gè)內(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)：代碼稍顯冗長(zhǎng)。

2. 使用 Array.from()

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

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

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

缺點(diǎn)：對(duì)于初學(xué)者來(lái)說(shuō)，可能需要一些時(shí)間來(lái)理解這種寫(xiě)法。

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

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

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

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

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

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

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

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

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

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

總結(jié)

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

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

我的推薦寫(xiě)法

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

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ù)組的多種方法可以幫助我們?cè)诿鎸?duì)不同編程挑戰(zhàn)時(shí)更加游刃有余。每種方法都有其獨(dú)特之處，你最喜歡哪一種呢？歡迎在評(píng)論區(qū)交流你的想法和經(jīng)驗(yàn)，讓我們一起進(jìn)步！

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

最新評(píng)論