JS拷贝对象浅克隆深克隆深拷贝与浅拷贝，实现深拷贝的几种方法

JS拷贝对象 浅克隆深克隆 深拷贝浅拷贝

对象简介

js程序中都是用对象结构来描述显示中一个事物&＃xff0c;对象就是一组属性和方法的集合。

面向对象三大特点: 封装&＃xff0c;继承&＃xff0c;多态。

克隆对象

浅克隆是克隆 一层&＃xff0c;深层次的对象级别的就克隆引用地址
深克隆是克隆 多层&＃xff0c;每一级别的数据都会克隆出来
浅克隆就是克隆了一层&＃xff0c;除了对象是克隆的引用类型地址&＃xff0c;其他都是 按值传递&＃xff0c;有自己的内存空间

点击进入查看按值传递

实现浅克隆方法

for in循环

1. 定义一个克隆函数用循环一个一个把对象中的属性赋值强行添加给新对象
2. 创建一个对象&＃xff0c;对象的属性有&＃xff1a;字符串&＃xff0c;对象&＃xff0c;数组
3. 调用克隆函数&＃xff0c;把刚刚创建的对象放进去
4. 分别输出得到对象的三个属性值
5. 更改克隆生成的对象中的a,b,c
6. 看看原来的对象是否变化

//------------------1------------------
function clone(initalObj) {var obj &＃61; {};for ( var i in initalObj) {obj[i] &＃61; initalObj[i];}return obj;
}
//------------------2------------------
var obj &＃61; {a: "hello",b:{a: "world",b: 21},c:["Bob", "Tom", "Jenny"]
};
//------------------3------------------
var cloneObj &＃61; clone(obj);
//------------------4------------------
console.log(cloneObj.a);
console.log(cloneObj.b);
console.log(cloneObj.c);
//------------------5------------------
cloneObj.a &＃61; "changed";
cloneObj.b.a &＃61; "changed";
cloneObj.b.b &＃61; 25;
cloneObj.c[3] &＃61; "Lilei";
//------------------6------------------
console.log(obj.a); //hello
console.log(obj.b); //{a:"changed",b:25}
console.log(obj.c); //[&＃39;Bob&＃39;,&＃39;Tom&＃39;,&＃39;Jenny&＃39;,&＃39;Lilei&＃39;]


通过以上代码可以看出来&＃xff0c;obj.b 属性的属性值被 修改 cloneObj.b 值的时候修改 c 和 b 是同样的结果

事实上就是for in循环 克隆引用类型的时候&＃xff0c;复制的都是引用地址

ES6中的Object.assign方法

Object.assign(target, ...sources)
//参数&＃xff1a;
// target&＃xff1a;目标对象
// sources&＃xff1a;任意多个源对象
//返回值&＃xff1a;
// 目标对象会被返回


Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

但是 Object.assign() 进行的是浅克隆&＃xff0c;克隆的是对象的属性的引用&＃xff0c;而不是对象本身。

var obj &＃61; {a: "LiLei",b: {a: "LiXiaolei",b: 21,},};
var cloneObj &＃61; Object.assign({}, obj);
cloneObj.a &＃61; "changed";
cloneObj.b.a &＃61; "changed";console.log(obj.a); //LiLei
console.log(obj.b.a); // "changed"var obj2 &＃61; { a: 1, b: 2, c: 3 };
var cloneObj2 &＃61; Object.assign({}, obj2);
cloneObj2.b &＃61; 10;
console.log(obj2);
// { a: 1, b: 2, c: 3 }
console.log(cloneObj2);
// { a: 1, b: 10, c: 3 }


可以看到修改cloneObj2.b&＃xff0c;原来obj2没有发生变化

实现深克隆方法

递归拷贝

定义函数在函数执行前判断类型&＃xff1a;

是否为null、是就直接返回null&＃xff1b;

是否为数组&＃xff0c;是数组利用slice方法放到一个新数组返回&＃xff1b;

在遍历的时候判断是否为引用类型&＃xff0c;如果原对象中当前值是原始类型就可以直接赋值&＃xff0c;否则当前属性不是原始类型的值&＃xff0c;再次调用clone函数&＃xff0c;继续复制当前属性值

var LiMing&＃61;{sname:&＃39;LiMing&＃39;,sage:11,score:null,firends:["jack","rose"],address:{prov:&＃39;北京&＃39;,city:&＃39;北京&＃39;,area:&＃39;朝阳&＃39;,street:&＃39;成寿寺&＃39;}
}
function clone(obj){if(obj&＃61;&＃61;&＃61;null){return null;}if({}.toString.call(obj)&＃61;&＃61;&＃61;"[object Array]"){var newArr&＃61;[];newArr&＃61;obj.slice();return newArr;}var newobj&＃61;{};//遍历对象中的每个属性for(var key in obj){//如果原对象中当前值是原始类型就可以直接赋值if(typeof obj[key]!&＃61;&＃61;"object"){//在新对象中添加和原对象中同名的属性newobj[key]&＃61;obj[key];//因为原始类型复制就是复制副本}else{//否则当前属性不是原始类型的值&＃xff0c;再次调用clone函数&＃xff0c;继续复制当前属性值newobj[key]&＃61;clone(obj[key])}}return newobj;
}
var LiMing&＃61;clone(LiMing);

JSON.parse(JSON.stringify(obj));

JSON.stringify() 方法用于将 Javascript 值(通常为对象或数组)转换为 JSON 字符串。
JSON.parse() 方法用于将一个 JSON 字符串转换为对象。

用JSON.stringify把对象转成字符串&＃xff0c;再用JSON.parse把字符串转成新的对象。

建议先看下 JSON.stringify()方法 --> 传送门

var obj1 &＃61; { LiLei: { age: 21 } };var obj2 &＃61; JSON.parse(JSON.stringify(obj1));obj2.LiLei.age &＃61; 25;console.log(obj1);// { LiLei: { age: 21 } }console.log(obj2);// { LiLei: { age: 25 } }console.log(obj1 &＃61;&＃61;&＃61; obj2);// falseconsole.log(obj1.body &＃61;&＃61;&＃61; obj2.body);// false


可以看到克隆出来的对象和原对象除了长的相似&＃xff0c;别的已再无关系。

注: 使用 JSON.stringify()方法时&＃xff0c;undefined、任意的函数以及 symbol 值&＃xff0c;出现在非数组对象的属性值中时会被忽略&＃xff0c;出现在数组中时被转换成 null。函数、undefined 被单独转换时&＃xff0c;会返回 undefined。
请看下边的例子&＃xff1a;

var obj1 &＃61; { LiLei: { age: 21 },isLilei: new RegExp(/\w&＃43;/),money:undefined,speak:function(){console.log(&＃96;I am ${this.sname}&＃96;) },car:["二手奥拓",[&＃39;五菱之光&＃39;],new RegExp(/\w&＃43;/),undefined,function haha(){console.log("hello")}],};var obj2 &＃61; JSON.stringify(obj1);
//{"LiLei":{"age":21},"isLilei":{},"car":["二手奥拓",["五菱之光"],{},null,null]}


从以上结果可知这种方法能正确处理的对象只有 Number, String, Boolean&＃xff0c;即那些能够被 json 直接表示的数据结构。

Object.create()方法

Object.create(proto[, propertiesObject]) 仅靠父对象就可以创建子对象的一个方法。

Object.create(proto[, propertiesObject])
//参数&＃xff1a;
// proto&＃xff1a;新创建对象的原型对象
// propertiesObject&＃xff1a;可选。如果没有指定为 undefined&＃xff0c;则是要添加到新创建对象的不可枚举&＃xff08;默认&＃xff09;属性&＃xff08;即其自身定义的属性&＃xff0c;而不是其原型链上的枚举属性&＃xff09;对象的属性描述符以及相应的属性名称。这些属性对应Object.defineProperties()的第二个参数。
//返回值&＃xff1a;
// 一个新对象&＃xff0c;带着指定的原型对象和属性。


如下代码&＃xff1a;

var obj &＃61; {x: 1,y: {a: 1,b: 0,c: [1, 2, 3]}
};var obj2 &＃61; Object.create(obj);
console.log(obj2 &＃61;&＃61; obj); //false
console.log(obj2);


在输出结果中可以看到&＃xff0c;obj2自己并没有属性&＃xff0c;属性全部都是继承于父对象