拷贝浅拷贝的区别？如何实现一个深拷贝？-JavaScript面试指南

当前位置:　首页>> 技术小册>> JavaScript面试指南

深拷贝和浅拷贝都是用来复制一个对象的内容到另一个对象中的方法。

浅拷贝会复制一个对象的引用，新对象和原对象会指向同一个内存地址。修改新对象的属性值也会影响原对象的属性值。例如：

```
const obj1 = {a: 1, b: {c: 2}};
const obj2 = obj1; // 浅拷贝，obj2和obj1指向同一个内存地址

obj2.a = 3;
obj2.b.c = 4;

console.log(obj1.a); // 3
console.log(obj1.b.c); // 4
```
而深拷贝会复制一个对象的值，新对象和原对象的值相同，但是指向不同的内存地址，修改新对象的属性值不会影响原对象的属性值。例如：

```
const obj1 = {a: 1, b: {c: 2}};
const obj2 = JSON.parse(JSON.stringify(obj1)); // 深拷贝，使用JSON序列化和反序列化方法

obj2.a = 3;
obj2.b.c = 4;

console.log(obj1.a); // 1
console.log(obj1.b.c); // 2
```
在实现一个深拷贝时，可以使用递归方法遍历对象的属性，将每个属性复制到新对象中。以下是一个简单的实现：

```
function deepCopy(obj) {
  if (typeof obj !== 'object' || obj === null) { // 非对象和null直接返回
    return obj;
  }

const newObj = Array.isArray(obj) ? [] : {}; // 判断是数组还是对象，创建一个新的空数组或对象

for (let key in obj) { // 遍历对象的属性
    if (Object.prototype.hasOwnProperty.call(obj, key)) { // 判断是否是对象自身的属性
      newObj[key] = deepCopy(obj[key]); // 递归深拷贝
    }
  }

return newObj;
}

const obj1 = {a: 1, b: {c: 2}};
const obj2 = deepCopy(obj1); // 深拷贝

obj2.a = 3;
obj2.b.c = 4;

console.log(obj1.a); // 1
console.log(obj1.b.c); // 2
```

该分类下的相关小册推荐：

javascript设计模式原理与实战

剑指javascript-ES6

零基础学JavaScript

编程入门课：Javascript从入门到实战

npm script实战构建前端工作流

剑指javascript

经典设计模式Javascript版

Javascript-ES6与异步编程

JavaScript入门与进阶

Javascript编程指南

Javascript重点难点实例精讲（一）

Flutter核心技术与实战