两个相同的数组 操作一组 另一组也出现相同的状况

问题

两个下拉框，两个下拉框的数据是内容完全相同的两个数组，操作其中一个数组，另一个数组也出现相同的现象

原因

JS中数组是引用类型，直接把一个引用类型变量arr复制给另一个变量arr2，并不会创建一个新的数组然后复制给arr2，而是只复制对数组的引用，也就是说arr和arr2指向同一个数组，所以对arr或arr2的操作会同时影响到另一个。

（对象使用的是引用赋值。当我们把一个对象赋值给一个新的变量时，赋的其实是该对象的在堆中的地址，而不是堆中的数据。也就是两个对象指向的是同一个存储空间，无论哪个对象发生改变，其实都是改变的存储空间的内容，因此，两个对象是联动的。）

解决方法

1、比较稳妥的方法

var arr = [1,2,3]

var arr1 = JSON.parse(JSON.stringify(arr))

arr.push(4)

arr1.push(5)

console.log(arr); //[ 1, 2, 3, 4 ]
console.log(arr1); //[ 1, 2, 3, 5 ]

2、

var arr = [1,2,3]

var arr1 = []

arr.map(v=>{
    arr1.push(v)
})

arr.push(4)

arr1.push(5)

console.log(arr);//[ 1, 2, 3, 4 ]
console.log(arr1);//[ 1, 2, 3, 5 ]

但是！！这种方法在数组里面项是对象的时候，item依然会相关联，可以说是藕断丝连，前端极易出现问题

var arr = [{name:'啊啊啊'},2,3]

var arr1 = []

arr.map(v=>{
    arr1.push(v)
})

arr.push(4)

arr1.push(5)

console.log(arr); //[ { name: '啊啊啊' }, 2, 3, 4 ]
console.log(arr1); //[ { name: '啊啊啊' }, 2, 3, 5 ]

arr[0].vocal='哼哼'

console.log(arr); //[ { name: '啊啊啊', vocal: '哼哼' }, 2, 3, 4 ]
console.log(arr2); //[ { name: '啊啊啊', vocal: '哼哼' }, 2, 3, 5 ]