×

实现javascript中深拷贝和浅拷贝的方法

作者:jiang2018.06.27来源:Web前端之家浏览:9091评论:0

拷贝:其实就是一个对象复制给另外一整个对象,让对象相互不影响。

对象的拷贝又分为浅拷贝和深拷贝:

对象的浅拷贝(只拷贝一层)

对象的深拷贝(拷贝多层)

浅拷贝和深拷贝只针对object和Array这样的复杂的对象

所谓的浅拷贝,只是拷贝了基本类型的数据,对于引用的类型数据,复制后也是会发生引用,这种拷贝就叫做浅拷贝

而深拷贝,要求要复制一个复杂的对象,这就可以利用递归的思想来实现,省性能又不会发生引用,它不仅将原对象的各个属性逐个复制出去,而且将原对象各个属性所包含的对象也依次采用深复制的方法递归复制到新对象上。这就不会存在上面 obj 和 shallowObj 的 arr 属性指向同一个对象的问题。

var a = { name : “hello” };

实现浅拷贝

1、ES6:object.assign()

var a = { name : “hello” };

var b = Object.assign( { },a );

b.name = “hi”;

console.log(a);

2、展开运算符……

var a = { name : “hello” };

var b = { …a}; => 扩展运算符用三个点号表示,功能是把数组或类数组对象展开成一系列用逗号隔开的值

b.name = “hi”;

console.log(a);

3、自己封装函数实现for in

var a = { name : “hello” };

var b = copy(a);

b.name = ‘hi’;

console.log(a);

function copy(obj){

var result = { };

for(var attr in obj ){

result [attr] = obj[attr];

}

return result;

}

实现深拷贝

JS实现深拷贝则可以应用JSON.parse()JSON.Stringify()的方法

对象自变量和JSON的区别

1对象自变量是对象的操作 可以又方法和属性JSON数据的格式。规定数据的操作

2JSON只能写基本类型的数但是还有JSON

3JSON要求属性(key)和值都必须添加双引号

深拷贝实现

1、var a = };

var b = JSON.parse(JSON.Stringify(a));

b.name.age =30;

console.log(a);

必须针对对象JSON这样的深拷贝是有局限性的

2、已封装函数与实现for in +递归

var a = };

var b =deepcopy(a);

b.name.age = 30 ;

console.log(a);

function deepcopy (obj){

var result = { };

for(var attr in obj){}

if(type of obj[attr] === ‘object’){

result [attr] = deepcopy(obj[attr]);

}

else{

result[attr] = obj[attr];

}

}

Return result;

}

之所以会出现了深拷贝和浅拷贝,究其根本是因为JS种的变量包含了不同类型的数据值:基本类型和引用类型;同时其中变量的存储方式也不用Object属于堆内存的储存方式;并且JS的值的传递方式如值传递和址传递的会出现不同,所以才会出现这一系列的问题,因此才会使用深拷贝和浅拷贝来解决这些问题。

其实对于javascript的深拷贝和浅拷贝的方法还有很多,这里只是介绍了常见的几种方式。

您的支持是我们创作的动力!
温馨提示:本文作者系,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/shenlao234234.html

网友评论文明上网理性发言已有0人参与

发表评论: