JavaScript：文本输入框增删数组元素时重复项无法完全移除问题

我用文本框作为输入字段，向空数组中添加数字元素，设置了两个按钮：添加按钮和删除按钮。点击添加按钮时，文本框中的输入值会被添加到数组中；点击删除按钮时，需要移除数组中所有与输入值相同的元素（包括重复项）。但现在遇到的问题是：当数组中存在多个相同元素时，点击删除按钮无法移除所有相同元素，仍有部分元素残留。

我的代码 #

let array = []

function add(n) {
    let input = document.getElementById("number").value
    let output = document.getElementById("arrayElements")

    array.push(input)
    output.innerHTML = "Value added to the array :" + array
}

function remove(n) {
    let input = document.getElementById("number").value
    let output = document.getElementById("arrayElements")

    // for (let i = 0; i <= array.length; i++) {
    //     if (array[i] == input) {
    //         delete array[i]
    //     }
    // }

    for (let i = 0; i <= array.length; i++) {
        // debugger
        const index = array.indexOf(input)
        if (index != -1) {
            array.splice(index, 1)
        }
        console.log("array", array);
    }

    // array = array.filter(item => item !== input)
    // console.log(array);

    output.innerHTML = "Value removed from the array :" + newarr
}

问题原因 #

你当前的删除逻辑有两个核心问题：

1. 循环+splice的下标混乱：每次调用splice删除元素后，数组长度会缩短，后续元素的下标会前移，但你的循环还是按初始长度递增，导致部分元素被跳过，没法全部删除。
2. 未定义变量newarr：最后更新DOM时用了不存在的newarr，应该直接使用修改后的array。

解决方案 #

方案1：用filter函数（最简洁可靠） #

数组的filter方法会返回一个新数组，包含所有符合条件的元素，直接过滤掉目标值即可：

function remove(n) {
    let input = document.getElementById("number").value
    let output = document.getElementById("arrayElements")
    // 过滤掉所有与输入值相同的元素
    array = array.filter(item => item !== input)
    // 更新页面显示
    output.innerHTML = "移除后的数组：" + array
}

方案2：手动循环实现（从后往前遍历） #

如果不想用filter，可以从数组末尾往前遍历，这样删除元素时不会影响前面未遍历的元素下标：

function remove(n) {
    let input = document.getElementById("number").value
    let output = document.getElementById("arrayElements")
    // 从最后一个元素开始往前遍历
    for (let i = array.length - 1; i >= 0; i--) {
        if (array[i] === input) {
            array.splice(i, 1)
        }
    }
    output.innerHTML = "移除后的数组：" + array
}

额外优化建议 #

• 输入框获取的值默认是字符串类型，如果要处理数字，记得转成Number类型，比如let input = Number(document.getElementById("number").value)，避免字符串和数字的匹配错误。
• 添加函数里也可以同步转类型，确保数组中存储的是数字而非字符串：

function add(n) {
    let input = Number(document.getElementById("number").value)
    let output = document.getElementById("arrayElements")
    // 可以加个判断，确保输入是有效数字
    if (!isNaN(input)) {
        array.push(input)
        output.innerHTML = "已添加元素到数组：" + array
    } else {
        output.innerHTML = "请输入有效的数字！"
    }
}

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