JavaScript浅层克隆与深度克隆示例详解

JavaScript中的浅层克隆与深度克隆是两种不同的对象复制方式，它们主要处理对象和数组这类引用类型的数据。这两种克隆方法的区别在于处理对象内部引用值的方式，即对堆内存中对象的复制程度。 1. **浅层克隆**： 浅层克隆，又称为表面克隆，它创建一个新的对象，然后将源对象的属性值复制到新对象中。如果属性值是原始类型（如Number、Boolean、String、undefined、null），那么新旧对象将拥有独立的副本。但对于引用类型（如Array、Object、function等），浅克隆只会复制引用，新旧对象依然共享同一个堆内存中的对象。这意味着，如果其中一个对象修改了引用类型的属性，另一个对象的相应属性也会被改变。 ```javascript function shallowClone(origin, target) { var target = target || {}; for (var prop in origin) { target[prop] = origin[prop]; } return target; } var obj = { name: 'abc', age: '18', sex: 'male', card: ['a', 'b', 'c'], book: { name: 'ccc', sbook: { name: 'aaa' } } }; var newObj = shallowClone(obj); ``` 在这个例子中，`newObj` 是 `obj` 的浅层克隆，如果修改 `newObj.card[0]`，`obj.card[0]` 也会随之改变。 2. **深度克隆**： 深度克隆，又称为完全克隆，会在内存中创建一个新的对象，并将源对象的所有属性及其嵌套的引用类型都复制一份，确保新旧对象之间没有关联。这意味着即使修改了新对象的引用类型属性，也不会影响源对象。 深度克隆通常需要递归处理所有嵌套的引用类型。在处理数组时，可以创建一个新的数组并将原数组的元素逐个添加；处理对象时，可以创建一个新的对象并逐个复制属性。此外，还可以利用JSON序列化和反序列化实现深度克隆，但这种方法有一些限制，例如不能处理函数和循环引用。 ```javascript function deepClone(origin, target, hash = new WeakMap()) { if (origin === null) return origin; if (hash.has(origin)) return hash.get(origin); let target = new origin.constructor; hash.set(origin, target); for (let key in origin) { if (origin.hasOwnProperty(key)) { if (typeof origin[key] === 'object' && origin[key] !== null) { target[key] = deepClone(origin[key], null, hash); } else { target[key] = origin[key]; } } } return target; } ``` 在上述示例中，`deepClone` 函数会递归处理所有的嵌套对象和数组，确保创建一个完全独立的新对象。 总结一下，JavaScript 中的浅层克隆适用于只需要简单复制对象表面属性的情况，而深度克隆则适用于需要完全复制对象包括其所有嵌套引用类型的情况。在实际开发中，应根据具体需求选择合适的克隆方法，以避免不必要的副作用。