JavaScript字符串比较异常：匹配ID仍被输出日志问题排查

场景与代码 #

定义的ID数组：

let ids = ["d0","d1","d2","d3","d4","d5","m0","m1","m2","m3","m4","m5"];

页面中的按钮元素：

<button id="d0" onclick="showMe(this);"> <!-- 依此类推至m5 -->

用于对比的函数：

function showMe(element){
var whoWasClicked = element;
   let ids = ["d0","d1","d2","d3","d4","d5","m0","m1","m2","m3","m4","m5"];

    for (let i = 0; i < ids.length; i++) {
        if (whoWasClicked.id != document.querySelector(ids[i])) {
           //document.querySelector(ids[0]).style.border = "none";
            console.log(ids[i] + " : " + whoWasClicked.id);
        }
    }
}

现象 #

点击id为d1的按钮时，控制台输出所有ID与d1的对比，包括d1 : d1这一项，不符合“仅输出不匹配项”的预期。

原因与修正 #

核心问题 #

你在if判断里犯了关键错误：document.querySelector(ids[i])返回的是DOM元素对象，而whoWasClicked.id是字符串类型的ID值。两者类型完全不同，用!=对比时，JavaScript的类型转换无法让对象和字符串相等，所以所有循环分支都会进入if块，导致所有项都被输出。

修正方案 #

有两种简单的修正方式：

1. 对比元素的id属性：把document.querySelector(ids[i])改成document.querySelector(ids[i]).id，让两边都是字符串类型的ID值：

function showMe(element){
var whoWasClicked = element;
   let ids = ["d0","d1","d2","d3","d4","d5","m0","m1","m2","m3","m4","m5"];

    for (let i = 0; i < ids.length; i++) {
        if (whoWasClicked.id != document.querySelector(ids[i]).id) {
            console.log(ids[i] + " : " + whoWasClicked.id);
        }
    }
}

2. 直接对比数组中的ID字符串：既然ids数组里已经存了所有ID字符串，没必要重复查询DOM，直接和whoWasClicked.id对比即可，效率更高：

function showMe(element){
var whoWasClicked = element;
   let ids = ["d0","d1","d2","d3","d4","d5","m0","m1","m2","m3","m4","m5"];

    for (let i = 0; i < ids.length; i++) {
        if (whoWasClicked.id != ids[i]) {
            console.log(ids[i] + " : " + whoWasClicked.id);
        }
    }
}

补充说明 #

如果担心document.querySelector找不到元素导致报错，可以先判断元素是否存在，比如第一种方案可以优化为：

function showMe(element){
var whoWasClicked = element;
   let ids = ["d0","d1","d2","d3","d4","d5","m0","m1","m2","m3","m4","m5"];

    for (let i = 0; i < ids.length; i++) {
        const targetElement = document.querySelector(ids[i]);
        if (targetElement && whoWasClicked.id != targetElement.id) {
            console.log(ids[i] + " : " + whoWasClicked.id);
        }
    }
}

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