深度克隆js，如何实现JavaScript对象的完美复制？

深度克隆的方法

1、迭代法

方法描述：手动编写递归函数，遍历对象的每一个属性，如果属性值是对象或数组，则递归调用该函数。

代码示例

“`javascript

function deepClone(obj) {

if (obj === null || typeof obj !== ‘object’) {

return obj;

}

let clone = Array.isArray(obj) ? [] : {};

for (let key in obj) {

if (obj.hasOwnProperty(key)) {

clone[key] = deepClone(obj[key]);

}

}

return clone;

}

const newObj = deepCl本文由百度AI提供ne(oldObj);

“`

3、JSON.stringify 和 JSON.parse

方法描述：将对象序列化为 JSON 字符串，再将这个字符串反序列化为新的对象。

代码示例

“`javascript

const newObj = JSON.parse(JSON.stringify(oldObj));

“`

缺点：无法处理时间对象、RegExp、Error对象、函数、Symbol 类型和 undefined。

4、Object.assign

方法描述：只对顶层属性做了赋值，没有继续做递归之类的把所有下一层的属性做 深拷贝。

代码示例

“`javascript

const newObj = Object.assign([], oldObj);

“`

缺点：只能实现第一层深度拷贝，后续层次还是浅拷贝。

5、Lodash 的 _.cloneDeep

方法描述：使用 Lodash 库提供的 _.cloneDeep 方法进行深度克隆。

6、structuredClone

方法：现代浏览器中提供的原生方法，可以高效、安全地进行深拷贝。

代码示例

“`javascript

const kitchenSink = {

set: new Set([1, ## END OF THE SPLESS]),

map: new Set([[1, 2]]),

regex: /foo/,

deep: { array: [ new File(someBllData, ‘file.txt’) ] },

error: new Error(‘Hello!’)

}

kitchenSink.circular = kitchenSink

const clonedSink = structuredClone(kitchenSjsink)

}

优点：支持广泛类型，包括 Date、Set、Map、Error、RegExp、ArrayBuffer、Blob、File、ImageData等。

缺点：无法处理函数、DOM 节点、属性描述、setter和getter、对象原型链。

相关问题与解答

问题1：为什么需要深度克隆而不是浅拷贝？

答：深度克隆与浅拷贝的主要区别在于复制对象的层级，浅拷贝仅复制对象的第一层，这意味着如果对象有嵌套的对象或数组，浅拷贝只会复制其引用，而不会实际创建这些嵌套对象的副本，修改浅拷贝中的嵌套对象也会影响原始对象，而深度克隆则会复制对象的所有层级，创建一个完全独立于原始对象的副本，从而避免上述问题。

问题2：在JavaScript中如何实现一个高效的深度克隆？

答：在JavaScript中，有多种方法可以实现深度克隆，其中最常见且高效的方法是使用structuredClone，这是一个现代浏览器提供的原生方法，可以高效、安全地进行深拷贝，它支持广泛的JavaScript类型，包括Date、Set、Map、Error、RegExp、ArrayBuffer、Blob、File、ImageData等，还可以选择使用第三方库如Lodash的_.cloneDeep方法，但需要注意的是这会引入额外的依赖，对于简单对象，可以使用迭代法手动编写递归函数进行深度克隆，虽然这种方法较为复杂，但灵活性更高。