vue js删除了一个数组的元素，另外一个数组也同步删了

Question

有2个数组，左边的数组A是写死的，我把左边的数组A的数据经过逻辑处理之后放入到右边的数组B, A 和 B 2个数组的数据结构一致的，数组的名称不一样，当我操作数组B的时候，例如 B.splice(index, 1)的时候，数组A的当前index位置的元素也删除了，如何避免这个问题？

代码如下
json 格式
leftMenu：

         [{
                lv: 1,
                collspan: true ,
                menuId: '1-1',
                menuText: '消费-采购服务',
                //  iconClass:'../static/nav/toTop.png'
                subMenu: [
                    {
                        menuText: '机票',
                        menuId: '1-1-1',
                        lv: 2,
                        url:'',
                        // iconClass:'../static/nav/toTop.png'
                    },
                      {
                        menuText: '酒店',
                        menuId: '1-1-2',
                        lv: 2,
                        url:''
                    },
                      {
                        menuText: '会议',
                        menuId: '1-1-3',
                        lv: 2,
                        url:''
                    },
                      {
                        menuText: '采购商城',
                        menuId: '1-1-4',
                        lv: 2,
                        url:''
                    }
                ]
      }]
      

this.editMenuData.push(leftMenu)
editMenuData 数组是空的，逻辑处理，需要把leftMenu对象添加到editMenuData 数组,editMenuData的数据结构与leftMenu数据结构一致，

Answer 1

B = JSON.parse(JSON.stringify( B ))

Answer 2

估计是B也是使用了A的引用造成的，贴代码才能更准确的判断原因。
举个简单的例子如下：

let arrA = arrB = []; // 数组在js中也是对象，变量使用的值实际上是对象的引用地址
arrB.push(1); // 所以当你对arrB进行操作，也就改变了数组。当arrA使用的也是这个数组的引用地址，所以arrA实际的值和arrB是一样的，都是通过数组的引用
arrB // [1]
arrA // [1]

要解决这个相同引用导致的问题，只需要让2个变量不是引用同一个对象的指针即可。不用深克隆的话，可以这样做：

let arrA = []; 
let arrB = arrA.concat();
arrB.push(1);
arrB // [1]
arrA // []

或者直接使用Lodash的cloneDeep方法，深克隆。

Answer 3

复制数组的时候使用JSON.parse(JSON.stringify()) 深拷贝一下 比如：arrB = JSON.parse(JSON.stringify(arrA))

Answer 4

数组或者对象复制的时候深拷贝 就不会出现这个问题了