Angular/TypeScript中如何删除数组内满足指定条件的元素

原代码问题说明 #

• 逻辑错误：this.number= 0是赋值操作，而非查找数组中值为0的元素下标，你当前的写法只会固定取数组下标为0的元素，无法定位到所有值为0的元素
• 功能不全：单次splice只能删除1个元素，如果数组里存在多个值为0的元素，无法全部清理
• 命名风险：delete是JavaScript内置保留字，用作方法名可能出现未知异常，建议更换方法名

正确实现代码 #

方法1：直接过滤生成新数组（最推荐，写法简洁，Angular可自动检测数组引用变化更新视图） #

app.component.ts代码：

// 更换方法名避免和保留字冲突
deleteZeroItems() {
  // filter方法会返回所有不等于0的元素组成的新数组，直接替换原数组即可
  this.DB = this.DB.filter(item => item !== 0)
}

app.component.html代码对应修改点击绑定的方法名：

<button (click)="deleteZeroItems()" class="btn btn-primary">delete num = 0</button>

方法2：原地修改数组（适合需要保留原数组引用的场景） #

如果你需要保持原数组的引用不变化，可以从后往前遍历删除，避免正序删除出现下标错乱漏删的问题：

deleteZeroItems() {
  // 倒序遍历不会因为删除元素导致后续下标偏移漏判
  for (let i = this.DB.length - 1; i >= 0; i--) {
    if (this.DB[i] === 0) {
      this.DB.splice(i, 1)
    }
  }
}

效果验证 #

两种写法都可以一次性清理数组中所有值为0的元素，点击按钮即可生效。

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