js数组的拷贝赋值复制二三事总结

Posted 2020-10-03

今天在看React-native性能优化的时候，看到如何避免shouldComponentUpdate的异常数据时，脑内一阵风暴，从而牵连出一连串的问题，于是有了这一篇关于js数组的复制（深浅拷贝）与赋值等为何能产生异常数据的文章。

有什么问题欢迎指正

 

现在进入正题：

首先异常数据的产生在于我们在复制赋值时，会有或没有改变到本身的值。

 

一、push与concat

 

push的定义是:像数组末尾添加一个或更多元素，并返回新的长度。该方法会改变数组的长度。

concat的定义是：连接两个或更多的数组，并返回结果，该方法不会改变现有数组，而仅仅会返回数组的一个副本。

var a = [1,2];  
a.push([3,4]);  
a.concat(5);  
//a为1 2 3,4 5 

 

二、深拷贝与浅拷贝

1.浅拷贝

JavaScript存储对象都是存地址的，所以浅复制会导致 a 和 b 指向同一块内存地址

数组的赋值其实相当于给了索引，改变其中一个变量其他引用都会改变

var a = [1,2,3];  
var b = a;  
b[0] = 4;  
//a为4 2 3  
//b为4 2 3  

根据上面存储对象的问题，这里就可以解决另一个问题：

    原始参数（比如一个具体的数字）被作为值传递给函数；值被传递给函数，如果被调用函数改变了这个参数的值，这样的改变不会影响到全局或调用函数。

    你传递一个对象（在js里数组不是简单数据类型，而是对象）到一个函数，如果在函数里面改变了这个参数的内容，在外部这个变化是可见的。

 

2.深拷贝

 

（1）slice 函数

（2）concat 函数

（3）assgin

 

三个函数的原理都是返回数组的一个副本（相当于另外开辟内存空间），所以并不会改变数组本身的的值

 

但是这里有一点不同，就是assgin与其他两点的不同

虽然说assgin也是深拷贝，但是他只是第一层深拷贝，第二层之后还是进行浅拷贝，例子如下：

var a = {  
    a1:{  
        aa1:‘11‘,  
        aa2:‘22‘  
    }  
}  
var b = Object.assgin({},a);  
var c = Object.assgin({},a);  
b.a1.aa1 = 33;  
/*  
b:{  
    a1:{  
        aa1:‘33‘,  
        aa2:‘22‘  
    }  
}  
c:{  
    a1:{  
        aa1:‘33‘,  
        aa2:‘22‘  
    }  
}  
*/