vue中使用forEach()遇到的坑

使用forEach循环时，进行条件判断，通过使用splice()对数组进行删除操作的时候，会出现“漏网之鱼”

在forEach()中 forEach(item, index) 其中在循环过程中index会隐行自增

例子

<script>
export default {
  data () {
    return {
      data: ['小明', '小明', '小红', '小虎', '小明', '土豆']
    }
  },
  methods: {
  },
  mounted () {
    // 使用forEach存在的坑
    this.data.forEach((item, index) => {
      if (item === '小明') {
        // 此处删除的时候会导致第二个小明的下标受到影响（变成了下标为0）
        // 但是数组的下标并不会重置
        // 从而导致第二个小明的名字并没有被剔除
        this.data.splice(index, 1)
        // 此处的index会隐性自增
      }
    })
    console.log(this.data)  // ['小明', '小红', '小虎', '土豆']


    // 解决方法一
    // 解决办法使用for语句通过length长度逐渐减少来循环
    for (let i = this.data.length; i >= 0; i--) {
      if (this.data[i] === '小明') {
        this.data.splice(i, 1)
      }
    }
    console.log(this.data) // ['小红', '小虎', '土豆']


    // 解决方法二
    // 通过数组的过滤方法filter()
    // 需要注意filter()方法是返回一个新数组，需要去接收它
    this.data = this.data.filter(item => item !== '小明')
    console.log(this.data) // ['小红', '小虎', '土豆']
  }
}
</script>