JavaScript 里的深拷贝和浅拷贝

JavaScript 里的深拷贝和浅拷贝

JS中数据类型分为基本数据类型引用数据类型

基本类型值指的是那些保存在 内存中的简单数据段。包含NumberStringBooleanNullUndefinedSymbol

引用类型值指的是那些保存在 内存中的对象,所以引用类型的值保存的是一个指针,这个指针指向对象的地址。引用类型包含Object 类型、Array 类型、Date 类型、RegExp 类型、Function 类型 等。

因为引用类型保存的是指向存储地址的指针,所以我们直接把一个引用类型赋值给另外一个引用类型时候,相当于是把指针赋值过去,实际上两个对象的存储地址是一样的。因此也就导致这两个对象共用地址,只要地址里的数据被修改后,两个对象的值都会改变。

浅拷贝的实现方式

1.Array.concat()
js 复制代码
const arr = [1,2,3];
const copy = arr.concat(); 
console.log(copy); // 输出: [1, 2, 3]
2.Object.assign()
js 复制代码
const arr= [1,2,3];
const copy1 = Object.assign({}, arr); 
console.log(copy); // 输出: [1, 2, 3]
3.slice()
js 复制代码
const arr= [1,2,3];
let copy = arr.slice();  
console.log(copy); // 输出: [1, 2, 3]
4.扩展运算符 ...
js 复制代码
const arr= [1,2,3];
const copy = [...arr];
console.log(copy); // 输出: [1, 2, 3]

深拷贝

1.JSON.parse()和JSON.stringify()
js 复制代码
const obj1 = {
    x: 1, 
    y: {
        m: 1
    }
};
const obj2 = JSON.parse(JSON.stringify(obj1));
console.log(obj2) //{x: 1, y: {m: 1}}

1.这是最简单的方法之一,但它有一些限制,比如不能正确处理函数、undefinedSymbol、循环引用等特殊类型的值。

2.它会抛弃对象的constructor。也就是深拷贝之后,不管这个对象原来的构造函数是什么,在深拷贝之后都会变成Object

3.如果对象中存在循环引用的情况无法正确处理。

2. 递归复制

通过递归函数手动复制对象的每个属性。这种方法可以处理更复杂的对象和特殊情况(如循环引用)。

js 复制代码
function deepClone(obj, hash = new WeakMap()) {  
  if (obj === null) return null; // null 的情况  
  if (obj instanceof Date) return new Date(obj); // 日期对象直接返回一个新的日期对象  
  if (obj instanceof RegExp) return new RegExp(obj); // 正则对象直接返回一个新的正则对象  
   //hash判断该属性是否被复制
  // 如果循环引用了就用 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)) {  
    if (typeof obj[key] === 'object' && obj[key] !== null) {  
      cloneObj[key] = deepClone(obj[key], hash);  
    } else {  
      cloneObj[key] = obj[key];  
    }  
  }  
  return cloneObj;  
}  
  
// 使用示例  
let original = { a: 1, b: { c: 2 } };  
original.b.d = original; // 创建一个循环引用  
let clone = deepClone(original);  
console.log(clone);  
相关推荐
Glommer几秒前
某音 Js 逆向思路
javascript·逆向
weixin_307779134 分钟前
在Linux服务器上使用Jenkins和Poetry实现Python项目自动化
linux·开发语言·python·自动化·jenkins
润 下4 分钟前
C语言——深入解析C语言指针:从基础到实践从入门到精通(四)
c语言·开发语言·人工智能·经验分享·笔记·程序人生·其他
街尾杂货店&4 分钟前
webpack - 单独打包指定JS文件(因为不确定打出的前端包所访问的后端IP,需要对项目中IP配置文件单独拿出来,方便运维部署的时候对IP做修改)
前端·javascript·webpack
月光技术杂谈5 分钟前
用Deepseek 实现一个基于web的扣图应用
前端·javascript·html5·ccs·tensorflow.js·canvas api
Empty_7778 分钟前
Python编程之常用模块
开发语言·网络·python
小火柴12311 分钟前
利用R绘制箱线图
开发语言·r语言
wheeldown22 分钟前
【Linux】Linux 进程通信:System V 共享内存(最快方案)C++ 封装实战 + 通信案例,4 类经典 Bug 快速修复
linux·运维·服务器·开发语言
小年糕是糕手31 分钟前
【数据结构】双向链表“0”基础知识讲解 + 实战演练
c语言·开发语言·数据结构·c++·学习·算法·链表
将车24437 分钟前
C++实现二叉树搜索树
开发语言·数据结构·c++·笔记·学习