如何在JavaScript中用3个随机数组创建3×3网格？

原代码的核心问题 #

1. 复用同一数组引用：三个Field实例共享同一个field数组，导致所有实例内容完全一致，无独立随机性
2. 数组长度不符：循环基于my_arr.length（4次）生成4个元素，不符合3×3网格每行3个元素的要求
3. reverse()修改原数组：该方法会直接篡改传入的原数组，导致后续实例的数组被意外修改

修改后的实现 #

1. 工具函数：生成随机行

写一个独立函数，每次调用都会生成全新的、包含3个随机元素的数组：

const my_arr = ['^', 'O', '░', '*'];

// 生成一行3个随机元素的数组（允许重复）
function generateRandomRow() {
  const row = [];
  for (let i = 0; i < 3; i++) {
    const randomIdx = Math.floor(Math.random() * my_arr.length);
    row.push(my_arr[randomIdx]);
  }
  return row;
}

2. 重构Field类

让类的构造函数自动生成随机行，确保每个实例拥有独立的随机数组：

class Field {
  constructor() {
    // 每个实例创建时都生成新的随机行
    this.field = generateRandomRow();
  }

  // 返回行的字符串形式，方便拼接打印
  print() {
    return this.field.join('');
  }
}

3. 创建实例并打印3×3网格

// 创建3个独立的行实例
const row1 = new Field();
const row2 = new Field();
const row3 = new Field();

// 打印3行组成的完整网格
console.log(`${row1.print()}\n${row2.print()}\n${row3.print()}`);

可选优化：生成无重复元素的随机行 #

如果需要每行元素不重复，可以用Fisher-Yates洗牌算法实现：

function generateUniqueRandomRow() {
  // 复制原数组避免修改原始数据
  const copy = [...my_arr];
  // Fisher-Yates洗牌算法打乱数组
  for (let i = copy.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [copy[i], copy[j]] = [copy[j], copy[i]];
  }
  // 返回前3个元素作为一行
  return copy.slice(0, 3);
}

只需将Field构造函数中的generateRandomRow()替换为该函数即可。

内容的提问来源于stack exchange，提问作者Simone Ghilotti