当前位置: 首页 > article >正文

javascript实现深度拷贝

在JavaScript中,深拷贝是指创建一个新对象,并将原对象的所有属性值复制到新对象中。这样,即使修改新对象的属性值,也不会影响到原对象。

1.使用JSON.parse()和JSON.stringify()方法:

function deepClone(obj) {
  return JSON.parse(JSON.stringify(obj));
}

注意:这种方法只适用于可以被JSON序列化的对象,对于函数、正则表达式、Symbol等类型的属性,以及循环引用的对象,这种方法无法正确拷贝。

2.使用递归方法: 

function deepClone(obj) {
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }

  let clone = Array.isArray(obj) ? [] : {};

  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      clone[key] = deepClone(obj[key]);
    }
  }

  return clone;
}

这种方法可以处理更多类型的属性,但是对于循环引用的对象,仍然无法正确拷贝。 

3.使用递归和WeakMap来实现支持循环引用对象的深拷贝方法:

function deepClone(obj, hash = new WeakMap()) {
  if (obj === null || typeof obj !== 'object') {
    return obj;
  }

  // 如果已经拷贝过该对象,则直接返回缓存结果
  if (hash.has(obj)) {
    return hash.get(obj);
  }

  let clone = Array.isArray(obj) ? [] : {};

  // 将新对象存入缓存
  hash.set(obj, clone);

  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      clone[key] = deepClone(obj[key], hash);
    }
  }

  return clone;
}

在 ES6 中,引入了一种新的数据结构 WeakMap,它是一种弱引用的键值对集合。与普通的 Map 不同,WeakMap 的键只能是对象,并且对于键引用的对象,如果没有其他引用存在,它们会被垃圾回收。WeakMap 具有以下特性:

1. 只能使用对象作为键:WeakMap 的键只能是对象,不能是原始值(如字符串、数字等)。

2. 弱引用:当键引用的对象没有其他引用存在时,它们会被垃圾回收。这意味着 WeakMap 不会阻止对象被垃圾回收。

3. 不可迭代:WeakMap 不支持迭代方法,如 `forEach`、`keys`、`values` 和 `entries`。

4. 无法获取大小:WeakMap 没有 `size` 属性或方法来获取其大小。

 此方法可完美实现真正意义上的深度拷贝,以下是简单示例:

let obj1 = { a: 1, b: [2, 3], c: { d: 4 } };
let obj2 = obj1;
obj1.e = obj2;

let clone1 = deepClone(obj1);
console.log(clone1); // { a: 1, b: [2, 3], c: { d: 4 }, e: { ... } }
console.log(clone1 === clone2); // false
console.log(clone1.e === clone2); // true


http://www.kler.cn/a/229735.html

相关文章:

  • android 官网刷机和线刷
  • Nacos 3.0 Alpha 发布,在安全、泛用、云原生更进一步
  • 体悟PyTorch的优雅
  • Java集合框架在数据处理中的应用场景
  • 6-2、T型加减速计算简化【51单片机+L298N步进电机系列教程】
  • SQL基础
  • Positive Technologies 帮助修复了流行的 Yealink 视频会议系统中的一个危险漏洞
  • 深度解析 Spring Security:身份验证、授权、OAuth2 和 JWT 身份验证的完整指南
  • 在idea中使用maven编译包,直接打包到远程环境上去了
  • 掌握Web服务器之王:Nginx 学习网站全攻略!
  • Unity3d Shader篇(三)— 片元半兰伯特着色器解析
  • Jupyter Notebook中的%matplotlib inline详解
  • python_蓝桥杯刷题记录_笔记_全AC代码_入门5
  • WebSocket相关问题
  • Linux进程信号处理:深入理解与应用(3)
  • 了解这六种最佳移动自动化测试工具吗?
  • 页面单跳转换率统计案例分析
  • Spring boot集成各种数据源操作数据库
  • 二叉树经典题题解(超全题目)(力扣)
  • 「连载」边缘计算(十四)02-02:边缘部分源码(源码分析篇)
  • 第7节、双电机直线运动【51单片机+L298N步进电机系列教程】
  • okhttp 的 拦截器