js深拷贝和浅拷贝如何实现（js深拷贝和浅拷贝如何实现循环）

科技前沿 • 2025-06-02 15:39 • 阅读 32

大家好，我是讯享网，很高兴认识大家。

文章目录 隐藏

常见误区：展开运算符和 Object.create()
JSON.parse(JSON.stringify())：简单而有效
lodash.deepClone：全面而强大
性能考虑
结论

讯享网

在 JavaScript 开发中，对象的深度克隆是一个常见但容易被误解的话题。本文将探讨几种常用的克隆方法，揭示它们的局限性，并介绍真正有效的深度克隆技术。

许多开发者习惯使用展开运算符或来克隆对象，但这些方法实际上只能进行浅拷贝。

展开运算符的局限性：

const original = { name: "ZhangSan", address: { city: "Beijing" } }; const clone = { ...original }; clone.address.city = "Shanghai"; console.log(original.address.city); // 输出: "Shanghai"

讯享网

的问题：

讯享网const original = { name: "ZhangSan", address: { city: "Beijing" } }; const clone = Object.create(original); clone.address.city = "Nanjing"; console.log(original.address.city); // 输出: "Nanjing"

这两种方法都无法实现真正的深度克隆，因为它们只复制了对象的顶层属性。

对于简单对象，是一个有效的深度克隆方法：

const original = { name: "ZhangSan", address: { city: "Beijing" } }; const clone = JSON.parse(JSON.stringify(original)); clone.address.city = "Nanjing"; console.log(original.address.city); // 输出: "Beijing"

然而，这种方法也有局限性。它无法处理函数、、、、、Map 和 Set 等复杂数据类型。

对于需要处理复杂数据结构的场景，是一个更全面的解决方案：

讯享网import _ from 'lodash'; const original = {   name: "ZhangSan",   address: { city: "Beijing" },   skills: new Set(["JavaScript", "TypeScript"]),   greet: function() { console.log("Hello!"); } }; const clone = _.cloneDeep(original); clone.address.city = "Nanjing"; clone.skills.add("React"); console.log(original.address.city); // 输出: "Beijing" console.log(original.skills.has("React")); // 输出: false

能够正确处理嵌套对象、数组、函数，以及特殊的数据结构如 Set 和 Map。

在性能方面，通常对简单对象更快，而对复杂结构更可靠但速度较慢。

// 性能测试示例 const simpleObject = { a: 1, b: 2, c: 3 }; const complexObject = { / 复杂的嵌套结构 / };

console.time(‘JSON Simple’); JSON.parse(JSON.stringify(simpleObject)); console.timeEnd(‘JSON Simple’);

console.time(‘Lodash Simple’); _.cloneDeep(simpleObject); console.timeEnd(‘Lodash Simple’);

console.time(‘JSON Complex’); JSON.parse(JSON.stringify(complexObject)); console.timeEnd(‘JSON Complex’);

console.time(‘Lodash Complex’); _.cloneDeep(complexObject); console.timeEnd(‘Lodash Complex’);

在 JavaScript 和 TypeScript 中实现无突变的深度克隆可能比想象的更复杂。展开运算符和虽然常用，但不适合深度克隆。对于简单对象是一个快速有效的解决方案，而则是处理复杂数据结构的理想选择。

弄明白上面这些方法的优缺点对于我们如何选择合适的克隆策略非常重要。在实际前端开发中，应根据具体需求和数据结构的复杂性来选择适当的深度克隆方法。通过掌握这些技巧，前端开发者可以更有效地处理对象克隆，提高代码的健壮性和可维护性。

js深拷贝和浅拷贝如何实现（js深拷贝和浅拷贝如何实现循环）

相关推荐