从DOM元素ID提取数字生成数组求最大值，Math.max返回NaN问题排查

问题需求与疑问 #

• 需求：从每个class为element的DOM元素中提取ID末尾的数字，生成数字数组并获取其中的最大值。
• 问题：使用Math.max()时返回NaN。
• 疑问：当前实现方案是否合理？为何无法得到正确的最大值？

给出的HTML代码 #

<div class="element" id="element-2"></div>
<div class="element" id="element-58"></div>
<div class="element" id="element-135"></div>
<div class="element" id="element-39"></div>
<div class="element" id="element-78"></div>

给出的JavaScript代码 #

var element_numbers = document.getElementsByClassName("element");
var max_comm = "";
for (var i = 0; i < element_numbers.length; i++) {
    var num = element_numbers[i].id;
    const num_arr = num.match(/[0-9]+$/);
    max_comm += num_arr+",";
}   
var max_num = "["+max_comm.slice (0, -1)+"]";
alert(max_num);
alert(Math.max(max_num));

问题分析与解决方法 #

1. 当前实现方案是否合理？ #

完全不合理。你现在是把提取到的数字拼接成了一个看起来像数组的字符串（比如"[2,58,135,39,78]"），但它本质还是字符串，不是真正的JavaScript数组，这种绕弯的处理方式既繁琐又容易出错，完全没必要。

2. 为什么返回NaN？ #

Math.max()的正确用法是接受多个数字参数，或者通过扩展运算符/apply方法传入数字数组，但你现在传入的是一个字符串。Math.max()无法把这个字符串解析成有效数字，所以直接返回NaN。

另外还有个隐藏问题：num.match(/[0-9]+$/)返回的是匹配结果数组，直接拼接会自动转成字符串，但如果遇到ID末尾没有数字的情况（虽然本次案例不会出现），num_arr会是null，拼接后会出现"null"字符串，导致后续逻辑彻底失效。

正确实现方式 #

直接生成数字数组，再用Math.max()处理：

方式一：使用数组方法（更简洁）

// 将HTMLCollection转为数组，方便遍历
const elements = Array.from(document.getElementsByClassName("element"));
// 提取数字并转为Number类型
const numbers = elements.map(el => {
    const matchResult = el.id.match(/[0-9]+$/);
    // 确保匹配到数字再转类型，未匹配到可设默认值（比如0）
    return matchResult ? Number(matchResult[0]) : 0;
});
// 用扩展运算符把数组元素拆成Math.max的参数
const maxNumber = Math.max(...numbers);
alert(maxNumber); // 弹出135

方式二：传统for循环写法

var element_numbers = document.getElementsByClassName("element");
var numbers = [];
for (var i = 0; i < element_numbers.length; i++) {
    var num = element_numbers[i].id;
    const numMatch = num.match(/[0-9]+$/);
    if (numMatch) {
        // 转成数字后存入数组
        numbers.push(Number(numMatch[0]));
    }
}   
// 用apply方法把数组作为参数传入Math.max
var max_num = Math.max.apply(null, numbers);
alert(max_num); // 弹出135

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