JavaScript数据深浅拷贝的深度解析(一文明白!)-一一网

涉及到知识点:JavaScript数据类型,JavaScript的数据存储方式(堆栈);

首先我们要理解什么是深浅拷贝?

深浅拷贝是JavaScript对数据的操作,但是深浅拷贝是相对于JavaScript的数据类型来说的,在JavaScript中基本数据类型是没有深浅拷贝之分的,深浅拷贝只是说对于JavaScript的复杂数据类型(引用数据类型来说的);

基本数据类型都是存储在栈区的,而深浅拷贝也是操作的栈区(只不过基本数据类型操作的值,而引用数据类型操作的是内存地址),所以基本数据类型不存在深浅拷贝之分;

引用数据类型的深浅拷贝是什么?

引用数据类型的深浅拷贝区别在于,浅拷贝是把存储在栈区里面的堆区内存地址直接复制给一个变量(因此只要指向这个地址的变量里面的数据都是联动的),而深拷贝是把当前存储在栈区的堆区内存地址进行访问且在堆区在划分一块区域进行存储访问过来的数据;

理解了深浅拷贝的概念,接下来采用代码进行实现

//经过测试的代码
//对基础数据类型进行拷贝,基本数据类型不存在深浅拷贝之分
//基本数据类型有:String,Number,Boolean,null,undefined
var a=1;
var b=a;
a=3;
console.log(a,b) //3,1
复制代码

引用数据类型的浅拷贝

//浅拷贝
var a={};
var b=a;
a.name='王菜菜';
console.log(a,b) //{ name: "王菜菜" },{ name: "王菜菜" }
复制代码

//Object.assign(a)第一个参数不传递空对象的话就是浅拷贝,传了就是深拷贝,将会在下面讲到
var a={
name:1,
arr:[1,2,3,4]
};
var b=Object.assign(a);
a.name='王菜菜';
a.arr='之前是数组';
console.log(a,b);
//{name: "王菜菜", arr: "之前是数组"} {name: "王菜菜", arr: "之前是数组"}

复制代码

//通过for in 方法进行浅拷贝
var a={
name:'前端',
arr:{age:22}
};
function CopyObj(obj) {
    // 判断是不是数组
   let _obj = Array.isArray(obj) ? [] : {};
   for (let i in obj) {
   _obj[i] = obj[i];
  }
   return obj;
}
var b=CopyObj(a);
a.name='王菜菜';
a.arr.age='年龄';
console.log(a,b);
复制代码

引用数据的深拷贝

//对象赋值的方式实现深拷贝
var a={
name:'前端'
};
var b={
name:a.name
};
a.name='王菜菜';
console.log(a,b)
复制代码

//通过json的方法进行深拷贝,但是无法实现对象中方法的深拷贝
//原因:undefined,function,symbol 会在转换json的过程中被忽略掉;
var a={
name:'前端',
fn:function(){
console.log('2021加油!!!');
}
};

function CopyObj(obj) {
  let _obj = JSON.stringify(obj);
  return JSON.parse(_obj);
}
 let b = CopyObj(a);

a.name='王菜菜';
console.log('当前数据',d,a); //{ name: "前端" },{ name: "王菜菜", fn: ƒ}
复制代码

// 网上找的:Object.assign()方法实现深拷贝,但是也划分深浅拷贝,对象只有一级时为深拷贝,
//二级之后就是浅拷贝;
var a={
name:'前端',
arr:{age:22}
};
var b=Object.assign({},a);
a.name='王菜菜';
a.arr.age='年龄';
console.log(a,b);
//数据联动是浅拷贝,数据不联动是深拷贝
//{name: "王菜菜", arr: "{age:'年龄'}"} {name: "前端", arr: "{age:'年龄'}"}

复制代码

var a={
name:'前端',
arr:{age:22}
};

var b={...a}; //这样只能拷贝一第一次,但是...扩展运算符可以进行展开继续拷贝;
var b={...a,arr:{...a.arr}};//深拷贝,只拷贝2层的深拷贝;
a.name='王菜菜';
a.arr.age='年龄';
console.log(a,b);
//{name: "王菜菜",arr: {age: "年龄"}},{arr: {name: "前端",age: "年龄"}}
复制代码