小记js的深拷贝与浅拷贝

Posted 2022-01-26 feiniao8651

问题

在实现一个爬虫逻辑，多次进行同一接口请求时，将请求参数写入一个对象中，每次请求时复制这个对象，修改个别参数。

var param = a:0,b:0,c:0;//简单的以字段a,b,c来举例
//请求时
for(...) 
    var curParam = param;
    //请求逻辑中会修改相应字段
    send_request(curParam) 
        var response = await superagent.get(...).query(curParam);
        curParams.c = response.data.c;
    

但是在请求过程中，发现每次请求时获取到的初始curParam.c并不是0，而是会发生变化。

原因

以上就是由于浅拷贝的导致的问题。
可以这样简单的理解浅拷贝和深拷贝：B是通过复制A生成的，此时修改A，如果B也发生变化，就是浅拷贝，如果B没有发生变化，就是深拷贝。
js中数据类型分为两大类，基本数据类型和引用数据类型。基本数据类型包括Undefined、Null、Number、String、Boolean、Symbol；引用数据类型则为Object，Array、Set、Map数据属于Object。
基本数据类型都是储存在栈内存中，拷贝都是复制了一份副本，所以之后变量之间就没有关系了。而对于引用类型数据，数据值是存在堆内存中，栈内存中只存了指向堆内存的地址，当我们通过B=A进行复制时，此时只是B复制了A的栈内存中的引用地址，B和A指向的是同一个堆内存地址。此时修改A的值，B的值也会发生改变。

解决方法

引用类型的深拷贝。
具体参考js浅拷贝与深拷贝的区别和实现方式。
由于我的对象中都是基本数据类型，所以使用的是Object.assign来实现深拷贝。

var obj = a:1, b:2;
var objClone = Object.assign(, obj); //obj赋值给一个空对象

参考：
js浅拷贝与深拷贝的区别和实现方式
前端必看的js对象深拷贝方法