进阶路线
image.png
需要知道的就是一点：JavaScript的数据类型分为基本数据类型和引用数据类型。对于基本数据类型的拷贝，并没有深浅拷贝的区别，我们所说的深浅拷贝都是对于引用数据类型而言的。
5.1浅拷贝
浅拷贝的意思就是只复制引用，而未复制真正的值。
浅拷贝的实现
function Clone(source){
const targetObj = source.constructor === Array ? [] : {}; // 判断复制的目标是数组还是对象
for(let keys in source){ // 遍历目标
if(source.hasOwnProperty(keys)){
targetObj[keys] = source[keys];
}
}
return targetObj;
}
5.2 深拷贝
深拷贝就是对目标的完全拷贝，不像浅拷贝那样只是复制了一层引用，就连值也都复制了。
只要进行了深拷贝，它们老死不相往来，谁也不会影响谁。
目前实现深拷贝的方法不多，主要是两种：
1、利用 JSON 对象中的 parse 和 stringify
2、利用递归来实现每一层都重新创建对象并赋值
5.2.1 JSON.stringify/parse的方法
- JSON.stringify 是将一个 JavaScript 值转成一个 JSON 字符串。
- JSON.parse是将一个 JavaScript 值转成一个 JSON 字符串。
const originArray = [1,2,3,4,5];
const cloneArray = JSON.parse(JSON.stringify(originArray));
console.log(cloneArray === originArray); // false
确实是深拷贝，也很方便。但是，这个方法只能适用于一些简单的情况。比如下面这样的一个对象就不适用,undefined、function、symbol 会在转换过程中被忽略。
const originObj = {
name:'axuebin',
sayHello:function(){
console.log('Hello World');
}
}
console.log(originObj); // {name: "axuebin", sayHello: ƒ}
const cloneObj = JSON.parse(JSON.stringify(originObj));
console.log(cloneObj); // {name: "axuebin"}
5.2.2 递归深拷贝
递归的思想就很简单了，就是对每一层的数据都实现一次 创建对象->对象赋值 的操作，简单粗暴上代码：
function CloneDeep(source){
// 判断复制的目标书数组还是对象
var targetObj = source.constructor === Array ? [] : {};
for(let keys in source){
//判断对象是否包含特定的自身（非继承）属性。
if(source.hasOwnProperty(keys)){
//判断是否是对象或者数组
if(source[keys] && typeof source[keys] === "object"){
targetObj = source.constructor === Array ? [] : {};
targetObj[keys] = CloneDeep(source[keys]);// 递归调用
}else{
targetObj[keys] = source[keys];
}
}
}
return targetObj;
}
一个简单的深拷贝就完成了，但是这个实现还存在很多问题。
- 没有对传入参数进行校验，传入 null 时应该返回 null 而不是 {}
- 对于对象的判断逻辑不严谨，因为 typeof null === 'object'
该进之后的写法
// 判断是否为对象
function isObject(obj){
return typeof obj === 'object' && obj != null
}
function CloneDeep(source){
// 判断复制的目标书数组还是对象
if(!isObject(source)) return source;
var targetObj = source.constructor === Array ? [] : {};
for(let keys in source){
//判断对象是否包含特定的自身（非继承）属性。
if(source.hasOwnProperty(keys)){
//判断是否是对象或者数组
if(source[keys] && isObject(source[keys])){
targetObj = source.constructor === Array ? [] : {};
targetObj[keys] = CloneDeep(source[keys]);// 递归调用
}else{
targetObj[keys] = source[keys];
}
}
}
return targetObj;
}
循环引用问题
以下这种情况会造成死循环 导致栈溢出
const obj1 = {
x: 1,
y: 2
};
obj1.z = obj1;
const obj2 = CloneDeep(obj1); \\栈溢出
解决办法
解决方案很简单，其实就是循环检测，我们设置一个数组或者哈希表存储已拷贝过的对象，当检测到当前对象已存在于哈希表中时，取出该值并返回即可
// 判断是否为对象
function isObject(obj){
return typeof obj === 'object' && obj != null
}
function CloneDeep(source,hash = new WeakMap()){
// 判断复制的目标书数组还是对象
if(!isObject(source)) return source;
if (hash.has(source)) return hash.get(source); // 新增代码，查哈希表
var targetObj = source.constructor === Array ? [] : {};
hash.set(source, targetObj ); // 新增代码，哈希表设值
for(let keys in source){
//判断对象是否包含特定的自身（非继承）属性。
if(source.hasOwnProperty(keys)){
//判断是否是对象或者数组
if(source[keys] && isObject(source[keys])){
targetObj = source.constructor === Array ? [] : {};
targetObj[keys] = CloneDeep(source[keys]);// 递归调用
}else{
targetObj[keys] = source[keys];
}
}
}
return targetObj;
}
破解递归爆栈
function cloneDeep(x) {
const root = {};
// 栈
const loopList = [
{
parent: root,
key: undefined,
data: x,
}
];
while(loopList.length) {
// 广度优先
const node = loopList.pop();
const parent = node.parent;
const key = node.key;
const data = node.data;
// 初始化赋值目标，key为undefined则拷贝到父元素，否则拷贝到子元素
let res = parent;
if (typeof key !== 'undefined') {
res = parent[key] = {};
}
for(let k in data) {
if (data.hasOwnProperty(k)) {
if (typeof data[k] === 'object') {
// 下一次循环
loopList.push({
parent: res,
key: k,
data: data[k],
});
} else {
res[k] = data[k];
}
}
}
}
return root;
}
