如何创建n×n阶宾果卡？数组嵌套与循环陷阱问题排查

嘿，太懂这种“看起来简单但死活找不到bug”的憋屈了！创建n×n宾果卡时最容易踩的循环陷阱，十有八九是不小心复用了同一个数组引用，我之前写类似的二维数组也踩过这个坑，给你拆解最常见的问题和解决办法：

最典型的错误：复用数组引用 #

很多人会下意识在循环外面声明行数组，然后每次清空再填充，最后push到结果里——但这样所有行其实都是同一个数组的引用！比如：

// 错误示例：所有行共享同一个数组引用
function createBingoCard(n) {
  const card = [];
  const row = []; // 只创建了一次的数组
  for (let i = 0; i < n; i++) {
    row.length = 0; // 清空数组，但引用没变
    for (let j = 0; j < n; j++) {
      row.push(Math.floor(Math.random() * 100) + 1);
    }
    card.push(row); // 每次push的都是同一个row的引用
  }
  return card;
}

你运行这个函数会发现，最后所有行的内容都和最后一次循环生成的行一模一样——因为每次修改row，所有已经push到card里的行都会跟着变，它们根本就是同一个东西！

正确的实现：每次循环创建新行 #

解决办法很简单：把行数组的声明放到外层循环里面，让每一行都是全新的数组，彻底切断引用关联：

// 正确写法：每次循环生成新的行数组
function createBingoCard(n) {
  const card = [];
  for (let i = 0; i < n; i++) {
    const row = []; // 每次循环都新建一个数组
    for (let j = 0; j < n; j++) {
      row.push(Math.floor(Math.random() * 100) + 1);
    }
    card.push(row);
  }
  return card;
}

如果喜欢更简洁的函数式写法，用Array.from或者map也能轻松实现，还能避免循环嵌套的繁琐：

// 简洁版：用Array.from生成二维数组
function createBingoCard(n) {
  return Array.from({ length: n }, () => {
    // 每一行都是独立的新数组
    return Array.from({ length: n }, () => Math.floor(Math.random() * 100) + 1);
  });
}

另一个容易踩的坑：用fill填充数组引用 #

还有人会用new Array(n).fill([])来快速创建二维数组，这也是同一个陷阱——fill会把传入的空数组引用填充到所有位置，导致所有行还是同一个数组：

// 错误示例：fill复用数组引用
const card = new Array(n).fill([]);
card[0][0] = 5;
console.log(card); // 所有行的第一个元素都是5！

想要用类似的方式创建，得换成map来生成每一行：

// 正确的快速创建方式
const card = new Array(n).map(() => new Array(n).fill(0));

核心总结 #

• 关键要保证每一行都是独立的新数组，不要复用同一个数组的引用
• 避免在循环外部声明行数组，也别用fill去填充引用类型（比如数组、对象）
• 函数式写法（map/Array.from）能更直观地避开这类陷阱，代码也更简洁

内容的提问来源于stack exchange，提问作者 top to bottom)