今天犯了一个非常有意思的错误，记录一下。

起因

一个数组['中', '发', '白']，执行了以下删除元素的代码后，一直删不干净，并且只剩下一个['发']。重点代码在下方for循环中。

  1. watch: {
  2.     availableParList: {
  3.       handler (newValue) {
  4.         this.chainSettings = { ...this.item, checkList: newValue }
  5.         if (this.chainSettings.checkList) {
  6.           // 如果在选完第二步后，回到第一步中所选的参与方被删除，第二步则应同步删除刚才所选的参与方
  7.           for (let i = 0; i < this.chainSettings.participantNames.length; i++) {
  8.             let item = this.chainSettings.participantNames[i]
  9.             if (!_.find(newValue, { name: item })) {
  10.               this.chainSettings.participantNames.splice(i, 1)
  11.             }
  12.           }
  13.         }
  14.       },
  15.       immediate: true
  16.     },

原因

是因为在边循环边删除，this.chainSettings.participantNames 这个数组，长度是在变短的，删完第一个元素，就只剩下['中','白']，再进入循环时，this.chainSettings.participantNames[1]其实也就是删掉了['白']这个元素，下次循环时，此时i已经等于2了，数组长度是1，就不会再进入循环了。

解决办法

  • 可以倒序循环，但注意 i 的取值
    1. for (let i = this.chainSettings.participantNames.length; i > 0; i--) {
    2.           let lastItem = this.chainSettings.participantNames[i-1] // 这里很容易错，注意是i-1
    3.           if (!_.find(newValue, { name: lastItem })) {
    4.             console.log('doit')
    5.             this.chainSettings.participantNames.splice(i-1, 1)
    6.           }
    7.         }
    8. }

总结

这应该是最初级的错误了吧，看来以后还是要刷一刷LeetCode，锻炼一下逻辑能力，希望不要再犯此类错误。