怎么快速高效創(chuàng)建JavaScript二維數(shù)組

本篇內(nèi)容主要講解“怎么快速高效創(chuàng)建JavaScript二維數(shù)組”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“怎么快速高效創(chuàng)建JavaScript二維數(shù)組”吧!

引言

在 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)用，但是在某些情況下可能比其他方法更快。

到此，相信大家對“怎么快速高效創(chuàng)建JavaScript二維數(shù)組”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！