使用splice删除数组中blob元素后出现奇怪空元素，如何避免该问题

• splice方法本身是标准的数组增删方法，执行删除操作时不会主动生成空元素，出现该现象首先考虑是数组为响应式代理对象（如Vue/React等框架的响应式状态数组）：框架的响应式拦截逻辑会对数组操作做封装，控制台打印代理对象时会出现展示为empty的占位槽，属于调试展示偏差，数组本身不存在实际空元素。
• 若数组确实存在空槽，大概率是删除操作前就已经生成了空元素：比如此前直接通过超过数组当前长度的下标赋值data.instructAudios[10] = blob，中间未赋值的位置会自动成为空槽，splice删除元素后遍历时空槽就会显现。
• 第三种可能是传入的index参数不合法：比如index为字符串类型的数字、index超出数组有效下标范围，部分JS引擎处理非法入参的splice调用时，会生成非预期空槽。

• 优先校验index合法性，调用splice前先判断入参有效性：

// 仅当index为合法数字且在数组下标范围内时执行删除
if (typeof index === 'number' && index >= 0 && index < data.instructAudios.length) {
  data.instructAudios.splice(index, 1)
}

• 若使用响应式框架，可采用不可变更新的方式替代splice操作，从根源避免代理逻辑带来的异常：

// 过滤掉对应下标的元素后直接赋值新数组，兼容所有框架场景
data.instructAudios = data.instructAudios.filter((item, idx) => idx !== index)

• 若需要验证数组是否真的存在空元素，可通过遍历检查下标是否存在有效值，排除控制台展示偏差：

// 遍历检查所有下标是否有对应值
for (let i = 0; i < data.instructAudios.length; i++) {
  console.log(i, data.instructAudios.hasOwnProperty(i))
}

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