带你读《现代Javascript高级教程》十七、JavaScript深拷贝与浅拷贝(1)https://developer.aliyun.com/article/1349578?groupCode=tech_library
3) 性能优化
深拷贝是一项相对耗费性能的操作,特别是在处理大型对象或嵌套层次很深的对象时。为了提高性能,可以考虑以下几个优化策略:
- 循环拷贝:使用循环代替递归,减少函数调用的开销。这可以通过迭代对象的属性并复制它们来实现。
- 使用 JSON 序列化与反序列化:JSON.stringify() 方法可以将对象序列化为字符串,JSON.parse() 方法可以将字符串解析为对象。使用这两个方法可以快速实现深拷贝,但它的适用范围受限,无法处理特殊类型(如函数和正则表达式)和循环引用。
- 使用库函数:许多优秀的 JavaScript 库(如 Lodash、Underscore)提供了高性能的深拷贝函数。这些库经过充分测试和优化,可以满足大多数深拷贝需求。
4) 完整的深拷贝实现示例
下面是一个完整的深拷贝函数的实现,综合考虑了上述的处理方法:
// 也可以用WeakMap优化function deepClone(obj, hash = new WeakMap()) { if (obj === null || typeof obj !== 'object') { return obj; } if (hash.has(obj)) { return hash.get(obj); } const clone = Array.isArray(obj) ? [] : {}; hash.set(obj, clone); if (obj instanceof Date) { return new Date(obj.getTime()); } if (obj instanceof RegExp) { const flags = obj.flags; const pattern = obj.source; return new RegExp(pattern, flags); } if (typeof obj === 'function') { return cloneFunction(obj); } const keys = [...Object.keys(obj), ...Object.getOwnPropertySymbols(obj)]; for (const key of keys) { clone[key] = deepClone(obj[key], hash); } return clone;} function cloneFunction(func) { const body = func.toString(); const parameters = body.match(/(.∗?)(.*?)/)[1]; const functionBody = body.substring(body.indexOf('{') + 1, body.lastIndexOf('}')); return new Function(parameters, functionBody);}
2. 浅拷贝的实现
与深拷贝不同,浅拷贝只复制对象的引用,而不创建对象的副本。下面是几种常见的浅拷贝方法:
1)Object.assign()
Object.assign() 方法用于将所有可枚举属性从一个或多个源对象复制到目标对象,并返回目标对象。它只会复制源对象的属性的引用,而不是属性的值。
const sourceObj = { name: 'John', age: 25 };const targetObj = Object.assign({}, sourceObj); console.log(targetObj); // 输出:{ name: 'John', age: 25 }
在上述代码中,我们使用 Object.assign() 方法将源对象的属性复制到目标对象中。targetObj 是 sourceObj 的浅拷贝副本。
2)展开语法(Spread Syntax)
展开语法(Spread Syntax)可以用于将一个对象的所有属性展开到另一个对象中。
const sourceObj = { name: 'John', age: 25 };const targetObj = { ...sourceObj }; console.log(targetObj); // 输出:{ name: 'John', age: 25 }
在上述代码中,我们使用展开语法将源对象的所有属性展开到目标对象中。targetObj 是 sourceObj 的浅拷贝副本。
带你读《现代Javascript高级教程》十七、JavaScript深拷贝与浅拷贝(3)https://developer.aliyun.com/article/1349576?groupCode=tech_library