深拷贝--- 浅拷贝 理解

在js 的 数据类型 分为 基本类型和引用类型, 基本类型的 值存放在 栈内存中 ,  引用类型的 值存放在堆内存中,栈内存存放的是 引用类型的 地址, 这就涉及到一个问题, 当两个变量都同时指向同一个地址的时候,其中一个变量改变操作改变堆内存中的值,l另一个变量对象的值也会跟着改变,(这是非常不可控的操作);
1. 浅拷贝:  定义就不写了,  只要理解:  复制的后的数据改变 都能影响前一个数据的值,  都是浅拷贝, 如下例子

const originObj = {a:1};
const cloneObj1 =  originObj;
const cloneObj2 = {...originObj};
const cloneObj3 = object.assign({}, originObj);
这些统统是浅拷贝

上面也可以得出   浅拷贝的方法  扩展运算符  (...) , object.assign 

2.深拷贝  
①  JSON.parse(JSON.stringify(obj)) ,大多数业务场景  其都可以满足, 但它有以下局限:
会忽略 undefined  以及 symbol  ,不能序列化函数  ,不能解决循环引用的问题 。
② 自己实现一个简单的深拷贝,如下 : 

function  deepClone (target){
    function isObject (o){
  return (typeof o === 'object'|| typeof o === 'function')&& o !== null
}
if (!isObject(target)){
    throw new Error( `${target}非对象`);
}
 
 const  newObj = Array.isArray( target)? [] : {}; 
     Reflect.ownKeys(target).forEach(key=>{
        newObj[key] =  isObject(target[key]) ?         deepClone(target[key]): target[key];
});
   return  newObj 

}

var obj = {a:1} ;
var newItem = deepClone(obj);
    newItem.a = 2 ;
console.log(newItem); // {a:2}
console.log(obj);  // {a:1}





③   实际上实现一个 标准的深拷贝库要考虑 的内容非常多, 例如 原型链处理  , DOM处理, 时间函数  等等,  
所以生产上 更建议大家使用  lodash 库里面的深拷贝函数 cloneDeep
 
        
 
 
 

你可能感兴趣的:(js)