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);  
相关推荐
Tanecious.4 分钟前
C++--红黑树
开发语言·c++
Top`8 分钟前
Java 泛型 (Generics)
java·开发语言·windows
爱吃土豆的马铃薯ㅤㅤㅤㅤㅤㅤㅤㅤㅤ33 分钟前
如何使用Java WebSocket API实现客户端和服务器端的通信?
java·开发语言·websocket
Shartin38 分钟前
Can201-Introduction to Networking: Application Layer应用层
服务器·开发语言·php
江城开朗的豌豆1 小时前
退出登录后头像还在?这个缓存问题坑过多少前端!
前端·javascript·vue.js
江城开朗的豌豆1 小时前
Vue的'读心术':它怎么知道数据偷偷变了?
前端·javascript·vue.js
共享家95271 小时前
linux_线程概念
linux·开发语言·jvm
江城开朗的豌豆1 小时前
手把手教你造一个自己的v-model:原来双向绑定这么简单!
前端·javascript·vue.js
apihz2 小时前
VM虚拟机全版本网盘+免费本地网络穿透端口映射实时同步动态家庭IP教程
android·服务器·开发语言·网络·数据库·网络协议·tcp/ip
江城开朗的豌豆2 小时前
v-for中key值的作用:为什么我总被要求加这个'没用的'属性?
前端·javascript·vue.js