vue 两个数组对象随机组成两个新的数组

Question

let aa = [{'id':1,name:'a1'},{'id':2,name:'a2'},{'id':3,name:'a3'}]
let bb = [{'id':1,name:'b1'},{'id':2,name:'b2'},{'id':3,name:'b3'}]

let ption = aa.concat(bb)
let ption1 = bb.concat(aa)

let list1 = ption.sort(() => Math.random() - 0.5)
let list2 = ption1.sort(() => Math.random() - 0.5)

获取到list1和list2
但是在vue中 为什么在我操作list1中的数据时，对应的list2中的数据也被操作了？？
该怎么组合aa bb才不会操作aa时bb同时也被操作

Answer 1

深拷贝，切断引用关系。
JSON.parse(JSON.stringify())

Answer 2

如果确定 aa 和 bb 里的元素只是一个一层的对象，可以直接对元素浅拷贝处理：

let ption = aa.concat(bb.map(item => ({ ...item })))
let ption1 = bb.concat(aa.map(item => ({ ...item })))

如果每个元素是一个层数较深的对象，比如像下面这样的：

const obj = {
  id: 1,
  name: 'name',
  props: {
    record: {
      list: [...]
    }
  }
}

那在 map 遍历的时候你则需要深拷贝每个元素，以防止产生同一个对象的引用：

let ption = aa.concat(bb.map(item => cloneDeep(item)))
let ption1 = bb.concat(aa.map(item => cloneDeep(item)))

深拷贝的函数有很多，这里就不贴了。