IT评测·应用市场-qidao123.com技术社区

标题: js 对象深拷贝的五种方法 [打印本页]

作者: 张裕 时间: 2025-3-28 10:27
标题: js 对象深拷贝的五种方法
js 对象深拷贝

今天遇到一个bug ，子组件页面修改了内容，但是按了取消生存按钮，没有将数据传回父组件的，但是父组件的数据改了，缘故起因是通过子组件接受父组件的参数对象层级深没有做深拷贝的缘故起因。
在 JavaScript 中，深拷贝是指复制一个对象及其所有嵌套对象的完整副本，而不是仅仅复制引用。以下是几种实现深拷贝的方法：
方法 1：使用 JSON.parse 和 JSON.stringify

这是最简朴的方法，但有一些限定（比方，无法拷贝函数、undefined、Symbol 等）。

const obj = { a: 1, b: { c: 2 } };
const deepCopy = JSON.parse(JSON.stringify(obj));
console.log(deepCopy); // { a: 1, b: { c: 2 } }

复制代码

注意：

无法拷贝函数、undefined、Symbol。
不支持循环引用。

方法 2：使用递归实现深拷贝

手动实现一个递归函数来处理对象和数组。

function deepClone(obj) {
if (obj === null || typeof obj !== "object") {
return obj; // 基本类型直接返回
}
// 创建一个新对象或数组
const copy = Array.isArray(obj) ? [] : {};
for (const key in obj) {
if (obj.hasOwnProperty(key)) {
copy[key] = deepClone(obj[key]); // 递归拷贝
}
}
return copy;
}
const obj = { a: 1, b: { c: 2 }, d: [3, 4] };
const deepCopy = deepClone(obj);
console.log(deepCopy); // { a: 1, b: { c: 2 }, d: [3, 4] }

复制代码

方法 3：使用 lodash 库

lodash 是一个流行的 JavaScript 工具库，此中的 cloneDeep 方法可以轻松实现深拷贝。

import _ from "lodash";
const obj = { a: 1, b: { c: 2 }, d: [3, 4] };
const deepCopy = _.cloneDeep(obj);
console.log(deepCopy); // { a: 1, b: { c: 2 }, d: [3, 4] }

复制代码

长处：

支持复杂对象（如循环引用）。
可靠且易用。

方法 4：使用 structuredClone（现代浏览器支持）

structuredClone 是一种原生方法，用于深拷贝对象。

const obj = { a: 1, b: { c: 2 }, d: [3, 4] };
const deepCopy = structuredClone(obj);
console.log(deepCopy); // { a: 1, b: { c: 2 }, d: [3, 4] }

复制代码

长处：

支持循环引用。
原生方法，性能较好。

注意：

仅在现代浏览器和 Node.js 17+ 中支持。

方法 5：使用 Object.create 和递归

通过 Object.create 创建新对象，并递归拷贝属性。

function deepClone(obj) {
if (obj === null || typeof obj !== "object") {
return obj;
}
const copy = Object.create(Object.getPrototypeOf(obj));
for (const key of Object.keys(obj)) {
copy[key] = deepClone(obj[key]);
}
return copy;
}
const obj = { a: 1, b: { c: 2 }, d: [3, 4] };
const deepCopy = deepClone(obj);
console.log(deepCopy); // { a: 1, b: { c: 2 }, d: [3, 4] }

复制代码

总结

简朴对象：可以使用 JSON.parse(JSON.stringify(obj)。
复杂对象：保举使用 lodash.cloneDeep 或 structuredClone。
自界说实现：可以使用递归函数处理特殊需求。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 IT评测·应用市场-qidao123.com技术社区 (https://dis.qidao123.com/)