前言
本文是整理的浅拷贝和深拷贝中涉及的知识点，在工作中是非常重要的，在面试中也是必考的，希望对小伙伴们有所帮助！
为什么会产生深浅拷贝？
首先我们要知道一个流程
1，对象属于引用类型的，以后浏览器会为其开辟一个新的内存空间，并为它分配一个16进制的地址
2，按照一定的顺序，把对象的键值对存储到内存空间
3，把开辟的内存地址赋值给变量(或事件)，以后变量就通过地址找到内存空间，然后进行操作
基本数据类型和引用数据类型
数据分为基本数据类型和引用数据类型
基本数据类型
String、Number、Boolean、Null、Undefined、Symbol基本数据类型是直接存储在栈中的数据
let str1 = '123';
str2 = str1;
str2 = '456';
console.log(str1); // '123'
console.log(str2); // '456'形象举例：
我之前买了一双鞋子，我现在又买了一双，某一双坏了不会影响到另外一双
引用数据类型
Array、Object引用数据类型存储的是该对象在栈中引用，真实的数据存储在内存中
let arr1 =[1,2,3,4,5,6];
arr2 = arr1;
arr2.pop();
console.log(arr1);//[ 1, 2, 3, 4, 5 ]
console.log(arr2);//[ 1, 2, 3, 4, 5 ]形象举例：
在大草原上，有一些羊吃了腐烂的草得病死了。草原还是草原，但是内部的草变少了；羊群还是羊群，但是内部的羊变少了
深拷贝和浅拷贝的概念
浅拷贝：
仅仅复制对象的引用，而不是对象本身
深拷贝：
把复制的对象所引用的全部对象都复制一遍
深拷贝和浅拷贝的区别
| ~ | 和原数据是否指向同一对象 | 第一层数据为基本数据类型 | 原数据中包含子对象 |
|---|---|---|---|
| 赋值 | 是 | 改变会使数据一同改变 | 改变会使原数据一同改变 |
| 浅拷贝 | 否 | 改变不会使原数据一同改变 | 改变会使数据一同改变 |
| 深拷贝 | 否 | 改变不会使原数据一同改变 | 改变不会使原数据一同改变 |
浅拷贝
通用循环
const arr1 = [1, 2, ['ming', 'abc'], 5];
const shallowClone = (arr) => {
const dst = [];
for (let prop in arr) {
if (arr.hasOwnProperty(prop)) {
dst[prop] = arr[prop];
}
}
return dst;
}
const arr2 = shallowClone(arr1);
arr2[2].push('wuhan');
arr2[3] = 5;
console.log(arr1);
console.log(arr2);运行结果：
object.assign()
- Object.assign()方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象，然后返回目标对象
- Object.assign()进行的是浅拷贝，拷贝的是对象的属性的引用，而不是对象本身
const obj1 = {
username:'ming',
skill:{
play:['backetball','game'],
rend: 'book',
},
girlfriends:['xiaomi','xiaohong','xiaolan'],
};
const obj2 = Object.assign({},obj1);
obj2.username = 'memg';//修改基本类型
obj2.skill.read = 'e-mail';//修改二层基本类型
obj2.skill.play = ['footbool'];//修改二层引用类型
obj2.girlfriend = ['xiaoming'];
console.log(obj1);
console.log(obj2);运行结果：
Array.prototype.concat()
concat()是数组的一个内置方法，用户合并两个或者多个数组
这个方法不会改变现有数组，而是返回一个新数组
const arr1 = [1,{username: 'ming',},];
let arr2 = arr1.concat();
arr1[0] = 2;
arr1[1].username = 'meng';
console.log(arr1);
console.log(arr2);运行结果：
Array.prototype.slice()
slice()也是数组的一个内置方法，该方法会返回一个新的对象
slice()不会改变原数组
const arr1 = [1,{username:'ming',},];
let arr2 = arr1.slice();
arr2[0] = 2;
arr2[1].username = 'meng'
console.log(arr1);
console.log(arr2); 运行结果：
obj展开运算符
展开运算符是ES6中新提出来的一种运算符
在拷贝数组、对象以及拼接数组等方面都可以使用
这步我们也可以尝试下使用const obj2 = {...obj1}的形式进行浅拷贝
//拷贝数组
const arr1 = [1, 2, 3];
const arr2 = [...arr1]; // like arr.slice()
arr2.push(8);
console.log(arr1); // [ 1, 2, 3 ]
console.log(arr2); // [ 1, 2, 3, 8 ]
//拷贝对象
const obj1 = {
name: 'ming',
arr1: ['9', '7', '6'],
obj: {
name: 'meng',
arr2: ['7', '8', '9'],
},
};
const obj2 = {...obj1};// like arr.slice()
obj2.name = 'ming2';
obj2.arr1 = ['null'];
obj2.obj.name = 'meng2';
obj2.obj.arr2 = ['null'];
console.log(obj1);
console.log(obj2);运行结果：
深拷贝
手动递归
function deepClone (sourceObj, targetObj) {
let cloneObj = targetObj || {}
if(!sourceObj || typeof sourceObj !== "object" || sourceObj.length === undefined){
return sourceObj
}
if(sourceObj instanceof Array){
cloneObj = sourceObj.concat()
} else {
for(let i in sourceObj){
if (typeof sourceObj[i] === 'object') {
cloneObj[i] = deepClone(sourceObj[i], {})
} else {
cloneObj[i] = sourceObj[i]
}
}
}
return cloneObj
}
let sourceObj = {
a: 1,
b: {
a: 1
},
c: {
a: 1,
b: {
a: 1
}
},
d: function() {
console.log('hello world')
},
e: [1, 2, 3]
}
let targetObj = deepClone(sourceObj, {})
targetObj.c.b.a = 9
console.log(sourceObj)
console.log(targetObj)运行结果：
Json.parse(Json.Stringify())
JSON.stringify():把一个js对象序列化为一个JSON字符串
JSON.parse():把JSON字符串反序列化为一个js对象
const arr9 = [
1,
{
username:'ming',
},
];
let arr10 = JSON.parse(JSON.stringify(arr9));
arr10[0]=2;
arr10[1].username='meng';
console.log(arr9);
console.log(arr10);运行结果：
let obj = {
name: 'ming',
age: 20,
friend: {
name: 'ming1',
age: 19
}
};
let copyObj = JSON.parse(JSON.stringify(obj));
obj.name = 'meng';
obj.friend.name = 'meng1';
console.log(obj);
console.log(copyObj);运行结果：
函数库Lodash
Lodash作为JavaScript函数库/工具库，它里面有非常好用的封装好的功能
var _= require('lodash');
const obj1 = [
1,
'Hello!',
{ name:'ming1' },
[
{
name:'meng1',
}
],
]
const obj2 = _.cloneDeep(obj1);
obj2[0] = 2;
obj2[1] = 'Hi!';
obj2[2].name = 'ming2'
obj2[3][0].name = 'meng2';
console.log(obj1);
console.log(obj2);运行结果：
最后
如果本文对你有帮助得话，给本文点个赞❤️❤️❤️
欢迎大家加入，一起学习前端，共同进步！
