在JavaScript中,深拷贝和浅拷贝的主要区别在于它们处理对象属性的方式。
浅拷贝(Shallow Copy)只复制对象的引用,而不是实际的对象。因此,如果你修改了复制的对象,原始对象也会受到影响。
深拷贝(Deep Copy)则会创建一个新的对象,并复制原始对象的所有元素。这样,如果你修改了复制的对象,原始对象不会受到影响。
浅拷贝示例:
- let obj1 = { a: 1, b: { c: 2 } };
- let obj2 = Object.assign({}, obj1);
-
- console.log(obj1); // { a: 1, b: { c: 2 } }
- console.log(obj2); // { a: 1, b: { c: 2 } }
-
- obj2.a = 2;
- console.log(obj1); // { a: 1, b: { c: 2 } }
- console.log(obj2); // { a: 2, b: { c: 2 } }
-
- obj2.b.c = 3;
- console.log(obj1); // { a: 1, b: { c: 3 } }
- console.log(obj2); // { a: 2, b: { c: 3 } }
在这个例子中,Object.assign({}, obj1) 创建了一个新对象 obj2,并将 obj1 的所有属性复制到 obj2。但是,当修改 obj2.b.c 时,obj1.b.c 也被修改了,因为 obj1 和 obj2 共享同一个 b 对象。
深拷贝示例:
- let obj1 = { a: 1, b: { c: 2 } };
- let obj2 = JSON.parse(JSON.stringify(obj1));
-
- console.log(obj1); // { a: 1, b: { c: 2 } }
- console.log(obj2); // { a: 1, b: { c: 2 } }
-
- obj2.a = 2;
- console.log(obj1); // { a: 1, b: { c: 2 } }
- console.log(obj2); // { a: 2, b: { c: 2 } }
-
- obj2.b.c = 3;
- console.log(obj1); // { a: 1, b: { c: 2 } }
- console.log(obj2); // { a: 2, b: { c: 3 } }
在这个例子中,JSON.parse(JSON.stringify(obj1)) 创建了一个新对象 obj2,并将 obj1 的所有属性复制到 obj2。然后,修改 obj2.b.c 并不会影响 obj1.b.c,因为 obj1 和 obj2 有不同的 b 对象。这是因为 JSON.stringify 方法将对象转换为 JSON 字符串,然后 JSON.parse 方法将 JSON 字符串转换回新对象。在这个过程中,所有的对象都会被转换为新的对象。