JS数据类型分为基本数据类型和引用数据类型,基本数据类型保存的是值,引用类型保存的是引用地址(this指针)。浅拷贝共用一个引用地址,深拷贝会创建新的内存地址。
浅拷贝:只拷贝第一级属性,如果某个属性又是一个内嵌的子对象,不会进入子对象中拷贝子对象的内容
深拷贝:即可用第一级属性,如果某个属性又是一个内嵌的子对象,深拷贝会进入子对象中,继续拷贝内嵌子对象及其内容
浅拷贝方法
深拷贝
基本数据类型:string、 number、boolean、undefined、null
引用数据类型:Object、Array、Function
一.浅拷贝
let a = [0,1,2,3,4];
b = a;
console.log(a === b);
a[0] = 1;
console.log(a, b)
var obj1 = {
a: 1, b: 2}
var obj2 = {
...obj1}
obj2.a = 4
console.log(obj1, obj2)
Object.assign() 方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象,然后返回目标对象。
注意点!严格来说,Object.assign() 既不是深拷贝,也不是浅拷贝——而是第一级属性深拷贝,第一级以下的级别属性浅拷贝。
let obj1 = {
a: {
b: 1},
c: 2
}
let obj2 = Object.assign({
},obj1)
obj2.a.b = 3; //第二层,obj1变了,是浅拷贝
obj2.c = 3; //第一层,obj1不变,是深拷贝
console.log(obj1);
console.log(obj2);
JSON.stringify把对象转成字符串,再用JSON.parse把字符串转成新的对象
缺点:当值为undefined、function、symbol 会在转换过程中被忽略
function deepClone(obj) {
let _obj = JSON.stringify(obj);
let objClone = JSON.parse(_obj);
return objClone;
}
let a = [0, 1, [2, 3], 4]
let b = deepClone(a)
a[0] = 1
a[2][0] = 1
console.log(a) // [1,1,[1,3],4]
console.log(b) // [0,1,[2,3],4]
function deepClone(oldObj) {
if (oldObj==null) {
return null;
}
if (typeof oldObj !=="object") {
return oldObj;
}
var newObj = Array.isArray(oldObj)?[]:{
};
for (var key in oldObj) {
newObj[key] = deepClone(oldObj[key]);
}
return newObj;
}
let a1 = 10;
let arr1 = [1, 2, 3];
let lilei = {
sname:"Li Lei",
sage:11,
address:{
city:"北京",
street:"万寿路"
}
}
let a2 = deepClone(a1);
console.log(a2);
let arr2 = deepClone(arr1);
console.log(arr2);
console.log(arr1 == arr2);
var lilei1 = deepClone(lilei);
console.log(lilei1);
console.log(lilei == lilei1); //false
console.log(lilei.address == lilei1.address); //false
var obj = {
a:{
name:"kaiqin",age:19}};
var obj1 = {
b:{
name:"wang",age:19}};
var obj2 = $.extend(true,{
},obj,obj1); //true为深拷贝,false为浅拷贝,默认为false
obj2.a.name="zhang";
console.log(obj2)
//{a: {name: "zhang", age: 19},b: {name: "wang", age: 19}}
console.log(obj)
//{
{a:{name:"kaiqin",age:19}}}