JS迷宫生成多维数组函数绑定网页按钮事件后运行异常求助

问题根源 #

你从input输入框获取到的n是字符串类型，而非数字类型，这是触发异常的核心原因。

JS的Array构造器对传入参数的处理逻辑有明确区分：

• 当传入参数是正整数类型时，会返回对应长度的空数组，例如new Array(5)返回长度为5的空数组
• 当传入参数是非数字类型时，会把参数作为数组的第一个元素返回，例如new Array("5")返回长度为1的数组["5"]
  你绑定点击事件的代码里，document.getElementById("maze-size").value拿到的是字符串，所以后续new Array(n)生成的子数组长度永远是1，完全符合你遇到的异常表现。

修复方案 #

只需要在获取n的时候转换为数字类型即可，还可以增加简单的合法性校验避免非法输入：

"use strict";

const button = document.getElementById("generateMaze");

button.addEventListener("click", generateMaze);

function generateMaze() {
  // 转换为数字类型
  let n = Number(document.getElementById("maze-size").value);
  // 可选：增加合法性校验，避免用户输入非数字、负数、小数等非法值
  if (isNaN(n) || n < 2 || !Number.isInteger(n)) {
    alert("请输入大于等于2的正整数作为迷宫尺寸");
    return;
  }
  let maze = [];
  for (let i = 0; i < n; i++) {
    let mazeWidth = new Array(n)
      .fill(1)
      .map((x) => (Math.random() >= 0.3 ? 1 : 0));
    maze.push(mazeWidth);
  }
  // 此处可添加你需要的后续逻辑，比如把迷宫渲染到页面上
  console.log(maze);
}

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