面试遇到的坑JS深拷贝和浅拷贝

来源：cnblogs　　作者：一杯咖啡钱　　时间：2021/5/24 10:52:31　　对本文有异议

首先要搞明白深拷贝和钱拷贝的区别要先搞明白栈和堆的区别

一、栈

　　栈存储基础数据类型，如： String、Number、Boolean、Null、Underined，这些简单的基础数据类型能够直接存储在栈中。栈如果没有被使用就会被回收

二、堆

　　堆存储引用数据类型的是 Function、Array、Object，在栈内存中存储着指向堆的地址和C语言的指针有点像，基本类型在当前执行环境结束时销毁，而引用类型不会随执行环境结束而销毁，只有当所有引用它的变量不存在时这个对象才被垃圾回收机制回收。

三、深拷贝和浅拷贝

function copy(obj){
            let result = {}
            for(var key in obj){
                result[key]=obj[key];
            }
            return result
        }
        var oldObj = {name: 'Tom', age: 18, colors:['blue','pink']}
        var newObj = copy(oldObj)

上面这个代码 oldObj有两个基本属性 name、age 一个引用数据属性colors，但newObj拷贝后 name，age属性会被正常的拷贝，而colors属性，只会进行引用拷贝，这样会导致oldObj和newObj共用一个colors属性.这样就是所谓的浅拷贝。

const oldObj = {
                name: '张三',
                age: 20,
                colors: ['yellow','orange']
            }
            
            function deepClone(obj){
                 if (typeof obj !== 'object' || obj == null){
                     return obj;
                 }
                 let result;
                 if (obj instanceof Array){
                     result = []
                 } else {
                     result = {}
                 } 
                 for(var key in obj) {
                     if (obj.hasOwnProperty(key)){
                         result[key] = deepClone(obj[key]);
                     }
                     
                 }
                 return result;
            }
            
            const newObj = deepClone(oldObj);
            newObj.name = '李四';
            newObj.colors[0] = 'pink';
            console.log(oldObj)
            console.log(newObj)