JavaScript按索引删除数组元素时相似值匹配却返回-1、splice删除不生效

1. 边循环边修改原数组的经典索引错位问题 #

你现在的逻辑是循环遍历「要删除的目标名称列表」，但循环过程中不断用splice修改subjectData的长度和元素位置，本身就容易出现匹配错位：
拿你给的初始数据举实际执行流程：

• 初始subjectData顺序：[{name:'a'}, {name:'b'}, {name:'c'}]
• 第一次循环匹配v='b'，定位到索引1，执行删除后，subjectData直接变成[{name:'a'}, {name:'c'}]
• 第二次循环匹配v='c'时，是基于已经被修改过的数组生成的name映射列表，只要有一点格式差异，就会触发匹配失败
  这种边删边遍历的写法，只要删除的元素位置靠后，还会出现漏删、多删其他元素的问题。

2. 视觉相似的字符串实际不相等，导致indexOf返回-1 #

你提到调试时看到el.name和v内容差不多，但indexOf找不到，基本都是不可见的字符串差异导致的：

• 前后带隐藏的空格/换行符：比如el.name实际是' b '，控制台打印时自动截断了两端空格，看起来和'b'完全一致
• 全角/半角字符混用：比如全角的ｂ、ｃ和半角的b/c视觉几乎没有区别，但Unicode编码完全不同，转小写后也不相等
• 部分特殊字符的大小写转换规则差异，也会导致匹配失效

完全没必要用循环+splice的写法，直接用数组过滤一步到位，从根源避免索引错位和匹配问题：

// 先把需要删除的名称列表预处理成小写+去空格的Set，匹配效率更高
const deleteNames = new Set(
  this.eachStudent.subjectName.map(name => name.trim().toLowerCase())
)

// 直接过滤数组，保留所有不在删除列表里的元素
this.subjectData = this.subjectData.filter(item => {
  const compareName = item.name.trim().toLowerCase()
  return !deleteNames.has(compareName)
})

这种写法的优势：

• 全程不会动态修改原数组的索引顺序，不存在splice导致的长度偏移、漏删问题
• 提前做了trim()清洗，解决不可见空格导致的“看起来像但匹配不到”的问题
• 用Set做匹配判断，比每次循环遍历数组算indexOf的性能更高，逻辑也更清晰

• 所有字符串对比前，都统一做trim().toLowerCase()处理，消除格式差异
• 不要遍历要删除的目标列表来删，要倒序遍历subjectData本身，从后往前删除就不会出现索引错位：

// 从数组最后一项往前遍历，删除前面的元素不会影响后面元素的索引
for (let i = this.subjectData.length - 1; i >= 0; i--) {
  const currentName = this.subjectData[i].name.trim().toLowerCase()
  // 判断当前元素是否在需要删除的名称列表里
  const needDelete = this.eachStudent.subjectName.some(deleteName => {
    return deleteName.trim().toLowerCase() === currentName
  })
  if (needDelete) {
    this.subjectData.splice(i, 1)
  }
}

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