手机网站封装用户体验类似互推商盟的推广平台
递归深度拷贝
情况一：基本数据类型，直接赋值
情况二：复杂数据类型（数组和对象）先声明空容器，再递归调用遍历赋值
情况三：正则表达式，日期对象等
<!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);
关键测试点
- 完全独立：修改克隆对象不会影响原始对象，反之亦然。
- 循环引用处理：克隆对象的
self属性正确指向克隆对象自身，而非原始对象。 - 嵌套结构保持：所有嵌套对象都被递归复制，保持相同的结构。