Vue.js使用axios请求数据时如何判断是否已存在后加入数组

• 存储id的数组在for循环内部声明，每次循环都会被重置为空，无法累计存储已存在的id
• 判断条件错误使用this.receivedData.id，this.receivedData是接口返回的完整数组，不存在id属性，查重逻辑完全失效
• 最后直接将完整返回数组赋值给去重数组，覆盖了所有去重操作，完全达不到去重效果
• 没有提前在Vue的data中定义持久化存储去重数据的响应式变量，新老数据无法正常合并

首先在Vue的data中定义两个变量，一个存储最终去重后的全量数据，一个存储已存在的id用于快速查重：

data() {
  return {
    // 存储所有去重后的最终数据，是响应式变量可直接用于页面渲染
    allDataList: [],
    // 用Set存储已存在的id，查重效率比数组高很多，数据量大时优势明显
    existIds: new Set()
  }
}

修正后的axios请求回调代码：

.then((response) => {
  const newData = response.data
  // 遍历本次接口返回的所有数据
  newData.forEach(item => {
    // 只有当前数据id不存在时才新增到数组
    if (!this.existIds.has(item.id)) {
      this.existIds.add(item.id)
      this.allDataList.push(item)
    }
  })
})

如果不想多维护一个Set变量，也可以直接在现有数组中查重，写法如下，适合数据量不大的场景：

.then((response) => {
  const newData = response.data
  newData.forEach(item => {
    // 遍历现有数组判断是否存在同id的元素
    const isExist = this.allDataList.some(existItem => existItem.id === item.id)
    if (!isExist) {
      this.allDataList.push(item)
    }
  })
})

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