实现JS深浅拷贝的五种方式
一、堆栈、基本数据类型、引用数据类型
在了解深浅拷贝之前，我们需得对堆栈、基本数据类型、引用数据类型有基本的了解
基本数据类型：number、string、boolean、null、undefined
引用数据类型：object、function、array
栈内存是保存大小固定的数据，即保存基本数据类型。堆保存的大小不固定，可保存引用数据
二、深浅拷贝理解
浅拷贝：拷贝基本数据类型时，不受任何影响，当拷贝引用类型时，源对象也会被修改。
深拷贝：深拷贝就是完完全全拷贝一份新的对象，它会在内存的堆区域重新开辟空间，修改拷贝对象就不会影响到源对象
即深浅拷贝是针对于引用数据类型
比如下面我们常见的浅拷贝代码，源对象被修改往往不是我们需要的
let a = {
name : '张三',
age : '18'
}
let b = a;
b.name = '李四';
console.log(a);
console.log(b);
结果可见源数据发生了改变
三、实现深拷贝的三种方式
1、es6的展开语法
let a = {
name : '张三',
age : '18'
}
let b = {...a};
b.name = '李四';
console.log('a：',a);
console.log('b：',b);
代码运行：源数据不会发生改变
2、JSON.parse(JSON.stringify(待拷贝对象))
但此拷贝的缺点,即没法拷贝内部函数
let a = {
name : '张三',
age : '18',
like(){
console.log('喜欢唱歌、滑冰');
}
}
let b =JSON.parse( JSON.stringify(a) );
b.name = '李四';
console.log('a：',a);
console.log('b：',b);
结果：在b对象中未出现like函数
3、JS中拷贝Array的slice和concat方法【针对数组】
let origin = [1, 2, 3, 4];
let new_data = origin.slice()
new_data.push(5)
console.log('origin：',origin);
console.log('new_data：',new_data);
代码运行结果：
contact操作类似，在这里就不做过多的演示了。主要讲一下slice和concat方法的弊端，即只能深拷贝第一层，对于多层拷贝无效
let origin = [[1,1], 2, 3, 4];
let new_data = origin.slice()
new_data[0].push(5)
console.log('origin：',origin);
console.log('new_data：',new_data);
4、jQuery 中的 $.extend (添加true就是深拷贝,不添加就是浅拷贝)
let origin = [[1,1], 2, 3, 4];
let new_data = []
$.extend(true,new_data,origin)
new_data[0].push(5)
console.log('origin：',origin);
console.log('new_data：',new_data);
5、手写递归的方式来实现深拷贝
const origin = {
name : '张三',
age : '18',
like(){
console.log('喜欢唱歌、滑冰');
},
a : [[1,1], 2, 3, 4]
}
function extend(origin, deep){
// deep true 启动深拷贝
// false 浅拷贝
let obj = {}
// 数组对象
if(origin instanceof Array){
// true 数组 obj 就得是数组
obj = []
}
for(let key in origin){
let value = origin[key]
// 确定value是不是引用型，前提是deep 是true
obj[key] = (!!deep && typeof value === "object" && value !== null) ? extend(value, deep) : value
}
return obj
}
const new_data = extend(origin, true)
new_data.a[0].push(6666)
console.log(origin)
console.log(new_data)
运行代码：
