JavaScript深拷贝与浅拷贝

客官°小女子只卖身不卖艺 2023-01-06 11:42 118阅读 0赞

# 浅拷贝 #

## 定义 ##

浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。基本类型拷贝的是值，而引用类型拷贝的是地址,且只能拷贝一层对象，假如存在对象的嵌套，那么浅拷贝就无能为力。

## 浅拷贝方法 ##

1.  object.assign
2.  扩展运算符let cloneObj = \{…obj\}
3.  concat运算符
4.  slice拷贝数组
5.  手工实现

**方法一：object.assign**  
可以理解为Object.assign循环遍历原对象的属性，通过复制的方式将其赋值给目标对象的相应属性，拷贝的是对象的属性的引用，而不是对象本身  
**语法：**

> Object.assign(target,sources)

**示例代码**：

但是使用object.assign方法有几点需要注意：

*  它不会拷贝对象的继承属性
 *  它不会拷贝对象的不可枚举的属性
 *  可以拷贝Symbol类型的属性

**方法二：扩展运算符**  
**语法：**

> let cloneObj =\{…obj\};

**示例代码**

/*对象的拷贝*/
    let obj = { a:1,b:{ c:1}};
    let obj2 = { ...obj};
    obj.a = 2;
    console.log(obj);  //{a:2,b:{c:1}}
    obj.b.c = 2;
    console.log(obj); //{a:2,b:{c:1}}

**方法三：concat拷贝数组**  
仅针对数组类型

let arr2 = [1,2,3,4];
    let newArr2 = arr2.concat();
    newArr[1] = 100;
    console.log(arr);  //[1,2,3]
    console.log(newArr);   //[1,100,3]

**方法四：slice拷贝数组**  
仅针对数组类型

let arr=[1,2,{ val:4}];
    let newArr=arr.slice();
    newArr[2].val = 1000;
    console.log(arr);

**手工实现**  
**思路：**

*  对基础类型做最基础的拷贝
 *  对引用类型开辟一个新的存储，并且拷贝一层对象属性

# 深拷贝 #

浅拷贝只是创建了一个新的对象，复制了原有对象的基本类型的值，，而引用类型只拷贝了一层属性，再深就无法拷贝，但深拷贝是在堆内存中完全开辟了一块内存地址，并将原有的对象复制过来存放，且新对象的修改不会改变原来的对象。  
**方法一：JSON.stringfy**  
把一个对象序列化成JSON的字符串，并将对象里的内容转换成字符串，最后再用JSON.parse()将JSON字符串生成一个新的对象  
**示例代码**

但是这只能应付普通的深拷贝，还有以下缺陷：

*  函数、undefined、symbol不能拷贝
 *  拷贝date类型会变成字符串
 *  无法拷贝原型链
 *  拷贝正则会变成空对象
 *  对象中含有NaN，Infinity，JSON会转化成null
 *  无法拷贝对象的循环应用

**手写递归实现**

onst isComplexDataType = obj => (typeof obj === 'object' || typeof obj === 'function') && (obj !== null)
    const deepClone = function (obj, hash = new WeakMap()) { 
      if (obj.constructor === Date) 
      return new Date(obj)       // 日期对象直接返回一个新的日期对象
      if (obj.constructor === RegExp)
      return new RegExp(obj)     //正则对象直接返回一个新的正则对象
      //如果循环引用了就用 weakMap 来解决
      if (hash.has(obj)) return hash.get(obj)
      let allDesc = Object.getOwnPropertyDescriptors(obj)
      //遍历传入参数所有键的特性
      let cloneObj = Object.create(Object.getPrototypeOf(obj), allDesc)
      //继承原型链
      hash.set(obj, cloneObj)
      for (let key of Reflect.ownKeys(obj)) {  
        cloneObj[key] = (isComplexDataType(obj[key]) && typeof obj[key] !== 'function') ? deepClone(obj[key], hash) : obj[key]
      }
      return cloneObj
    }
    // 下面是验证代码
    let obj = { 
      num: 0,
      str: '',
      boolean: true,
      unf: undefined,
      nul: null,
      obj: {  name: '我是一个对象', id: 1 },
      arr: [0, 1, 2],
      func: function () {  console.log('我是一个函数') },
      date: new Date(0),
      reg: new RegExp('/我是一个正则/ig'),
      [Symbol('1')]: 1,
    };
    Object.defineProperty(obj, 'innumerable', { 
      enumerable: false, value: '不可枚举属性' }
    );
    obj = Object.create(obj, Object.getOwnPropertyDescriptors(obj))
    obj.loop = obj    // 设置loop成循环引用的属性