clone和cloneDeep的区别
时间: 2023-08-16 20:13:27 浏览: 73
`clone`和`cloneDeep`都是用于创建对象的副本的函数,但它们在复制对象时的方式略有不同。
`clone`函数通常用于浅拷贝,它创建一个新对象,并将原始对象的属性值复制给新对象。如果原始对象的属性是基本数据类型(如字符串、数字等),那么新对象的属性将是原始值的拷贝。但如果原始对象的属性是引用类型(如数组、对象等),那么新对象的属性将引用原始对象属性的相同引用。
示例代码:
```javascript
const obj = {
name: "John",
age: 25,
hobbies: ["reading", "coding"]
};
const clonedObj = Object.assign({}, obj);
clonedObj.age = 30;
clonedObj.hobbies.push("traveling");
console.log(obj); // { name: 'John', age: 25, hobbies: [ 'reading', 'coding', 'traveling' ] }
console.log(clonedObj); // { name: 'John', age: 30, hobbies: [ 'reading', 'coding', 'traveling' ] }
```
可以看到,修改`clonedObj`的`age`属性不会影响到原始对象`obj`,但修改`clonedObj`的`hobbies`数组会影响到原始对象。
相比之下,`cloneDeep`函数用于深拷贝,它会递归复制对象及其所有嵌套属性,确保新对象与原始对象完全独立。这意味着无论是原始对象的基本数据类型属性还是引用类型属性,都会在新对象中得到完全独立的副本。
示例代码:
```javascript
const obj = {
name: "John",
age: 25,
hobbies: ["reading", "coding"]
};
const clonedObj = JSON.parse(JSON.stringify(obj));
clonedObj.age = 30;
clonedObj.hobbies.push("traveling");
console.log(obj); // { name: 'John', age: 25, hobbies: [ 'reading', 'coding' ] }
console.log(clonedObj); // { name: 'John', age: 30, hobbies: [ 'reading', 'coding', 'traveling' ] }
```
可以看到,修改`clonedObj`的属性不会对原始对象产生任何影响,因为它们是独立的副本。
需要注意的是,使用`cloneDeep`函数需要将对象转换为JSON字符串,然后再将其解析回JavaScript对象。这种方法可以确保深层嵌套的引用类型属性也能被正确拷贝,但也有一些限制,例如无法复制函数和特殊类型(如正则表达式)等。