javascript怎么生成二维数组

Array.from

fill

map

function create2DArrayNestedLoop(rows, cols, defaultValue = 0) {
    const arr = [];
    for (let i = 0; i < rows; i++) {
        const row = [];
        for (let j = 0; j < cols; j++) {
            row.push(defaultValue);
        }
        arr.push(row);
    }
    return arr;
}

// 示例：生成一个3行4列，默认值为0的二维数组
const matrix1 = create2DArrayNestedLoop(3, 4);
// console.log(matrix1);
/*
[
  [0, 0, 0, 0],
  [0, 0, 0, 0],
  [0, 0, 0, 0]
]
*/

// 示例：生成一个2行3列，默认值为'x'的二维数组
const matrix2 = create2DArrayNestedLoop(2, 3, 'x');
// console.log(matrix2);
/*
[
  ['x', 'x', 'x'],
  ['x', 'x', 'x']
]
*/

Array.from

Array.from

function create2DArrayFunctional(rows, cols, defaultValue = 0) {
    // Array.from({ length: rows }) 创建一个长度为rows的数组，其元素为undefined
    // 然后通过map函数，对每个undefined元素进行处理，返回一个新的数组（行）
    // 这个新的数组（行）又是通过 Array(cols).fill(defaultValue) 创建的
    return Array.from({ length: rows }, () => Array(cols).fill(defaultValue));
}

// 示例：生成一个4行2列，默认值为null的二维数组
const matrix3 = create2DArrayFunctional(4, 2, null);
// console.log(matrix3);
/*
[
  [null, null],
  [null, null],
  [null, null],
  [null, null]
]
*/

// 示例：生成一个3行3列，默认值为随机数的二维数组
// 注意：如果 defaultValue 是一个函数，每次都会调用它生成新的值
function create2DArrayWithRandom(rows, cols) {
    return Array.from({ length: rows }, () => 
        Array.from({ length: cols }, () => Math.floor(Math.random() * 100))
    );
}
const matrix4 = create2DArrayWithRandom(3, 3);
// console.log(matrix4); // 每次运行结果不同
/* 类似这样:
[
  [12, 56, 89],
  [3, 77, 45],
  [91, 23, 67]
]
*/

map

Array.prototype.map

// 这种方式需要非常小心，因为它可能导致“引用陷阱”
// 只有当你确定每一行的数组元素都是独立的，且后续不会修改内部数组时才考虑
function create2DArrayFillMap(rows, cols, defaultValue = 0) {
    // Array(rows).fill(0) 创建一个长度为rows的数组，所有元素都是0 (或任何值)
    // 关键在于后面的 .map()，它会遍历这个数组，对每个元素执行一个函数
    // 这里的函数返回一个新的 Array(cols).fill(defaultValue)
    // 这样就保证了每一行都是一个新的数组实例
    return Array(rows).fill(0).map(() => Array(cols).fill(defaultValue));
}

// 示例：生成一个2行2列，默认值为false的二维数组
const matrix5 = create2DArrayFillMap(2, 2, false);
// console.log(matrix5);
/*
[
  [false, false],
  [false, false]
]
*/

map

map

Array(rows).fill(Array(cols).fill(defaultValue))

Array.prototype.fill()

const rows = 3;
const cols = 4;

// 错误的方式：所有内部数组都指向同一个引用
const badMatrix = Array(rows).fill(Array(cols).fill(0)); 
// console.log(badMatrix);
/*
[
  [0, 0, 0, 0],
  [0, 0, 0, 0],
  [0, 0, 0, 0]
]
*/

// 尝试修改其中一个元素
badMatrix[0][0] = 99;

// 结果是：所有行的第一个元素都被修改了！
// console.log(badMatrix);
/*
[
  [99, 0, 0, 0],
  [99, 0, 0, 0],
  [99, 0, 0, 0]
]
*/
// 这是因为 Array(cols).fill(0) 只创建了一个内部数组 [0,0,0,0]，
// 然后 Array(rows).fill() 把这个同一个数组的引用复制了3次。
// 所以修改其中一个“行”，实际上修改的是那个唯一的内部数组。

map

new Array()

[]

slice()

const matrix = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

// 使用传统的 for 循环
console.log("--- 传统 for 循环遍历 ---");
for (let i = 0; i < matrix.length; i++) { // 遍历行
    for (let j = 0; j < matrix[i].length; j++) { // 遍历列
        console.log(`matrix[${i}][${j}] = ${matrix[i][j]}`);
    }
}

// 使用 for...of 循环 (更现代、简洁)
console.log("--- for...of 循环遍历 ---");
let rowIndex = 0;
for (const row of matrix) { // 遍历每一行数组
    let colIndex = 0;
    for (const element of row) { // 遍历行中的每一个元素
        console.log(`matrix[${rowIndex}][${colIndex}] = ${element}`);
        colIndex++;
    }
    rowIndex++;
}

// 使用 forEach (函数式风格)
console.log("--- forEach 遍历 ---");
matrix.forEach((row, i) => {
    row.forEach((element, j) => {
        console.log(`matrix[${i}][${j}] = ${element}`);
    });
});

for...of

forEach

for

const data = [
    ['Name', 'Age', 'City'],
    ['Alice', 30, 'New York'],
    ['Bob', 24, 'London']
];

// 读取特定元素
console.log(data[1][0]); // 输出 'Alice'
console.log(data[2][2]); // 输出 'London'

// 修改特定元素
data[1][1] = 31; // Alice的年龄改为31
console.log(data[1]); // 输出 ['Alice', 31, 'New York']

// 插入新行
data.push(['Charlie', 28, 'Paris']);
// console.log(data);
/*
[
    ['Name', 'Age', 'City'],
    ['Alice', 31, 'New York'],
    ['Bob', 24, 'London'],
    ['Charlie', 28, 'Paris']
]
*/

// 删除一行 (例如删除Bob那一行)
data.splice(2, 1); // 从索引2开始删除1个元素
// console.log(data);
/*
[
    ['Name', 'Age', 'City'],
    ['Alice', 31, 'New York'],
    ['Charlie', 28, 'Paris']
]
*/

const products = [
    ['ID', 'Name', 'Price'],
    [1, 'Laptop', 1200],
    [2, 'Mouse', 25]
];

// 插入新列 (例如在'Name'和'Price'之间插入'Quantity')
const insertColIndex = 2; // 插入到第2列 (索引从0开始)
products.forEach(row => {
    // 根据需要插入默认值或特定值
    row.splice(insertColIndex, 0, 0); // 在指定位置插入0
});
products[0][insertColIndex] = 'Quantity'; // 设置表头
// console.log(products);
/*
[
  ['ID', 'Name', 'Quantity', 'Price'],
  [1, 'Laptop', 0, 1200],
  [2, 'Mouse', 0, 25]
]
*/

// 删除列 (例如删除'Quantity'列)
const deleteColIndex = 2; // 删除索引为2的列
products.forEach(row => {
    row.splice(deleteColIndex, 1); // 从指定位置删除1个元素
});
// console.log(products);
/*
[
  ['ID', 'Name', 'Price'],
  [1, 'Laptop', 1200],
  [2, 'Mouse', 25]
]
*/