求指导：改进递归函数以获取含二维数组的任意集合最大数值

我正尝试编写一个递归函数，用于从包含对象、字符串、数字等元素的任意集合（包括二维数组）中返回最大数值。现提供一段JavaScript代码，请求指导如何改进现有代码，以及如何完善二维数组的遍历逻辑。

原JavaScript代码：

// maxNumInCollection -- Recursive
function RecursiveMaxNumInColl() {
  // console.log(`Count of args : ${arguments.length}`);
  let maxnum = Number.NEGATIVE_INFINITY;

  for (let i = 0; i < arguments.length; i++) {
    let argtype = typeof arguments[i];
    let cElem = arguments[i]; // current element

    // console.log(`'i' : ${i} : ${argtype} : ${cElem}`);

    if (argtype == "object" && cElem !== null) {
      for (let j = 0; j < cElem.length; j++) {
        let newmaxnum = RecursiveMaxNumInColl(cElem[j]); // current sub element
        maxnum = Math.max(maxnum, newmaxnum);
      }
    } else if (!isNaN(cElem)) {
      maxnum = Math.max(maxnum, cElem);
    }
  }
  return maxnum;
}

function GetMaxNum() {
  let n1 = [1, "A", "1A"];
  let n2 = [
    [2, "2B", "B2", ""],
    [3, "CC", "04", " "],
  ];
  let n3 = ["030", "000", "-50", null, undefined, null];
  let n4 = [null, null, undefined];
  let n5 = 11;

  let in1 = document.getElementById("in1").value;
  let in2 = document.getElementById("in2").value;
  let in3 = document.getElementById("in3").value;

  // prettier-ignore
  let output = RecursiveMaxNumInColl(22, "33", n1, n2, n3, n4, n5, in1, in2, in3);

  console.log(output);
  document.getElementById("output").innerHTML =
    "Highest number value in collection is : <br/>" + output + "<br/> <br/>";
}

对应HTML代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JS Functions</title>
    <script src="script.js" defer></script>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h5>output</h5>
    <input class="inputnumber" type="number" name="n1" id="in1" />
    <input class="inputnumber" type="number" name="n2" id="in2" />
    <input class="inputnumber" type="number" name="n3" id="in3" />
    <button id="btn1" onclick="GetMaxNum()">Get Max Num</button>
    <div id="output"></div>
  </body>
</html>

核心问题分析 #

原代码存在几个关键缺陷：

• 依赖arguments对象：不符合ES6+现代规范，代码可读性差
• 数组判断逻辑不严谨：用typeof === 'object'判断数组会误判普通对象（如{length: 3}）
• 数值处理逻辑有漏洞：!isNaN(cElem)会触发隐式转换，容易出现意外结果
• 多维数组遍历冗余：手动遍历数组元素再递归，代码繁琐且无法适配更高维度数组

优化后的完整代码 #

JavaScript部分 #

// 递归获取集合中的最大数值
function recursiveMaxNumInColl(...items) {
  let maxNum = Number.NEGATIVE_INFINITY;

  for (const item of items) {
    // 处理任意维度的数组
    if (Array.isArray(item)) {
      // 展开数组元素直接递归，自动适配多维结构
      const subMax = recursiveMaxNumInColl(...item);
      maxNum = Math.max(maxNum, subMax);
    } 
    // 处理可转换为有效数字的元素
    else {
      const num = Number(item);
      // 仅保留有效数值
      if (!isNaN(num)) {
        maxNum = Math.max(maxNum, num);
      }
    }
  }

  // 处理无有效数值的边界情况
  return maxNum === Number.NEGATIVE_INFINITY ? undefined : maxNum;
}

function getMaxNum() {
  const n1 = [1, "A", "1A"];
  const n2 = [
    [2, "2B", "B2", ""],
    [3, "CC", "04", " "],
  ];
  const n3 = ["030", "000", "-50", null, undefined, null];
  const n4 = [null, null, undefined];
  const n5 = 11;

  const in1 = document.getElementById("in1").value;
  const in2 = document.getElementById("in2").value;
  const in3 = document.getElementById("in3").value;

  const output = recursiveMaxNumInColl(22, "33", n1, n2, n3, n4, n5, in1, in2, in3);
  
  console.log(output);
  const outputEl = document.getElementById("output");
  outputEl.innerHTML = output === undefined 
    ? "集合中无有效数值" 
    : `Highest number value in collection is : <br/>${output}<br/><br/>`;
}

HTML部分（无需修改） #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JS Functions</title>
    <script src="script.js" defer></script>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h5>output</h5>
    <input class="inputnumber" type="number" name="n1" id="in1" />
    <input class="inputnumber" type="number" name="n2" id="in2" />
    <input class="inputnumber" type="number" name="n3" id="in3" />
    <button id="btn1" onclick="getMaxNum()">Get Max Num</button>
    <div id="output"></div>
  </body>
</html>

关键优化点说明 #

• 用剩余参数...items替代arguments：符合现代JS规范，代码可读性更高，支持数组解构操作
• 严谨判断数组类型：使用Array.isArray()替代typeof，避免误判普通对象
• 显式数值转换：通过Number(item)显式转换元素，再判断是否为有效数值，逻辑清晰可控
• 自动适配多维数组：利用扩展运算符...item展开数组元素，递归调用时自动处理二维、三维等任意维度数组
• 边界情况处理：当集合中没有有效数值时，返回undefined并在页面显示友好提示

测试验证 #

运行优化后的代码可验证以下场景：

• 传入的"33"会被转换为数字33，作为初始最大值
• 二维数组n2中的04会转换为4，不影响最大值计算
• 空数组、全非数值集合会显示"集合中无有效数值"
• 输入框填入更大数值时，会自动更新为新的最大值

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