vue如何从一个数组A删去和另一个数组B相同的元素

假设我们现在有两个数组:

A={"商品1","商品2","商品3","商品4"}

B={"商品1","商品2","商品3","商品4"}

如何从数组A中删除数组B呢（或者说删除相同的元素）？

首先想到的是循环遍历A数组和B数组，找出A数组中和B数组中相同的元素并删除

实现如下：

 handleDelete() {
     this.A.forEach((itemA, indexA) => {
         this.B.forEach(itemB => {
             if (itemA === itemB) {
                 this.A.splice(indexA, 1)
             }
         })
     })
 }

当函数执行完毕，最终A={"商品3","商品4"},结果并非我们想象那样删除了所有元素

这是因为在vue中，数组删除元素后会导致数组下标发生变化，导致最后只能删除部分数据！！！

---

上面函数在执行时，遍历时先删除A中下标为0的商品1

删除后，A=["商品2","商品3","商品4"]

商品2的下标变成0，商品3下标变成1,

随后会遍历删除下标为1的商品3，

删除后，A={"商品2","商品4"}

商品4的下标变成1,后续遍历结束

所以最后只删除了商品1和商品3

解决方法:（标记法）

 handleDelete() {
     this.A.forEach((itemA, indexA) => {
         this.B.forEach(itemB => {
             if (itemA === itemB) {
                 this.A.splice(indexA, 1, "删我")
             }
         })
     })
     this.A= this.A.filter(item => item !== "删我")
 }

1.先标记被删除的元素

使用vue中的splice方法，遍历两个数组，找到A数组中和B数组相同的元素并用标记字符串替换（注意是替换而不是删除！！！）

这样下次遍历数组下标就不会发生变化

2.删除被标记的元素

等标记完成后

调用filter方法过滤掉标记的待删除的元素

大功告成！