关于map()遍历结合splice删除数组对象的技术问题咨询

嘿，我来帮你梳理下当前代码的问题，以及更合理的解决方案～

一、你当前代码的核心问题 #

首先得说：用map来做数组元素删除是不合适的——map的设计初衷是把数组每个元素转换成新值，返回一个全新的数组，不是用来做原地修改（比如splice）的操作。再看你代码里的具体错误：

1. splice语法错误：listFavoriteMedia.splice(index, x.id) 完全不对，splice的第二个参数是要删除的元素数量，不是元素值，正确写法是splice(index, 1)（删除从当前索引开始的1个元素）。
2. 未获取到遍历索引：map的回调函数第二个参数才是当前元素的索引，但你没写，所以代码里的index是未定义的，根本没法正确定位要删除的元素。
3. map遍历中修改原数组的风险：就算你拿到了索引，在map遍历的时候用splice修改原数组，会导致数组长度和元素位置变化，后续遍历的索引会错位，很可能漏删或者删错元素。

二、修复后的删除代码（原地修改） #

如果一定要原地修改数组（用splice），推荐用forEach或者倒序的for循环，这里给你两种靠谱的写法：

写法1：用forEach（适合只删第一个匹配项） #

if ($(this).hasClass("saveFavoriteMedia")) { 
    const saveId = $(this).attr("data-id"); 
    listFavoriteMedia.forEach(function (item, index) { 
        if (item.id === saveId) { 
            // 删除当前索引的1个元素
            listFavoriteMedia.splice(index, 1);
            // 找到后立即跳出forEach，避免后续遍历因为数组变化出问题
            return false;
        } 
    }); 
}

写法2：倒序for循环（适合删除所有匹配项） #

如果数组里可能有多个id等于saveId的元素，倒序遍历能避免删除元素后索引错位的问题：

if ($(this).hasClass("saveFavoriteMedia")) { 
    const saveId = $(this).attr("data-id"); 
    // 从数组末尾往前遍历
    for (let i = listFavoriteMedia.length - 1; i >= 0; i--) {
        if (listFavoriteMedia[i].id === saveId) {
            listFavoriteMedia.splice(i, 1);
            // 如果只删第一个匹配项，这里加个break就行
            // break;
        }
    }
}

三、无需手动管理索引，用splice删除对象的简洁方法 #

其实不用自己遍历找索引，用findIndex方法直接定位到匹配元素的索引，再执行splice就好，代码更简洁：

if ($(this).hasClass("saveFavoriteMedia")) { 
    const saveId = $(this).attr("data-id"); 
    // 找到第一个匹配元素的索引，找不到返回-1
    const targetIndex = listFavoriteMedia.findIndex(item => item.id === saveId);
    // 确保找到元素再删除
    if (targetIndex !== -1) {
        listFavoriteMedia.splice(targetIndex, 1);
    }
}

额外推荐：非原地修改的更安全方式 #

如果你不需要修改原数组，而是想要一个删除指定元素后的新数组，强烈推荐用filter方法——这是函数式编程的写法，不会影响原数组，逻辑更清晰：

if ($(this).hasClass("saveFavoriteMedia")) { 
    const saveId = $(this).attr("data-id"); 
    // 返回新数组，原数组保持不变
    listFavoriteMedia = listFavoriteMedia.filter(item => item.id !== saveId);
}

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