js深克隆实现方法

最新推荐文章于 2024-03-14 13:00:00 发布

RH_任何

最新推荐文章于 2024-03-14 13:00:00 发布

阅读量186

点赞数 1

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/r_dong_dong_/article/details/131680720

版权

js深克隆实现方法

*相关知识点

浅克隆：就是将栈内存中的引用复制一份，赋给一个新的变量，本质上两个指向堆内存中的同一地址，内容也相同，其中一个变化另一个内容也会变化。
深克隆：就是创建一个新的空对象，开辟一块内存，然后将原对象中的数据全部复制过去，完全切断两个对象间的联系。
区别：浅克隆和深克隆最大的区别就是对引用值的处理了，即浅克隆之后你改我也改，深克隆之后你改我不改。（PS：原始值的处理一样）
原始值（栈数据stack）：Number，Boolean(false/true)，String，undefined，null。
引用值（堆数据heap）：Array，Object，function ··· Date，RegExp。

*深拷贝方法

使用递归
使用递归的方式实现数组、对象的深拷贝
进行深拷贝的不能为空，并且是对象

//使用递归的方式实现数组、对象的深拷贝
function deepClone(obj) {
  //判断拷贝的要进行深拷贝的是数组还是对象，是数组的话进行数组拷贝，对象的话进行对象拷贝
  var objClone = Array.isArray(obj) ? [] : {};
  //进行深拷贝的不能为空，并且是对象
  if (obj && typeof obj === "object") {
    for (key in obj) {
      if (obj.hasOwnProperty(key)) {
        if (obj[key] && typeof obj[key] === "object") {
          objClone[key] = deepClone(obj[key]);
        } else {
          objClone[key] = obj[key];
        }
      }
    }
  }
  return objClone;
}

通过JSON对象
通过js的内置对象JSON来进行数组对象的深拷贝
缺点：无法实现对对象中方法的深拷贝，不可以拷贝 null， function， RegExp 等等类型的

function cloneDeep(obj) {
	var _obj = JSON.stringify(obj),
	objClone = JSON.parse(_obj);
	return objClone;
}

*缺点：如果obj里面有时间对象，则JSON.stringify后再JSON.parse的结果，时间将只是字符串的形式。而不是时间对象；如果obj里有RegExp、Error对象，则序列化的结果将只得到空对象；如果obj里有function，Symbol 类型，undefined，则序列化的结果会把函数或 undefined丢失；如果obj里有NaN、Infinity和-Infinity，则序列化的结果会变成null JSON.stringify()只能序列化对象的可枚举的自有属性，例如如果obj中的对象是有构造函数生成的，则使用JSON.parse(JSON.stringify(obj))深拷贝后，会丢弃对象的constructor；*

Object.assign()
缺点：对象中只有一级属性，没有二级属性的时候，为深拷贝
对象中有对象的时候，在二级属性以后就是浅拷贝

function cloneDeep(obj){
    return Object.assign({}, obj);
}

通过jQuery的extend方法

function cloneDeep(obj){
   return $.extend(true,[],obj);
}

lodash函数

function cloneDeep(obj){
    return lodash.cloneDeep(obj)
}

参考：
链接: https://cloud.tencent.com/developer/article/1533247
链接: [https://cloud.tencent.com/developer/article/1533247
https://blog.csdn.net/qq_42063254/article/details/114934573?utm_medium=distribute.pc_relevant.none-task-blog-2_defaultbaidujs_baidulandingword~default-0-114934573-blog-115919603.235^v38pc_relevant_anti_t3_base&spm=1001.2101.3001.4242.1&utm_relevant_index=3](https://cloud.tencent.com/developer/article/1533247
https://blog.csdn.net/qq_42063254/article/details/114934573?utm_medium=distribute.pc_relevant.none-task-blog-2_defaultbaidujs_baidulandingword~default-0-114934573-blog-115919603.235^v38pc_relevant_anti_t3_base&spm=1001.2101.3001.4242.1&utm_relevant_index=3)
链接: https://blog.csdn.net/Yuki_yuhan/article/details/108297341