Fork me on GitHub

JS实现对象的深克隆

基本介绍

  • JavaScript中数据类型分为基本数据类型(number, string, boolean, null, undefined)和引用类型(对象, 数组, 函数),这两类对象在复制克隆的时候是有很大区别的。
基本数据类型
  • 基本数据类型存储的是对象的实际数据,其值存放在栈内存中。
引用数据类型
  • 引用数据类型值指保存在堆内存中的对象。也就是,变量中保存在栈内存的实际上的只是一个指针,这个指针指向内存中的另一个位置(堆内存),该位置保存着对象。访问方式是按引用访问
  • 于是克隆也会分为两类:

    浅度克隆
  • 基本数据类型值传递, 引用类型仍为引用传递

  • 对于基本类型,浅复制是对值的复制,对于引用类型来说,浅复制是对对象地址的复制,并没有开辟新的栈,也就是复制的结果是两个对象指向同一个地址,修改其中一个对象的属性,则另一个对象的属性也会改变。
深度克隆
  • 所有元素或属性均完全复制, 与原对象完全脱离, 也就是说所有对于新对象的修改都不会反映到原对象中
  • 深复制则是开辟新的栈,两个对象对应两个不同的地址,修改一个对象的属性,不会改变另一个对象的属性。
    • 函数的克隆通过浅克隆即可实现。原因就是函数的克隆会在内存单独开辟一块空间,互不影响。
    • 数组和对象需要深克隆

深克隆的实现

通过递归解析解决
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
var china = {
nation : '中国',
birthplaces:['北京','上海','广州'],
skincolor :'yellow',
friends:['sk','ls']
}
//深复制,要想达到深复制就需要用递归
function deepCopy(o, c){
var c = c || {};
for(var i in o){
if(typeof o[i] === 'object'){
//要考虑深复制问题了
if(o[i].constructor === Array){
//这是数组
c[i] =[];
}else{
//这是对象
c[i] = {};
}
deepCopy(o[i],c[i]); // 递归调用
}else{
c[i] = o[i];
}
}
return c;
}
var result = { name:'result' };
result = deepCopy(china, result);
console.dir(result);
通过JSON解析解决
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var test ={
name:{
xing:{
first:'张',
second:'李'
},
ming:'老头'
},
age :40,
friend :['隔壁老王','宋经纪','同事']
}
var result = JSON.parse(JSON.stringify(test));
result.age = 30;
result.name.xing.first = '往';
result.friend.push('fdagldf;ghad');
console.dir(test);
console.dir(result);
es6之展开Object.assign
  • 拷贝对象的内容到一个新的堆内存,copyObj存储新内存的引用。
1
2
3
4
5
6
7
let obj = {name:'fiona-SUN'};

let copyObj = Object.assign({}, obj);

copyObj.name = 'fiona';
console.log(copyObj.name); // 'fiona'
console.log(obj.name); // 'fiona-SUN'
es6之展开运算符
1
2
3
4
5
let arr = [1,2,3];
let copyArr = [...obj];
copyArr[2] = 0;
console.log(copyArr[2]); // 0
console.log(arr[2]); // 2
------ 本文结束 ------