JS05 深拷贝

最新推荐文章于 2023-05-30 09:58:34 发布
最新推荐文章于 2023-05-30 09:58:34 发布
阅读量316 收藏
点赞数
分类专栏： JavaScript 文章标签： 拷贝
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/duola8789/article/details/70255447
版权

文章目录

乞丐版

可以使用JSON.parse(JSON.stringify())来实现最简单的深拷贝，但是有着很多的缺陷，比如拷贝引用类型、拷贝函数、循环引用等

基础版

使用递归来完成深层对象的深拷贝，考虑数组的区别：

function deepClone(target) {
  if (typeof target !== 'object') {
    return target;
  }

  const clonedTarget = Array.isArray(target) ? [] : {};
  for (const key in target) {
    clonedTarget[key] = deepClone(target[key]);
  }
  return clonedTarget;
}

进阶版

上面的代码执行下面的测试用例：

const target = {
  field1: 1,
  field2: undefined,
  field3: {
    child: 'child'
  },
  field4: [2, 4, 8]
};

target.target = target;

console.log(deepClone(target));

控制台会报错，因为递归进入了死循环，导致内存溢出了，所以基础版需要解决循环引用的问题

解决方法就是用一个临时数组，数组成员是一个对象，target属性存放被拷贝的原始对象，clonedTraget存放已经递归过的对象，在递归一个对象之前，检查这个数组中是否存在，如果存在就直接返回，不再对其进行递归

function deepClone(target, cache = []) {
  if (typeof target !== 'object') {
    return target;
  }

  const cachedTarget = cache.find((v) => v.target === target);
  if (cachedTarget) {
    return cachedTarget.clonedTarget;
  }

  const clonedTarget = Array.isArray(target) ? [] : {};
  cache.push({clonedTarget, target});

  for (const key in target) {
    clonedTarget[key] = deepClone(target[key], cache);
  }
  return clonedTarget;
}

进阶优化版1

如果使用ES6的Map对象，可以对上面的cache做一些优化，普通的JavaScript对象不能用引用对象作为key值，而Map对象可以，这样我们就可以直接使用被拷贝的原始对象作为key值：

function deepClone(target, cache = new Map()) {
  if (typeof target !== 'object') {
    return target;
  }

  const cachedTarget = cache.get(target);
  if (cachedTarget) {
    return cachedTarget;
  }

  const clonedTarget = Array.isArray(target) ? [] : {};
  cache.set(target, clonedTarget);

  for (const key in target) {
    clonedTarget[key] = deepClone(target[key], cache);
  }
  return clonedTarget;
}

进阶优化版2

上面的代码中，使用了Map对象，如果被拷贝的对象很大、层次很深的时候，cache会占用大量的内存，这个时候可以考虑使用WeakMap来进行性能上的优化

WeakMap的键名所引用的对象都是弱引用，即垃圾回收机制不将该引用考虑在内。因此，只要所引用的对象的其他引用都被清除，垃圾回收机制就会释放该对象所占用的内存。也就是说，一旦不再需要，WeakMap里面的键名对象和所对应的键值对会自动消失，不用手动删除引用。

举个例子，如果使用Map的话，对象间是存在强引用关系的

let obj = { name : 'ConardLi'}
const map = new Map();
map.set(obj,'code秘密花园');
obj = null;

虽然手动删除了obj，但是target依然对obj存在强引用关系，这部分内存仍然无法被释放

如果使用WeakMap：

let obj = { name : 'ConardLi'}
const wm = new WeakMap();
wm.set(obj,'code秘密花园');
obj = null;

wm和obj是弱引用关系，当下次垃圾回收机制执行时，不会考虑wm对obj的引用，这块内存会被清除

function deepClone(target, cache = new WeakMap()) {
  if (typeof target !== 'object') {
    return target;
  }

  const cachedTarget = cache.get(target);
  if (cachedTarget) {
    return cachedTarget;
  }

  const clonedTarget = Array.isArray(target) ? [] : {};
  cache.set(target, clonedTarget);

  for (const key in target) {
    clonedTarget[key] = deepClone(target[key], cache);
  }
  return clonedTarget;
}

完善数据类型

引用类型的判断

非引用类型直接返回，不需要递归，上面的代码只是使用了typeof来判断，但是对于null和function，需要作特殊处理

function isObject(target) {
  return target !== null && (typeof target === 'object' || typeof target === 'function');
}

获取准确的数据类型

使用Object.prototype.toString.call来判断数据的准确类型，返回结果是'[object type]'

function getType(target) {
  return Object.prototype.toString.call(target);
}


const mapTag = '[object Map]';
const setTag = '[object Set]';
const arrayTag = '[object Array]';
const objectTag = '[object Object]';

const boolTag = '[object Boolean]';
const dateTag = '[object Date]';
const errorTag = '[object Error]';
const numberTag = '[object Number]';
const regexpTag = '[object RegExp]';
const stringTag = '[object String]';
const symbolTag = '[object Symbol]';

上面的类型中可以分为可以继续遍历的类型和不可继续遍历的类型

不可以继续继续遍历的类型

对了对象、数组、Set和Map之外，上面列出的其他类型都属于不可以继续继续遍历的类型，不再需要递归，直接返回一个值就可以，具体实现根据不同的类型有不同的处理方法

function cloneOtherType(target, type) {
  switch (type) {
    case regexpTag: {
      return cloneReg(target);
    }
    case symbolTag: {
      return cloneSymbol(target);
    }
    default: {
      return new target.constructor(target)
    }
  }
}

通过构造函数复制

Boolean、Date、Error、String、Number等类型都可以直接使用构造函数和原始数据创建一个新对象

function cloneOtherType(target, type) {
  switch (type) {
    default: {
      return new target.constructor(target)
    }
  }
}

复制正则对象

正则对象的复制方法如下（lodash的实现）

function cloneReg(target) {
  const reFlags = /\w*$/;
  const result = new targe.constructor(targe.source, reFlags.exec(target));
  result.lastIndex = targe.lastIndex;
  return result;
}

RegExp构造函数接受两个参数，第一个参数是源码source，第二个参数是修饰符flags：

const regexp = /xyz/gim;

regexp.source
// => "xyz"

regexp.flags
// => "gim"

JS中的正则对象包括6个修饰符g（全局）/i（大小写）/m（多行）/s（dotAll）/u（Unicode字符）/y（粘滞）（具体的意义参考这篇文章）

上面的方法中没有通过flags获取修饰符，而是采取了正则提取。

另外，在克隆正则对象时，还要克隆其lastIndex，lastIndex表示每次匹配时的开始位置，当修饰符中包括g或y时，会对lastIndex有影响，并且是可写的，所以单独对lastIndex进行了复制

复制Symbol对象

function cloneSymbol(target) {
    return Object(Symbol.prototype.valueOf.call(target));
}

可以继续继续遍历的类型

数组、对象、Set和Map，是可以继续遍历的类型。对于可以继续遍历的类型，需要获取初始化数据，数组是[]，对象是{}

更通用的方法是通过constructor的方式拿到，例如{}与new Object()效果是一样的，这样的好处是可以保留被拷贝对象原型上的数据

function getInit(target) {
  return new target.constructor();
}

//处理可以继续遍历的类型
const cloneTarget = getInit(target);

初始化完成后，需要分别进行复制操作：

// 克隆 Set
if (type === setTag) {
  for (const v of target) {
    cloneTarget.add(deepClone(v, cache));
  }
}

// 克隆 Map
if (type === mapTag) {
  for (const [key, value] of target) {
    cloneTarget.set(key, deepClone(value, cache));
  }
}

// 克隆对象和数组
if (type === objectTag || type === arrayTag) {
  for (const key in target) {
    cloneTarget[key] = deepClone(target[key], cache);
  }
}

函数的处理

首先通过是否有prototype属性，判断是箭头函数还是普通函数，箭头函数使用eval和函数字符串来声生成一个新的尖头管函数，普通函数需要使用正则提取指出函数体和函数参数，然后使用new Function来生成一个新的函数

这部分省略了，直接将isObject中对于函数的限制放开，因为实际上没有任何的应用场景，因为函数没有必要拷贝，两个对象使用一个在内存中处于同一个地址的函数是没有任何问题的

完整代码

function isObject(target) {
  return target !== null && typeof target === 'object';
}

function getType(target) {
  return Object.prototype.toString.call(target);
}

function getInit(target) {
  return new target.constructor();
}

const mapTag = '[object Map]';
const setTag = '[object Set]';
const arrayTag = '[object Array]';
const objectTag = '[object Object]';

const boolTag = '[object Boolean]';
const dateTag = '[object Date]';
const errorTag = '[object Error]';
const numberTag = '[object Number]';
const regexpTag = '[object RegExp]';
const stringTag = '[object String]';
const symbolTag = '[object Symbol]';

const deepTags = [mapTag, setTag, arrayTag, objectTag];

function cloneSymbol(target) {
  return Object(Symbol.prototype.valueOf.call(target));
}

function cloneReg(target) {
  const reFlags = /\w*$/;
  const result = new target.constructor(target.source, reFlags.exec(target));
  result.lastIndex = target.lastIndex;
  return result;
}

function cloneOtherType(target, type) {
  switch (type) {
    case regexpTag: {
      return cloneReg(target);
    }
    case symbolTag: {
      return cloneSymbol(target);
    }
    default: {
      return new target.constructor(target);
    }
  }
}

function deepClone(target, cache = new WeakMap()) {
  // 克隆原始类型
  if (!isObject(target)) {
    return target;
  }

  // 处理循环引用
  const cachedTarget = cache.get(target);
  if (cachedTarget) {
    return cachedTarget;
  }

  // 类型判断
  const type = getType(target);

  // 不可以继续遍历的类型
  if (!deepTags.includes(type)) {
    return cloneOtherType(target, type);
  }

  // 处理可以继续遍历的类型
  const cloneTarget = getInit(target);
  cache.set(target, cloneTarget);

  // 克隆 Set
  if (type === setTag) {
    for (const v of target) {
      cloneTarget.add(deepClone(v, cache));
    }
  }

  // 克隆 Map
  if (type === mapTag) {
    for (const [key, value] of target) {
      cloneTarget.set(key, deepClone(value, cache));
    }
  }

  // 克隆对象和数组
  if (type === objectTag || type === arrayTag) {
    for (const key in target) {
      cloneTarget[key] = deepClone(target[key], cache);
    }
  }

  return cloneTarget;
}

总结

总结一下，深拷贝要满足的要求：

  1. 合理处理基本值
  2. 合理处理引用值中的数组、对象、Set、Map
  3. 合理处理Symbol、RegExp对象
  4. 合理处理其他引用类型
  5. 合理处理循环引用的情况
  6. 使用WeakMap进行性能优化

参考

「已注销」
关注
专栏目录
深拷贝.js(考虑最全的深拷贝函数)
06-27
js考虑最完善的深拷贝函数,可以深拷贝引用对象和基本对象
js 深拷贝函数
12-12
在给定的代码中，`objectClone`函数就是一个实现JavaScript深拷贝功能的函数。 首先，我们来分析这个`objectClone`函数的逻辑： 1. 函数接受两个参数：`obj`是要被拷贝的对象，`preventName`是一个可选参数，用于...
JS中的拷贝（深拷贝、浅拷贝）
weixin_45805812的博客
07-08 296
这里写自定义目录标题一.浅拷贝二.深拷贝1. JSON.parse()和JSON.stringify()2.递归遍历 浅拷贝：只拷贝对象的基础属性值，两个对象指向同一个内存地址。 深拷贝：拷贝对象的所有属性作为一个全新的对象。两个对象指向不同内存地址。 浅拷贝仅仅是指向被复制的内存地址，如果原地址中对象被改变了，那么浅拷贝出来的对象也会相应改变。 一.浅拷贝 使用Object.assign（） 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。 var obj = { age
JS当中的拷贝！！！
xxx的笔记
08-22 339
最近在复习前端的笔试和面试题目，看到了深拷贝和浅拷贝的问题，在这里自己查点资料写下这一篇博客用来复习！第一：JS的数据类型我猜会有很多小伙伴和我一样，在开始准备各大公司笔试面试的时候很大程度上都存在着基础不扎实的情况，比如看到经常看到的面试题之一：深拷贝和浅拷贝，可能很多同学看了一下其他朋友的代码然后记一下就过去了。知道了是怎么通过代码实现的，不过在这里我写一些东西顺便帮助自己复习复习，如有错误欢迎
js--拷贝
Laohei0101的博客
07-12 450
今天说一下js中的一个重要知识点就是拷贝。如有错误请大家指教，共同努力。在学习拷贝之前一定要把js中的原始类型数据和引用类型数据搞清楚，这样才会对拷贝理解的更透彻，话不多说直接开始啦。 一、为什么要用拷贝呢？我们先来看一下一个简单的实例 <body> <div id = "app"> <form @submit.prevent="insert"> <input type="text" v-model="student.name"> //通过v-m
js数组中深拷贝的方法
热门推荐
罗布泊丶镜像人的博客
06-06 4万+
一、什么是浅拷贝 　　在js当中，我们常常遇到数组复制的的情况，许多人一般都会使用“=”来直接把一个数组赋值给一个变量，如 1 var a=[1,2,3]; 2 var b=a; 3 console.log(b);　　//输出的是1,2,3 4 a[2]=0; 5 console.log(b);　　//输出的是1,2,0 把数组a用等号“=”的形式复制给变量b，这种就是js数组的浅拷贝。然...
js深浅拷贝
Seety_ST的专栏
01-02 964
1、在说深浅拷贝前，我们先来看看下面两个例子 在第一个列子里面，修改b的值并不会影响到a的值，在例子2 arr2修改里面的值时，会影响到arr1里面的值。同样是变量为什么表现不一样呢？这时候我们就要了解一下js中的数据类型：基本数据类型和引用数据类型 基本类型和引用类型 ECMASCRIPT的变量包含两种数据类型，基本数据类型和引用数据类型，基本数据类型指的是，保存在栈中的简单数据类型，引用数据...
JS浅拷贝和深拷贝原理与实现方法分析
12-11
JavaScript中的浅拷贝和深拷贝是两种不同的对象复制方式，它们在处理复杂对象时有着显著的区别。在JavaScript中，对象是引用类型，因此当一个对象被复制时，如果不进行特殊处理，复制的只是指向原对象的引用，而非...
javascript深拷贝、浅拷贝和循环引用深入理解
10-18
JavaScript中的深拷贝和浅拷贝是编程中常见的概念，主要涉及到对象和数组的复制。在JavaScript中，数据类型分为基本数据类型（如Number、String、Boolean等）和引用数据类型（如Object、Array等）。基本类型直接存储...
js 浅拷贝 和 深拷贝
青蛙king的博客
11-19 4145
目录 一、浅拷贝与深拷贝的关系 1、基本类型 2、引用数据类型——对象（object） （1）、对象的浅拷贝 （2）、对象的深拷贝 二、对象的浅拷贝的实现 1、ES6中的Object.assign方法实现对象的浅拷贝 2、直接赋值法实现对象的浅拷贝 三、对象的深拷贝的实现 1、ES6中的扩展运算符（...）实现对象的深拷贝 2、用JSON对象的parse和stringify方...
js 中有哪些拷贝的方式
weixin_34008933的博客
04-13 115
1. json转换，深拷贝 var newObj = JSON.parse(JSON.stringify(obj)) 复制代码注意：function 会被转变成 undefined 2. 循环递归将基础类型进行赋值，深拷贝 如果是 function，很少考虑在n内，且不考虑箭头函数 // 这里不考虑箭头函数的情况 function cloneDeep (obj) { var _types = ...
js中的浅拷贝和深拷贝
xiaodaitongxue的博客
04-10 923
1.简单理解 把a拷贝给b，浅拷贝会把a的引用（地址）赋值给b，深拷贝会在内存中新建一个对象，然后把a的属性在新创造的对象中生成一份。 2.js中的数据类型 js中有基本数据类型和引用数据类型。基本数据类型有字符串、数字、布尔、空、未定义、Symbol和BigInt,引用数据类型有Object，包含日期、数组、函数等。基本数据类型大小是固定的，引用数据类型的可变的，分别存放在内存中的两种存储结构栈（后入先出）和堆。堆是动态分配内存，内存大小不一，也不会自动释放。栈是自动分配相对固定大小的内存空间，并由系统自
JS中的深拷贝与浅拷贝
weixin_30783629的博客
04-01 95
　　刚看完JS中的深浅拷贝，来记录分享一番，一起来开心的掉发吧。 　　首先了解深浅拷贝之前来看看JS中的几种数据类型，分别有String、Number、Boolean、undefined、null、Object。es6还多了一种symbol,我们暂且先把他放一边。前面提到的几种数据类型前五种也就是String、Number、Boolean、undefined、null都是属于基本数据类型，而Ob...
对js深拷贝和浅拷贝的理解
Amy_cloud的博客
10-22 464
1.数据的基本数据类型： Number, null ,undefined , String , boolean 基本数据类型是按值访问的，因为可以直接操作保存在变量中的实际值。 其值存储在栈内存中。 2.数据的复杂（引用）数据类型： Array , Object , Function , Data 引用数据类型的值储存在堆内存中，所以，引用类型数据在栈内存中保存的实际上是对象在堆内存中的引用...
JS拷贝的几种方法
Venchi的博客
03-18 8907
1. 遍历,就是把对象的属性遍历一遍，赋给一个新的对象。 var deepCopy= function(source) { var result={}; for (var key in source) { result[key] = typeof source[key]===’object’? deepCoyp(source[key]): sou...
一次搞懂浅拷贝与深拷贝
最新发布
DZQ1223的博客
05-30 4691
栈(stack):由操作系统自动分配释放 ，存放函数的参数值，局部变量的值等。其操作方式类似于数据结构中的栈；堆(heap)：一般由程序员分配释放， 若程序员不释放，程序结束时可能由OS回收，分配方式倒是类似于链表浅拷贝就是只拷贝基础数据类型的数据，并且数据只有单一的一层，而深拷贝用于拷贝具有复杂的数据类型的数据。
js中的拷贝
JINGZzhuo的博客
08-03 512
只拷贝对象的基础属性值，两个对象指向同一个内存地址。：拷贝对象的所有属性作为一个全新的对象。两个对象指向不同内存地址。
详细讲解js中的深拷贝与浅拷贝
zhang_cherry的博客
09-27 2万+
深拷贝与浅拷贝在其它语言中也经常被提及到，在实际项目开发过程中也常常需要区分当前使用的到底是深拷贝还是浅拷贝，有时候在该使用深拷贝的地方，我们使用了浅拷贝，会导致深藏不露的bug。
说说JS中的浅拷贝与深拷贝
菜鸟葫芦娃
11-29 6313
说说JS中的浅拷贝与深拷贝
理解JavaScript：深拷贝与浅拷贝完全解析
"本文详细解析了JavaScript中的深拷贝与浅拷贝概念，通过实例和代码解释了它们的区别和应用场景。" 在JavaScript中，深拷贝和浅拷贝是处理复杂对象（如对象和数组）时非常重要的概念。理解这两者之间的差异对于编写...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值