js arr的数组引用问题，复制数组

清疚 2023-02-27 05:30 3阅读 0赞

今天练习时，我使用arr数组，现在想要把新建一个数组存储arr的数据，然后改变arr的值，等以后需要原来数据时候，就可以用了。

然后我突然意识到一个问题：我能直接 var newArr=arr; 吗？不能啊。原因看下面：

var arr=[1,2,3,4];
    var newArr=arr;
    console.log("before change arr:",newArr);
    
    // now change arr
    arr.pop();
    console.log("after change arr:",newArr);

![在这里插入图片描述][20200716114541251.png]  
为什么newArr也会改变，因为newArr与arr引用一样，修改arr，newArr自然也会改变。

怎样使两者引用不同？目前暂时收集了三种方法：

*  方法1：数组的concat复制方法
 *  方法2：数组的slice截取方法

var newArr1=arr.concat();
    var newArr2=arr.slice();
    arr.pop();
    console.log("after change arr------------");
    console.log("newArr1:",newArr1);
    console.log("newArr2:",newArr2);

可以看出，当arr尾部删除一个元素，新复制的两个数组没有变化，说明与arr不同引用。  
![在这里插入图片描述][20200716114407250.png]  
数组的splice也可以用作复制，但是因为他会改变原数组，应该叫做剪切，所以，不列入。

还可以遍历数组进行复制，太麻烦了，不列入。

*  方法3：改变arr的引用，相当于重新给arr赋值

var arr=[1,2,3,4];
    var newArr=arr;
    arr=[];
    console.log("newArr:",newArr)
    console.log("arr:",arr)

![在这里插入图片描述][20200716204957293.png]

如若有其他方法，以后再补。

[20200716114541251.png]: /images/20230209/f07c9e04f0ec40d49ce69c432c971453.png
[20200716114407250.png]: /images/20230209/8d7ee41df1e24ef4b028853e965c8707.png
[20200716204957293.png]: /images/20230209/6081901ab94444b08145e1ab49666940.png