vue+elementui 中js两个不同的数组做对比，找出不同的项放入新数组。

前景:
项目中遇到需要两个不同的数组做比对,不同的项放入新数组。

例子:
每个用户都有一个独立账号。
项目中遇到:前提是之前手动选中过这个用户，后台手动取消了这个操作用户name权限，实际还可以提交龙须面用户项。(但是在实际下拉框列表中不会显示此龙须面用户,选中项里面会有龙须面用户，之前被选中过龙须面用户)。

例子:
(动态返回的list)
a数组:是下拉框选中项列表

let a=ref([
{userName:'黄金糕',userId:'1'},
{userName:'双皮奶',userId:'2'},
{userName:'蚵仔煎',userId:'3'},
{userName:'龙须面',userId:'4'},
]）

(动态返回的list)
b数组:下拉框不管有没有选中项，显示的(下拉框的所有项)

let b=ref([
{nickName:'黄金糕',userId:'1'},
{nickName:'北京烤鸭',userId:'5'},
])

let editOptions=ref([]);//新数组

html

//弹出框的新增和修改公用一个下拉列表项
//其他代码段省略..
//重要部分
//keyIds:【1，2，3，4】选中项返回的数组list
//v-show="!item.tag"  控制当前项不为真就不显示下拉列表项当前name
<el-form>
<el-form-item label="名称: " prop="keyIds">
  <el-select v-model="form.coop" multiple  placeholder="请选择">
  //editOptions是组成的新数组
    <el-option
      v-for="item in editOptions"
      :key="item.userId"
      :label="item.nickName"
      :value="item.userId" v-show="!item.tag">
      <span>{
   
   { item.nickName }}</span>
     </el-option>
   </el-select>
  </el-form-item>
  </el-form>

js

//data.a 是后台返回的数组 list
//data.a为空的时候是null 
//所以用三元运算符解决
  data.a ? true : data.a = []
      let arr = []
      let idList = []
      b.value.forEach(i => {
        idList.push(i.userId)
      })
      data.a.forEach(item => {
        if (idList.indexOf(item.userId) === -1) {
          arr.push({
            nickName: item.userName,
            userId: item.userId,
            tag: true
          })
        }
      })
      nextTick(() => {
      //editOptions 组成一个新数组 
        editOptions.value = [...b.value, ...arr]
        console.log('修改名称',editOptions.value);
      })