js给数组里面添加不重复的元素？

Question

var editableTabs = [{
    title: '详情页',
    name: '1',
    content: 'Header',
    closable: false
  }]

要给这个数组里面添加一个obj

const obj = {
    title: '失陷数量',
    name: '3',
    content: CompromiseEvent,
    closable: true
  }

是一个点击事件 如何多次点击的时候数组里面只添加一次

created() {
    Bus.$on('flowChange', e => {
      var arr = []
      arr.push(e)
      for (var i = 0; i < arr.length; i++) {
        if (this.editableTabs.indexOf(arr[i].name) === -1) {
          this.editableTabs.push(arr[i])
        }
      }
    })
  },
watch: {
    editableTabs(newV) {
      this.editableTabs = newV
      console.log(this.editableTabs)
    }
  },

点击事件触发的时候，我打印出来的this.editableTabs数组里面的元素 obj有多个
这个是我写的代码 麻烦指正一下哪里出问题了

Answer 1

this.editableTabs.indexOf(arr[i].name) === -1 这个判断写的不对，会始终返回-1，建议改为 this.editableTabs.every(v => v.name !== arr[i].name)

Answer 2

this.editableTabs是数组，里面的元素是对象，arr[i].name是字符串，两个肯定匹配不上

Answer 3

if (this.editableTabs.indexOf(arr[i].name) === -1) {
  this.editableTabs.push(arr[i])
}

你的判断条件错了。因为 editableTabs 是一个对象数组，里面的元素都是对象啊，而去匹配的 arr[i].name 是字符串，肯定会返回 -1 啊。

可以修改成这样:

if (!this.editableTabs.some(item=>item.name===arr[i].name)) {
  this.editableTabs.push(arr[i])
}

相关阅读
Array.prototype.indexOf() - JavaScript | MDN
Array.prototype.some() - JavaScript | MDN