Pixi.js中如何高效删除精灵数组内的指定精灵

你当前的写法不仅繁琐，还存在会导致运行异常的逻辑问题：

• 调用shift()只会固定删除数组的第一个元素，和当前触发出界条件的子弹索引完全不匹配，会误删还在屏幕内的有效子弹。
• 正序遍历数组时直接修改数组长度，会导致后续元素的索引整体偏移，出现子弹漏移动、漏判出界的问题。
• 频繁从数组头部执行删除操作的时间复杂度为O(n)，子弹数量较多时会产生不必要的性能开销。

根据2D游戏开发中精灵数组管理的通用实践，有两种高效简洁的标准写法可以选择：

方案1：倒序遍历+splice精准删除（性能最优） #

从数组尾部开始倒序遍历，完全规避遍历过程中删除元素导致的索引错乱问题，用splice()精准删除当前索引对应的出界子弹，没有额外的数组创建开销，适合遍历过程中需要同步处理位移、碰撞检测等多逻辑的场景：

for (let index = myPlane.bullets.length - 1; index >= 0; index--) {
  const bullet = myPlane.bullets[index]
  if (bullet.y < -bulletHeight) {
    bullet.destroy()
    myPlane.bullets.splice(index, 1)
    continue
  }
  bullet.y -= bulletSpeed
}

方案2：filter批量过滤（可读性最高） #

把位移逻辑和销毁过滤逻辑拆分，用数组filter方法直接筛出所有需要保留的子弹，代码逻辑更直观，适合逻辑模块化的场景：

// 统一更新所有在屏子弹的位置
myPlane.bullets.forEach(bullet => bullet.y -= bulletSpeed)
// 过滤销毁出界子弹
myPlane.bullets = myPlane.bullets.filter(bullet => {
  const isOutOfScreen = bullet.y < -bulletHeight
  if (isOutOfScreen) bullet.destroy()
  return !isOutOfScreen
})

注意：必须先调用精灵实例的destroy()方法释放渲染引擎占用的纹理、事件监听等资源，再从数组中移除对应引用，否则会造成内存泄漏。

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