JavaScript for 循环匹配对象数组值输出异常的原因及解决方法

现有代码的核心逻辑错误出在for循环的分支设计上：

• 每次循环迭代都会直接执行输出操作：你输入的How old are you对应数组的第三项，前两次循环遍历到前两个不匹配的元素时，都会直接走else分支输出I don't understand，直到第三次循环命中才输出正确的30，这就是多输出两次错误提示的根本原因。
• 额外逻辑隐患：全程复用同一个receiverDOM节点，appendChild方法如果传入已存在于DOM树中的节点，会先将该节点从原有位置移除再插入新位置，极端情况下会导致最终只显示最后一次输出的内容，不符合预期的多节点输出逻辑。

调整判断逻辑：先遍历所有数组元素匹配结果，遍历完成后再统一执行输出操作，不要在循环内部每轮都输出。
修复后的JavaScript代码如下：

function SendMessage() {
    var input = document.getElementById('person'),
        sender = document.createElement('p'),
        // 初始化返回结果，默认值为未匹配提示
        responseText = "I don't understand",
        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);
    
    // 循环仅做匹配操作，不输出
    for (var i = 0; i < data.length; i++) {
        if (input.value === data[i].person1) {
            responseText = data[i].person2;
            break; // 匹配到直接跳出循环，无需继续遍历
        }
    }
    
    // 遍历结束后统一输出结果
    var receiver = document.createElement('p');
    receiver.innerText = responseText;
    document.body.appendChild(receiver);
}

HTML代码无需修改，保持原有逻辑即可。

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