js 兩個相等的數組，修改其中一個怎麼作到不改變另一個

現有 :

let arrA = [1, 2, 3];
let arrB = arrA;
console.log(arrA);//[1, 2, 3]
console.log(arrB);//[1, 2, 3]
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]
//[10, 2, 3]
console.log(arrB);//[10, 2, 3]
2. 若是改變arrB，則arrA也會改變：

 

arrB.push(4);
console.log(arrA);//[1, 2, 3, 4] 
console.log(arrB);//[1, 2, 3, 4] 
//[1, 2, 3, 4] 
console.log(arrB);//[1, 2, 3, 4] 
緣由：js中array是引用類型，也就是arrA和arrB的原數據存儲地址是同樣的，arrA和arrB都是對原數據的引用，因此修改其中一個，另外一個也會改變。這就好像是如今有一個房間，兩扇門，AB兩人分別從不一樣的門進去所看到的的房間是同樣的，此時A拿走一個蘋果，B會看到房間裏少了一個蘋果；B從外面帶了一瓶飲料回到房間，A也會看到這個房間多了一瓶飲料。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

那麼兩個相等的數組，修改其中一個怎麼作到不改變另一個呢？也就是說僅僅是arrA賦值給arrB，而不是把引用賦給它。

我所知道的解決方案有如下4種：

方法一：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]
方法二：先JSON.stringify( ) 後 JSON.parse( )
let arrA = [1, 2, 3];
let arrB = JSON.parse(JSON.stringify(arrA));  //arrB: [1, 2, 3]
//若是 arrB.pop();            //arrB:[1,2],   arrA:[1,2,3]
//若是 arrA.shift();          //arrA:[2,3],   arrB:[1,2,3]
方法三：jQuery的extend方法
let a = [1,2,3];
let b = $.extend(true,[],a)
b[0]++   //b:[2,2,3]    a:[1,2,3]
方法四：Object.assign()方法 或者 [...arr]
let a = [1,2,3];
let b = Object.assign([],a)   //或者 let b = [...a]  
b[0]++   //b:[2,2,3]    a:[1,2,3]
可是須要注意的是，若是是對象數組，即便是用方法一的concat、方法四的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;   //b:[{name:'zhangsan',age:25}]    a:[{name:'zhangsan',age:25}]
此時用方法二的先JSON.stringify( ) 後 JSON.parse( )
--------------------- 
做者：音浪豆豆_Rachel 
來源：CSDN 
轉載自原文：https://blog.csdn.net/u014054437/article/details/80415174