深拷贝&浅拷贝
- 1、值类型 & 引用类型
- 2、概念
- 3、深拷贝
- 3.1 递归遍历
- 3.2 JSON.parse(JSON.stringify())
- 3.3 $.extend
- 3.4 _.cloneDeep
- 4、浅拷贝
- 4.1 扩展运算符
- 4.2 Object.assign
1、值类型 & 引用类型
值类型:简单数据类型,基本数据类型,在存储时,变量中存储的是值本身,因此叫做值类型。
引用类型:复杂数据类型,在存储时,变量中存储的仅仅是地址(引用),因此叫做引用数据类型。
在 js 中,值类型有:字符串(String)、数字(Number)、布尔(Boolean)、空(Null)、未定义(Undefined)、Symbol。
引用数据类型:对象(Object)、数组(Array)
2、概念
浅拷贝只是复制了对象的引用地址,两个对象指向同一个内存地址,所以修改其中任意的值,另一个值都会随之变化,这就是浅拷贝。
深拷贝将对象及值复制过来,两个对象修改其中任意的值另一个值不会改变,这就是深拷贝。
const obj1 = {name: 'zhangsan',age: 19,info: {height: '100cm',weight: '30kg',},
};const obj2 = { ...obj1 }; // 浅拷贝
obj2.info.height = '30cm';console.log(obj1.info.height); // 30cm
3、深拷贝
💡 Tips:对象拷贝时,如果 value 存在 引用类型,不想让拷贝对象的修改影响到原对象,需采用深拷贝
3.1 递归遍历
function deepClone(obj) {var objClone = Array.isArray(obj) ? [] : {};if (obj && typeof obj === 'object') {for (key in obj) {if (obj.hasOwnProperty(key)) {if (obj[key] && typeof obj[key] === 'object') {objClone[key] = deepClone(obj[key]);} else {objClone[key] = obj[key];}}}}return objClone;
}
3.2 JSON.parse(JSON.stringify())
💡 Tips:不适用对象 value 存在函数的场景
function deepCloneJson(obj) {let objJson = JSON.stringify(obj);let objClone = JSON.parse(objJson);return objClone;
}
3.3 $.extend
💡 Tips:jquery 中的方法
function deepCloneExtend(arr) {let arrClone = [];arrClone = $.extend(true, [], arr);return arrClone;
}
3.4 _.cloneDeep
💡 Tips:lodash 中的方法
import { cloneDeep } from 'lodash';
const obj1 = {name: 'zhangsan',age: 19,info: {height: '100cm',weight: '30kg',},
};
const obj2 = cloneDeep(obj1);
4、浅拷贝
💡 Tips:对象拷贝时,如果 value 不存在 引用类型,可以采用浅拷贝
4.1 扩展运算符
const obj1 = {name: 'zhangsan',age: 19,
};
const obj2 = { ...obj1 };
4.2 Object.assign
const obj1 = {name: 'zhangsan',age: 19,
};
const obj2 = Object.assign({}, obj1);