当前位置：首页 > news >正文

JavaScript对象的深度拷贝

news 2025/7/10 13:51:54

递归深度拷贝

情况一：基本数据类型，直接赋值

情况二：复杂数据类型（数组和对象）先声明空容器，再递归调用遍历赋值

情况三：正则表达式，日期对象等

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>深度拷贝示例</title>
</head>
<body><script>function deepCopy(target, source, map = new WeakMap()) {if (source === null) {return null;}if (typeof source !== 'object') {return source;}if (map.has(source)) {return map.get(source);}let clone;if (source instanceof Date) {clone = new Date(source.getTime());map.set(source, clone);return clone;}if (source instanceof RegExp) {clone = new RegExp(source);map.set(source, clone);return clone;}if (Array.isArray(source)) {clone = [];map.set(source, clone);source.forEach((item, index) => {clone[index] = deepCopy(null, item, map);});return clone;}clone = {};map.set(source, clone);Object.keys(source).forEach(key => {clone[key] = deepCopy(null, source[key], map);});return clone;}const original = {name: "张三",age: 30,isStudent: false,hobby: null,skills: ["JavaScript", "React", "Node.js"],contact: {phone: "13800138000",email: "zhangsan@example.com"},birthday: new Date("1990-01-01"),regex: /\d+/g,self: null};original.self = original;const clone = deepCopy(null, original);clone.age = 31;clone.skills.push("Vue");clone.contact.phone = "13900139000";clone.birthday.setFullYear(1991);console.log("原始对象:", original);console.log("克隆对象:", clone);console.log("克隆对象是否等于原始对象:", clone === original);console.log("克隆对象的self属性是否指向自身:", clone.self === clone);</script>
</body>
</html>

函数递归地复制对象及其嵌套属性，确保原始对象和克隆对象完全独立。它处理了多种数据类型和循环引用的情况。

function deepCopy(target, source, map = new WeakMap()) {// 处理 null 值if (source === null) {return null;}// 处理原始数据类型（非对象）if (typeof source !== 'object') {return source;}// 处理循环引用：如果已复制过该对象，直接返回之前的克隆if (map.has(source)) {return map.get(source);}let clone;// 处理日期对象if (source instanceof Date) {clone = new Date(source.getTime());map.set(source, clone);return clone;}// 处理正则表达式对象if (source instanceof RegExp) {clone = new RegExp(source);map.set(source, clone);return clone;}// 处理数组if (Array.isArray(source)) {clone = [];map.set(source, clone);source.forEach((item, index) => {clone[index] = deepCopy(null, item, map);});return clone;}// 处理普通对象clone = {};map.set(source, clone);Object.keys(source).forEach(key => {clone[key] = deepCopy(null, source[key], map);});return clone;
}

处理策略说明

原始值处理：直接返回原值，不进行复制。
对象类型处理：
- 日期对象：创建新的日期对象，使用相同的时间戳。
- 正则表达式：创建新的正则对象，使用相同的模式和标志。
- 数组：创建新数组，递归复制每个元素。
- 普通对象：创建新对象，递归复制每个自有属性。
循环引用处理：使用 WeakMap 记录已处理的对象，避免无限递归。

测试对象 `original`

代码创建了一个包含多种数据类型的复杂对象，并设置了循环引用：

const original = {name: "张三",           // 字符串age: 30,               // 数字isStudent: false,      // 布尔值hobby: null,           // nullskills: ["JavaScript", "React", "Node.js"],  // 数组contact: {             // 嵌套对象phone: "13800138000",email: "zhangsan@example.com"},birthday: new Date("1990-01-01"),  // 日期对象regex: /\d+/g,                     // 正则表达式self: null                         // 用于循环引用
};
// 设置循环引用：self 属性指向对象自身
original.self = original;

深度拷贝测试

const clone = deepCopy(null, original);
// 修改克隆对象的属性
clone.age = 31;
clone.skills.push("Vue");
clone.contact.phone = "13900139000";
clone.birthday.setFullYear(1991);// 输出测试结果
console.log("原始对象:", original);
console.log("克隆对象:", clone);
console.log("克隆对象是否等于原始对象:", clone === original);
console.log("克隆对象的self属性是否指向自身:", clone.self === clone);