引言

在 JavaScript 中，創(chuàng)建二維數(shù)組是一個(gè)常見的需求，尤其是在開發(fā) Web 應(yīng)用程序和游戲時(shí)。

然而，為了避免使用復(fù)雜的代碼來創(chuàng)建二維數(shù)組，我們需要一種快速而高效的方法。

方法1: 使用雙重循環(huán)創(chuàng)建二維數(shù)組

在 JavaScript 中，使用雙重循環(huán)是創(chuàng)建二維數(shù)組的一種常見方法。以下是一個(gè)示例代碼：

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)建一個(gè)3x3的二維數(shù)組
var myArray = createArray(3, 3);
// 打印二維數(shù)組
console.log(myArray);

在上述代碼中，我們首先創(chuàng)建了一個(gè)行數(shù)為 rows、列數(shù)為 cols 的數(shù)組。然后，使用雙重循環(huán)遍歷數(shù)組，將每個(gè)元素設(shè)置為0。

盡管這種方法很簡單，但在處理大型二維數(shù)組時(shí)，其效率可能不高。

方法2: 使用 Array.from() 創(chuàng)建二維數(shù)組

ES6 的 Array.from() 方法提供了一種更高效的方法來創(chuàng)建二維數(shù)組。以下是一個(gè)示例代碼：

function createArray(rows, cols) {
  return Array.from({ length: rows }, () => new Array(cols).fill(0));
}
// 創(chuàng)建一個(gè)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)，它將返回一個(gè)列數(shù)為 cols、元素都為 0 的數(shù)組。最后，我們使用 fill() 方法將每個(gè)行數(shù)組填充為0。

這種方法更加簡潔和高效，因?yàn)樗恍枰淮窝h(huán)，而不是兩次循環(huán)。因此，如果你需要?jiǎng)?chuàng)建大型二維數(shù)組，這種方法可能更加適合。

示例

創(chuàng)建一個(gè)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));

在這個(gè)示例中，我們使用了兩個(gè)嵌套的 for 循環(huán)來創(chuàng)建一個(gè)二維數(shù)組。我們首先創(chuàng)建一個(gè)空數(shù)組 result，然后在外部的循環(huán)中為每個(gè)行創(chuàng)建一個(gè)空數(shù)組。在內(nèi)部循環(huán)中，我們使用 (i * y + j + 1) 來為每個(gè)元素分配一個(gè)遞增的值，并將其存儲(chǔ)在相應(yīng)的行和列位置。最后，我們返回整個(gè)二維數(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));

在這個(gè)示例中，我們使用了 Array.from() 方法來創(chuàng)建一個(gè)二維數(shù)組。我們首先創(chuàng)建一個(gè)行數(shù)為 x、列數(shù)為 y 的數(shù)組，然后在回調(diào)函數(shù)中使用 (j + i * y + 1) 來為每個(gè)元素分配一個(gè)遞增的值。最后，我們將行數(shù)組收集在一個(gè)大數(shù)組中，并返回整個(gè)二維數(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));

在這個(gè)示例中，我們也使用了 Array.from() 方法來創(chuàng)建一個(gè)二維數(shù)組。我們在外部創(chuàng)建了一個(gè)計(jì)數(shù)器變量 count，然后在回調(diào)函數(shù)中使用 count++ 來為每個(gè)元素分配一個(gè)遞增的值。最后，我們將行數(shù)組收集在一個(gè)大數(shù)組中，并返回整個(gè)二維數(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));

在這個(gè)示例中，我們使用了 fill() 和 map() 方法來創(chuàng)建一個(gè)二維數(shù)組。我們首先使用 Array(x).fill() 創(chuàng)建一個(gè)大小為 x 的數(shù)組，然后在回調(diào)函數(shù)中使用 Array(y).fill().map(() => count++) 來創(chuàng)建一個(gè)大小為 y 的行數(shù)組，并將其填充為遞增的值。最后，我們將行數(shù)組收集在一個(gè)大數(shù)組中，并返回整個(gè)二維數(shù)組。這種方法雖然使用了較多的方法調(diào)用，但是在某些情況下可能比其他方法更快。

結(jié)論

無論你是創(chuàng)建一個(gè)小型還是大型的二維數(shù)組，這兩種方法都是很有用的。使用雙重循環(huán)創(chuàng)建二維數(shù)組方法雖然簡單，但可能在處理大型數(shù)組時(shí)效率低下。使用 Array.from() 方法來創(chuàng)建二維數(shù)組方法更加簡潔和高效，適用于大型數(shù)組。因此，可以根據(jù)自己的需求來選擇適合自己的方法。

希望這篇文章能夠幫助你更好地了解如何創(chuàng)建 JavaScript 二維數(shù)組，以及如何選擇適合自己的方法。無論你是在開發(fā) Web 應(yīng)用程序、游戲還是其他應(yīng)用程序，創(chuàng)建一個(gè)高效的二維數(shù)組是一個(gè)重要的任務(wù)。盡管有多種方法可以實(shí)現(xiàn)這個(gè)任務(wù)，但使用 Array.from() 方法通常是更好的選擇。

請記住，創(chuàng)建一個(gè)高效的程序不僅取決于使用的技術(shù)，還取決于你的設(shè)計(jì)和實(shí)現(xiàn)。因此，在開發(fā)過程中，你需要考慮到其他方面，例如代碼的可讀性、可維護(hù)性和擴(kuò)展性。只有在你綜合考慮了這些因素之后，才能真正創(chuàng)建一個(gè)優(yōu)秀的程序。

以上就是如何快速高效創(chuàng)建JavaScript 二維數(shù)組方法詳解的詳細(xì)內(nèi)容，更多關(guān)于JavaScript 二維數(shù)組創(chuàng)建的資料請關(guān)注腳本之家其它相關(guān)文章！