深拷贝和浅拷贝JavaScript

2022-09-13 12:14:38

深拷贝和浅拷贝

假设B复制了A，当修改A时，看B是否会发生变化。如果B变化了，那么就是浅拷贝；如果B没有变化，则是深拷贝。

js数据类型

JavaScript的数据类型分为两种：原始类型（即基本数据类型）和对象类型（即引用数据类型）；

js常用的基本数据类型包括undefined、null、number、boolean、string；
js的引用数据类型也就是对象类型Object，比如：Object、array、function、data等；

基本数据类型

基本数据类型是按值访问的，存放在栈中。就是说我们可以操作保存在变量中的实际的值；基本数据类型的值是不可变的，任何方法都无法改变一个基本数据类型的值，所以基本数据类型不存在深浅拷贝。
栈内存（stack）：会自动分配的内存空间，它由系统自动释放。

引用数据类型

引用数据类型也叫对象数据类型，包括function,object,array,date等可以可以使用new创建的数据，又叫对象类型，它在栈内存中仅仅存储了一个引用，而真正的数据存储在堆内存中。
堆内存（heap）：动态分配的内存及大小，不一定会自动释放。
特点：

引用类型的值可以改变，可以添加属性和方法。
引用数据类型的赋值是对象引用，引用类型的比较是引用的比较
引用类型是同时保存在栈区中和堆区中的，引用类型的存储需要在内存的栈区和堆区*同完成，栈区保存变量标识符和指向堆内存的地址。

实现浅拷贝

 function clone(obj) {
        var cloneObj = {};
        for(var key of Object.keys(obj)) {
            cloneObj[key] = obj[key];
        }
        return cloneObj;
    }

实现原理：创建一个拷贝的方法 clone()，通过遍历传入对象的键名及键值，然后赋值给一个空对象，这样就完成了对原对象的浅拷贝。浅拷贝只复制了原对象中最外层的属性，也就是拷贝了其基本类型的数据，而对于引用类型数据而言，它仅复制了其引用，指向的地址还是原对象的地址。

实现深拷贝

注：通过对浅拷贝的认识，如果我们要实现对更深层级的数据不仅是单纯的引用，则需要对原对象内所有的属性值进行遍历递归，这就是我们的深拷贝了。

一层对象

直接遍历

function copy (obj) {
   let newObj = {};
     for (let item in obj ){
       newObj[item] = obj
     }
     return newObj;
     }

Object.assgin

var obj = {
  name: '彭湖湾',
  job: '学生'
}
var copyObj = Object.assign({}, obj);

Object.assign：用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target），并返回合并后的target。

ES6扩展运算符

var obj = {
 
    name: '王嘉尔 ',
 
    job: '歌手'
 
}
 
var copyObj = { ...obj }

扩展运算符（…）用于取出参数对象的所有可遍历属性，拷贝到当前对象之中。

多层对象

递归实现

  function copy(obj){
        let newobj = null;   //声明一个变量用来储存拷贝之后的内容
        
     //判断数据类型是否是复杂类型，如果是则调用自己，再次循环，如果不是，直接赋值即可，
     //由于null不可以循环但类型又是object，所以这个需要对null进行判断
        if(typeof(obj) == 'object' && obj !== null){ 
        
	//声明一个变量用以储存拷贝出来的值,根据参数的具体数据类型声明不同的类型来储存
            newobj = obj instanceof Array? [] : {};   
            
	//循环obj 中的每一项，如果里面还有复杂数据类型，则直接利用递归再次调用copy函数
            for(var i in obj){  
                newobj[i] = copy(obj[i])
            }
        }else{
            newobj = obj
        }    
      return newobj;    //函数必须有返回值，否则结构为undefined
   }

内置对象JSON

 function JSONClone(obj) {
            return JSON.parse(JSON.stringify(obj))
        }

parse用于从一个字符串中解析出json对象。（字符串单引号写在{}外，每个属性名都必须用双引号，否则会抛出异常）
stringify()用于从一个对象解析出字符串。
注意：只有可以转成JSON格式的对象才可以这样用，像function没办法转成JSON。

码农公寓