当前位置： 技术文章>> JavaScript 中如何复制对象？
文章标题：JavaScript 中如何复制对象？
在JavaScript中，复制对象是一个常见且重要的操作，尤其是在处理复杂数据结构或需要避免直接修改原始数据的情况下。JavaScript是一种基于原型的语言，对象通过引用传递，这意味着当你将一个对象赋值给另一个变量时，你实际上是在复制该对象的引用，而不是对象本身。因此，直接赋值并不会创建对象的一个全新副本。为了真正复制一个对象，我们需要采取一些额外的步骤。下面，我将详细介绍几种在JavaScript中复制对象的方法，并适时地融入“码小课”这一元素，以体现其在编程学习中的价值。
### 1. 浅拷贝（Shallow Copy）
浅拷贝会创建一个新对象，这个新对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型（如数字、字符串、布尔值），拷贝的就是基本类型的值；如果属性是引用类型（如对象、数组），拷贝的就是内存地址，因此如果原始对象里的引用类型属性被修改，浅拷贝得到的新对象中的对应属性也会受到影响。
#### 方法一：使用Object.assign()
`Object.assign()` 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
```javascript
const original = { a: 1, b: { c: 2 } };
const copy = Object.assign({}, original);
console.log(copy); // { a: 1, b: { c: 2 } }
// 修改原始对象的嵌套对象
original.b.c = 3;
console.log(copy.b.c); // 3，说明浅拷贝的局限性
```
#### 方法二：展开运算符（Spread Operator）
展开运算符`...`允许一个表达式在某处展开为多个元素（在数组字面量中）或属性（在对象字面量中）。
```javascript
const original = { a: 1, b: { c: 2 } };
const copy = { ...original };
console.log(copy); // { a: 1, b: { c: 2 } }
// 同样，修改原始对象的嵌套对象会影响拷贝对象
original.b.c = 3;
console.log(copy.b.c); // 3
```
### 2. 深拷贝（Deep Copy）
深拷贝会递归地复制一个对象及其所有子对象，确保原始对象和拷贝对象完全独立，互不影响。
#### 方法一：使用JSON.parse()和JSON.stringify()
这是一种简单但有限制的深拷贝方法，它通过将对象转换为JSON字符串，然后再将字符串解析回对象来实现。然而，这种方法不能处理函数、`undefined`、`Symbol`等特殊类型的值，且会丢失对象的原型链。
```javascript
const original = { a: 1, b: { c: 2 } };
const copy = JSON.parse(JSON.stringify(original));
console.log(copy); // { a: 1, b: { c: 2 } }
// 修改原始对象不会影响拷贝对象
original.b.c = 3;
console.log(copy.b.c); // 2
```
#### 方法二：手动实现深拷贝函数
为了更灵活地处理各种数据类型和特殊情况，我们可以手动编写一个深拷贝函数。这个函数需要递归地检查每个属性，并根据其类型决定是复制值还是递归调用自身。
```javascript
function deepCopy(obj, hash = new WeakMap()) {
if (obj === null) return null; // null 的情况
if (obj instanceof Date) return new Date(obj); // 日期对象直接返回一个新的日期对象
if (obj instanceof RegExp) return new RegExp(obj); // 正则对象直接返回一个新的正则对象
// 如果循环引用了就用 weakMap 来解决
if (hash.has(obj)) return hash.get(obj);
let allDesc = Object.getOwnPropertyDescriptors(obj);
let clone = Object.create(Object.getPrototypeOf(obj), allDesc);
hash.set(obj, clone);
for (let key of Reflect.ownKeys(obj)) {
clone[key] = (typeof obj[key] === 'object' && obj[key] !== null)
? deepCopy(obj[key], hash)
: obj[key];
}
return clone;
}
const original = { a: 1, b: { c: 2 }, d: new Date(), e: /regex/gi, f: function() {} };
const copy = deepCopy(original);
console.log(copy); // 深度拷贝的对象
```
### 3. 使用库函数
在实际开发中，为了节省时间和减少错误，我们通常会使用现成的库来辅助实现深拷贝，如Lodash的`_.cloneDeep()`方法。
```javascript
// 假设已经通过npm或CDN引入了Lodash
const _ = require('lodash');
const original = { a: 1, b: { c: 2 } };
const copy = _.cloneDeep(original);
console.log(copy); // { a: 1, b: { c: 2 } }
// 修改原始对象不会影响拷贝对象
original.b.c = 3;
console.log(copy.b.c); // 2
```
### 总结
在JavaScript中，复制对象是一个需要仔细考虑的操作，特别是当对象包含嵌套对象或特殊类型（如函数、日期等）时。浅拷贝适用于简单场景，但深拷贝提供了更高的灵活性和安全性。无论是使用内置方法（如`Object.assign()`、展开运算符）、JSON方法，还是手动实现深拷贝函数，或是利用第三方库（如Lodash），选择哪种方法取决于具体的需求和场景。
在深入学习和实践这些技术时，不妨访问“码小课”网站，这里提供了丰富的编程教程和实战案例，能够帮助你更好地理解JavaScript中的对象复制机制，并掌握更多高级编程技巧。通过不断学习和实践，你将能够更加自信地处理各种复杂的编程问题。