js中的数组 两个数组值相同时，一个数组改变 另一个数组跟着改变的原因。两个相等的数组，修改其中一个数组怎么做到不改变另外一个数组？论深度拷贝的重要性

示例：

现在有两个数组：

let arrA = [1, 2, 3];
let arrB = arrA;
console.log(arrA); // [1, 2, 3]
console.log(arrB); // [1, 2, 3]
           

1. 当数组arrA改变时，数组arrB也会改变：

arrA[0] = 10; 
console.log(arrA); // [10, 2, 3]
console.log(arrB); // [10, 2, 3]
           

1. 当数组arrB改变时，数组arrA也会改变：

arrB.push(4);
console.log(arrA); // [1, 2, 3, 4] 
console.log(arrB); // [1, 2, 3, 4] 
           

导致两个数组相互影响的原因：

js中array是引用类型，也就是arrA和arrB的原数据存储地址是一样的，arrA和arrB都是对原数据的引用，所以修改其中一个，另一个也会改变。

这就好像是现在有一个房间，两扇门，AB两人分别从不同的门进去所看到的的房间是一样的，此时A拿走一个苹果，B会看到房间里少了一个苹果；B从外面带了一瓶饮料回到房间，A也会看到这个房间多了一瓶饮料。

那么上面两个相等的数组，修改其中一个怎么做到不改变另外一个呢？也就是说仅仅是数组arrA赋值给数组arrB，而不是把引用赋给它

方案1：

concat()用于连接两个或多个数组。（该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本）

let arrA = [1, 2, 3];
let arrB = [].concat(arrA);
console.log(arrA,arrB);  // [1, 2, 3],[1, 2, 3]
           

当数组arrA改变, 数组arrB不变时：

arrA.splice(0,1);
console.log(arrA,arrB);  // [2, 3],[1, 2, 3]
           

当数组arrB改变, 数组arrA不变时：

arrB[0] = 0;
console.log(arrA,arrB);   // [1, 2, 3],[0, 2, 3]
           

方案2：

先JSON.stringify( ) 后 JSON.parse( )

let arrA = [1, 2, 3];
let arrB = JSON.parse(JSON.stringify(arrA));  
console.log(arrB); // [1, 2, 3]
           

1. 当数组 arrB.pop()

console.log(arrA,arrB);   // [1, 2,3],[1, 2]
           

1. 当数组 arrA.shift()

console.log(arrA,arrB);   // [ 2,3],[1, 2，3]
           

方案3：

jQuery的extend方法

let a = [1,2,3];
let b = $.extend(true,[],a)
b[0]++  
console.log(a,b); // [1,2,3],[2,2,3]
           

方案4：

Object.assign()方法 或者 […arr]

let a = [1,2,3];
let b = Object.assign([],a)   //或者 let b = [...a]  
b[0]++ 
console.log(a,b); // [1,2,3],[2,2,3]
           

但是需要注意的是：*如果是对象数组，即使是用方案1的concat、方案4的**Object.assign()或者[…arr]*赋值也是会互相影响的：

let a=[{name:'zhangsan',age:20}]
let b = Object.assign([],a)   // 或者 let b = [...a]  或者 let b = [].concat(a) 
b[0].age=25;   
console.log()a,b; // [{name:'zhangsan',age:25}],[{name:'zhangsan',age:25}] 
           

此时用方案3的先JSON.stringify( ) 后 JSON.parse( )