JavaScript实现仅添加未存在单词到数组的功能问题求助

你的循环逻辑存在根本性错误——当前代码会遍历数组的每一个元素，只要遇到任意一个不等于输入值的元素，就立刻把输入单词添加到数组里。这会导致两个问题：

1. 输入全新单词时，会因为第一个元素和输入值不匹配，直接执行push，之后数组长度增加，循环继续，同一个单词会被重复添加多次
2. 输入已存在的单词时，只有当循环到该单词的位置才会提示错误，但之前的循环步骤已经把单词重复添加了

修正后的JavaScript代码 #

const field = document.querySelector('#field');
const message = document.querySelector('#message');
const playBtn = document.querySelector('#play')

let usedCities = ['york']

playBtn.addEventListener('click', function() {
    const inputWord = field.value.trim().toLowerCase();
    if (!inputWord) {
        message.textContent = "请输入有效单词";
        return;
    }

    // 检查单词是否已存在
    if (usedCities.includes(inputWord)) {
        message.textContent = "ERROR：该单词已存在";
    } else {
        usedCities.push(inputWord);
        message.textContent = `已添加单词：${inputWord}`;
        field.value = '';
    }
})

代码说明 #

1. 输入处理：添加trim()去除首尾空格，toLowerCase()统一转小写，避免用户输入"York"和"york"被判定为不同单词的情况
2. 空输入拦截：防止用户点击按钮时添加空字符串到数组
3. 高效重复检查：用Array.includes()方法直接判断数组中是否存在目标单词，比手动循环更简洁可靠。如果坚持用手动循环，可采用标记变量的方式：

// 手动循环版本的检查逻辑
let isExist = false;
for (let i = 0; i < usedCities.length; i++) {
    if (usedCities[i] === inputWord) {
        isExist = true;
        break; // 找到匹配项后立刻终止循环，提升效率
    }
}

if (isExist) {
    message.textContent = "ERROR：该单词已存在";
} else {
    usedCities.push(inputWord);
    message.textContent = `已添加单词：${inputWord}`;
    field.value = '';
}

后续首尾字母匹配功能思路 #

等重复检查功能正常后，要实现新单词以最后一个单词的结尾字母开头，可在添加单词前增加判断：

// 在重复检查通过后添加此逻辑
const lastWord = usedCities[usedCities.length - 1];
const lastChar = lastWord[lastWord.length - 1];
const firstChar = inputWord[0];

if (firstChar !== lastChar) {
    message.textContent = `ERROR：新单词必须以${lastChar}开头`;
    return;
}

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