JS深浅拷贝

JS存储方式

JS中存在基本数据类型和引用数据类型
1.基本数据类型：number，string，boolean，null，undefined，Symbol，bigInt
2.引用数据类型：对象(引用类型)([]，{}，日期，函数等等)
基本数据类型直接把数值存储在栈内存中。
引用数据类型把引用地址存放在栈内存中，该地址指向的是堆内存中存储的实际的数据。
浅拷贝：只拷贝栈
深拷贝：对于栈中存放的引用数据类型的地址，在堆中新建内存来拷贝这些引用数据类型
数组和对象这种引用数据类型，浅拷贝后指向的还是同一个地址

基本类型的复制

var a = 1;
var b = a;//复制
console.log(a)//1
console.log(b)//1
a = 2;//改变a的值
console.log(a)//2
console.log(b)//1

声明简单数据类型b时会在栈内存中新开辟一个地址，其中存储b的值，和a的值互相不干扰，修改也不会影响a

引用类型的复制

var a= [1,2];
var b= a;//复制
console.log(a)//[1,2]
console.log(b)//[1,2]
a.push(3);//改变a的值
console.log(a)//[1,2,3]
console.log(b)//[1,2,3]

声明复杂数据类型b时也会在栈内存中新开辟一个地址，其中存储的是一个引用地址。在上述代码中是修改a引用地址中数据的值，而b指向的是同一个地址，因此b也会受影响(b中存储的地址无影响，地址所指向的堆内存中存储的数据被修改了)
因此对于引用类型的复制，简单赋值并不能获得我们想要的效果，这时候就需要深浅拷贝了

深浅拷贝

浅拷贝
　　浅拷贝只是拷贝基本类型的数据，如果父对象的属性等于数组或另一个对象，那么实际上，子对象获得的只是一个内存地址，因此存在父对象被篡改的可能，浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存

//详细案例
var Person={
　　name:'张三'
}
function fadeCopy(obj){
　　var temp={};
　　for(let i in obj)
　　　　temp[i]=obj[i];
　　return temp;
}
var teacher=fadeCopy(Person);
teacher.career = '老师';
teacher.name = '李四';
console.log(teacher.career);//老师
console.log(teacher.name);//李四
console.log(Person.name);//张三
console.log(teacher.__proto_ === Person.__proto_);// true

深拷贝
　　深拷贝就是能够实现真正意义上的数组和对象的拷贝。递归调用"浅拷贝"。（深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象）

function deepClone(obj){
    //先判断是不是正则和日期
    if(obj instanceof RegExp)
        return new RegExp(obj);
    if(obj instanceof Date)
        return new Date(obj);

    //不直接创建空对象：克隆的结果和之前保持相同的所属类
    let newObj = obj.constructor;
    //判断是不是引用类型和null(typeof null === “object”但却是简单数据类型)
    if(obj && typeof obj === "object"){//判断null
        for(let key in obj){
            //如果value是引用类型则继续深拷贝
            if(obj[key]&&typeof obj[key]==='object')
                //值是对象则递归
                newObj [key] = deepClone(obj[key]);
            else
                newObj [key] = obj[key];
        }
    }
    return newObj;
}

浅拷贝常用方法：

var obj = {
    a: 1,
    b: [1, 2, 3],
    c: {x: 10},
};
//1.原型式继承
function fadecopy(a) {
    function fn() {
        fn.prototype = a;
    }
    return new fn()
}
var obj1 = fadecopy(obj);
//2.ES5中提供的create规范化原型式继承
var obj2 = Object.create(obj);
//3.ES6中提供的合并对象方法
var obj3 = Object.assign({}, obj);
//4....展开运算符
var obj4 = {...obj};

深拷贝常用方法
1.JSON.parse(JSON.stringfy(object))//对象转成字符串(序列化)，然后转成js对象(反序列化)

let deepA = {
    age: 1,
    jobs: {
        first: 'FE'
    }
};
let deepB = JSON.parse(JSON.stringify(deepA));
deepA.jobs.first = 'Ali';
console.log(deepA.jobs);//Ali
console.log(deepB.jobs);//FE

这种方法是利用JSON序列化和反序列化方法将内容完全展开，但是它仍有局限性：
1.会忽略 undefined
2.会忽略 symbol
3.会忽略函数
4.不能解决循环引用的对象(obj.a = obj.b obj.c.d = obj.a等)

2.使用lodash的deepClone()
lodash库中的deepClone函数。

最后编辑于：2020.09.21 23:32:56