如何给网站添加搜索关键字,网站查询功能怎么做,有没有做语文题的网站,玩具租赁系统网站开发与实现深度克隆#xff08;Deep Clone#xff09;是指复制一个对象或数组及其所有嵌套结构的副本#xff0c;使得克隆后的对象与原对象完全独立。JavaScript 提供了一些方法实现深度克隆#xff0c;但每种方法有其优缺点。
1. 常用方法
1.1 使用 JSON.parse 和 JSON.stringify …深度克隆Deep Clone是指复制一个对象或数组及其所有嵌套结构的副本使得克隆后的对象与原对象完全独立。JavaScript 提供了一些方法实现深度克隆但每种方法有其优缺点。
1. 常用方法
1.1 使用 JSON.parse 和 JSON.stringify
这种方法最简单但有局限性。
const obj { a: 1, b: { c: 2 } };
const clone JSON.parse(JSON.stringify(obj));console.log(clone); // { a: 1, b: { c: 2 } }
console.log(clone obj); // false
console.log(clone.b obj.b); // false优点
简单易用。适用于纯 JSON 格式的数据。
缺点
不支持函数、undefined、Symbol、循环引用等。日期对象会变成字符串RegExp 对象会丢失。 1.2 使用 structuredClone
structuredClone 是一种内置的深拷贝方法支持复杂数据结构。
const obj { a: 1, b: { c: 2 }, d: new Date() };
const clone structuredClone(obj);console.log(clone); // { a: 1, b: { c: 2 }, d: Date }
console.log(clone obj); // false
console.log(clone.b obj.b); // false优点
支持更多类型如 Date、RegExp、Map、Set 等。处理循环引用。
缺点
不支持旧版本浏览器。
1.3 使用递归实现深度克隆
通过递归遍历对象和数组手动实现深拷贝。
function deepClone(obj) {if (obj null || typeof obj ! object) {return obj;}if (obj instanceof Date) {return new Date(obj);}if (obj instanceof RegExp) {return new RegExp(obj);}const clone Array.isArray(obj) ? [] : {};for (const key in obj) {if (obj.hasOwnProperty(key)) {clone[key] deepClone(obj[key]);}}return clone;
}const obj { a: 1, b: { c: 2 }, d: new Date() };
const clone deepClone(obj);console.log(clone); // { a: 1, b: { c: 2 }, d: Date }
console.log(clone obj); // false
console.log(clone.b obj.b); // false优点
完全控制克隆逻辑。支持特定类型的处理。
缺点
不支持循环引用需额外处理。 2. 循环引用处理
对于有循环引用的对象需要使用 WeakMap 来避免递归陷入死循环。
function deepClone (value, cache new WeakMap ()) {if (typeof value ! object || value null) {return value;}if (cache.has(value)) {return cache.get(value);}const result Array.isArray(value) ? [] : {};Object.setPrototypeOf(result, Object.getPrototypeOf(value));cache.set(value, result);for (i in value) {if (value.hasOwnProperty(i)) {result[i] deepClone(value[i], cache);}}return result;
}const obj { a: 1 };
obj.b obj; // 循环引用let clone deepClone(obj);
console.log(clone); // { a: 1, b: [Circular] }const Person function(name, age) {this.name name;this.age age;
}Person.prototype.a 100;clone new Person(a, 12)console.log(clone); 3. 方法对比
方法支持类型处理循环引用性能易用性JSON.parse/stringify仅支持 JSON 格式否高简单structuredClone支持大部分类型是高简单手动递归可定制支持类型否需扩展中中等Lodash支持复杂结构和循环引用是中简单 推荐
数据结构简单使用 JSON.parse 和 JSON.stringify。现代浏览器使用 structuredClone。复杂场景使用 Lodash 或手动实现带循环引用处理的深拷贝函数。
