js 深拷贝与浅拷贝

在写代码的过程中发现复制一个对象时,当改变对象新的对象时,原来的对象也发生了变化,原来对象中是按引用传递,它们都是保存在一个内存的同个位置,改变对象时,也改变了引用的地址。但我们往往需要拷贝的是一个新的对象,改变值同时也不改变原来的,这时就需要用到深度拷贝和浅度拷贝了。

浅度拷贝:复制一层对象的属性,并不包括对象里面的为引用类型的数据,当改变拷贝的对象里面的引用类型时,源对象也会改变。

深度拷贝:重新开辟一个内存空间,需要递归拷贝对象里的引用,直到子属性都为基本类型。两个对象对应两个不同的地址,修改一个对象的属性,不会改变另一个对象的属性。

js基本类型的分类

基础类型:undefined 、 null、number、string、boolean、symbol

引用类型:object对象类型(Object 、Array 、Function 、Data)

 

浅拷贝

浅拷贝在我看来就是对一 "层" 简单类型的拷贝,

对于在a对象里面的包含b对象的浅拷贝,拷贝为c对象后 ,c对象中b'对象和a对象中的b对象指向的事同一块内存地址,对于a对象以及c对象的'一层',

基本类型的拷贝,实际上指向的是不同的内存地址。

function simpleCopy(obj1) {
   var obj2 = Array.isArray(obj1) ? [] : {};
   for (let i in obj1) {
   obj2[i] = obj1[i];
  }
   return obj2;
}
var obj1 = {
   a: 1,
   b: 2,
   c: {
   d: 3
  }
}
var obj2 = simpleCopy(obj1);
obj2.a = 3;
obj2.c.d = 4;
alert(obj1.a); // 1
alert(obj2.a); // 3
alert(obj1.c.d); // 4
alert(obj2.c.d); // 4

可以看到浅拷贝中,基本类型的拷贝,实际上指向的是不同的内存地址

深拷贝

  • JSON.stringify与JSON.parse
  • Array的slice和concat方法 返回新数组

JSON对象的parse和stringify

JSON对象是ES5中引入的新的类型(支持的浏览器为IE8+),JSON对象parse方法可以将JSON字符串反序列化成JS对象,stringify方法可以将JS对象序列化成JSON字符串,借助这两个方法,也可以实现对象的深拷贝。

//例
var source = { name:"source", child:{ name:"child" } } 
var target = JSON.parse(JSON.stringify(source));
target.name = "target";  //改变target的name属性
console.log(source.name); //source 
console.log(target.name); //target
target.child.name = "target child"; //改变target的child 
console.log(source.child.name); //child 
console.log(target.child.name); //target child

 

 

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页