JavaScript for循环遍历对象数组匹配输入值逻辑错误如何修复

问题原因 #

• 循环逻辑错误：每遍历data中的一个元素，不管是否匹配都会直接向页面追加内容。当你输入How old are you时，数组前两个元素的person1都和输入值不匹配，所以前两次循环都会走else分支，先后追加两次I don't understand，第三次循环匹配成功才追加30，就出现了你看到的错误现象。
• 额外逻辑漏洞：你每次都复用同一个receiver元素调用appendChild，实际上同一个DOM节点多次调用appendChild会被移动位置而不是新增节点，之前能看到多条输出属于巧合的错误表现。

修复方案 #

调整逻辑为先遍历完全部数组，确认是否有匹配项后再统一输出内容，修复后代码如下：

function SendMessage() {
    var input = document.getElementById('person'),
        sender = document.createElement('p'),
        data = [{
            "person1": "Hey",
            "person2": "Hey, How are you?"
        }, {
            "person1": "Hello",
            "person2": "Hello friend"
        }, {
            "person1": "How old are you",
            "person2": "30"
        }
    ];

    sender.innerText = input.value;
    document.body.appendChild(sender);
    
    // 先遍历查找匹配项
    let matchResult = null;
    for (var i = 0; i < data.length; i++) {
        if (input.value === data[i].person1) {
            matchResult = data[i].person2;
            break;
        }
    }
    
    // 遍历结束后统一输出
    const receiver = document.createElement('p');
    receiver.innerText = matchResult ? matchResult : "I don't understand";
    document.body.appendChild(receiver);
}

HTML代码无需修改：

<input id="person">
<button onclick="SendMessage()">Send message</button>

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