JavaScript宾果游戏：Array.filter结果本地为空但JSFiddle正常

问题场景 #

已确认ballsDrawn数组正确存储了游戏中所有已抽取的球号，当前开发验证功能：玩家宣称宾果时，先检查其标记的格子是否均为已抽取的球号，过滤作弊标记后判断是否真达成宾果。

实现逻辑：

1. 通过document.querySelectorAll获取所有格子，过滤出带marked类的格子，提取其textContent.trim()存入markedSpaces（此功能正常）
2. 用Array.filter()和.includes()筛选markedSpaces中存在于ballsDrawn的元素，存入legitSpaces并打印

异常现象：本地浏览器运行时legitSpaces控制台输出为空；将本次运行的ballsDrawn和markedSpaces数据放到JSFiddle中运行，legitSpaces却能正确填充。

相关代码 #

本地验证代码 #

const checkIfMarksAreCorrect = () => {
    const spaces = document.querySelectorAll(".marker");
    const markedSpaces = Array.from(spaces)
        .filter((space) => space.classList.contains('marked'))
        .map((markedSpace) => markedSpace.textContent.trim());
    console.log('The marked spaces are: ' + markedSpaces);
    console.log(`checkIfMarksAreCorrect ballsDrawn: ${ballsDrawn}`);
    const legitSpaces = Array.from(markedSpaces)
        .filter((markedNumber) => ballsDrawn.includes(markedNumber));
    console.log('legitSpaces: ' + legitSpaces);
};

本地控制台输出 #

The marked spaces are: 10,12,30,23,34,75

checkIfMarksAreCorrect ballsDrawn: 10,52,40,29,32,23,13,46,45,75,34,70,4,3,16,66,30,60,28,12

legitSpaces:

JSFiddle测试代码及输出 #

测试代码 #

const ballsDrawn = [10,52,40,29,32,23,13,46,45,75,34,70,4,3,16,66,30,60,28,12];
const markedSpaces = [10,12,30,23,34,75];
const legitSpaces = Array.from(markedSpaces)
    .filter((markedNumber) => ballsDrawn.includes(markedNumber));
console.log(`legitSpaces: ${legitSpaces}`);

测试输出 #

"legitSpaces: 10,12,30,23,34,75"

原因分析 #

核心问题是数据类型不匹配：

• 本地代码中，markedSpaces的元素是从DOM文本提取的字符串类型（比如"10"）
• 而ballsDrawn数组中存储的是数字类型（比如10）
• .includes()方法使用严格相等（===）进行匹配，字符串和数字不会被判定为相等，因此过滤结果为空。
• JSFiddle测试代码中，markedSpaces直接定义为数字数组，所以匹配成功。

解决方法 #

将markedSpaces中的字符串转为数字即可，修改map环节的代码：

修改后的完整代码 #

const checkIfMarksAreCorrect = () => {
    const spaces = document.querySelectorAll(".marker");
    // 提取文本后转为数字类型
    const markedSpaces = Array.from(spaces)
        .filter((space) => space.classList.contains('marked'))
        .map((markedSpace) => Number(markedSpace.textContent.trim()));
    console.log('The marked spaces are: ' + markedSpaces);
    console.log(`checkIfMarksAreCorrect ballsDrawn: ${ballsDrawn}`);
    // markedSpaces已经是数组，无需再用Array.from包装
    const legitSpaces = markedSpaces.filter((markedNumber) => ballsDrawn.includes(markedNumber));
    console.log('legitSpaces: ' + legitSpaces);
};

另外，代码中Array.from(markedSpaces)是多余的，因为markedSpaces本身已经是数组，直接调用filter即可。

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