js clone|极客笔记

js clone

在JavaScript中，克隆是一个非常常见的操作。它允许我们创建对象或数据的副本，而不必创建全新的对象。这在很多情况下都非常有用，比如需要备份数据，或者在修改对象时保留原始状态。

克隆可以分为浅克隆和深克隆两种类型。浅克隆只会复制对象的引用，而不会复制对象的所有属性和方法。而深克隆则会复制对象及其所有子对象的属性和方法。

浅克隆

浅克隆只复制对象的引用，不会复制对象的所有属性和方法。这意味着，当我们修改克隆对象时，原始对象也会受到影响。

在JavaScript中，可以使用一些方法来进行浅克隆。下面是一些常用的浅克隆方法。

Object.assign()

Object.assign()方法用于将一个或多个源对象的所有可枚举属性复制到目标对象中。这样可以创建一个新的对象，拥有与原始对象相同的属性。然而，如果源对象的属性是对象或数组，则仅会复制引用。

let obj1 = { name: "John", age: 30 };
let obj2 = Object.assign({}, obj1);

console.log(obj2); // { name: "John", age: 30 }

obj2.age = 40;

console.log(obj1); // { name: "John", age: 30 }
console.log(obj2); // { name: "John", age: 40 }

在上面的示例中，我们使用Object.assign()方法将obj1的属性复制到了一个新的对象obj2中。然后我们修改了obj2的age属性，obj1的age属性并没有改变。

扩展运算符（…）

扩展运算符（…）也可以用于进行浅克隆。它可以展开一个对象或数组，并将其复制到目标对象中。

let obj1 = { name: "John", age: 30 };
let obj2 = { ...obj1 };

console.log(obj2); // { name: "John", age: 30 }

obj2.age = 40;

console.log(obj1); // { name: "John", age: 30 }
console.log(obj2); // { name: "John", age: 40 }

在上面的示例中，我们使用扩展运算符将obj1的属性复制到了一个新的对象obj2中。然后我们修改了obj2的age属性，obj1的age属性并没有改变。

深克隆

深克隆会复制对象及其所有子对象的属性和方法，而不仅仅是对象的引用。这意味着，当我们修改克隆对象时，原始对象不会受到影响。

在JavaScript中，深克隆是更复杂的操作。下面是一些常用的深克隆方法。

JSON.parse()和JSON.stringify()

使用JSON.parse()和JSON.stringify()组合可以实现深克隆。我们可以将对象转换为字符串，然后将字符串转换为新的对象。

let obj1 = { name: "John", age: 30 };
let obj2 = JSON.parse(JSON.stringify(obj1));

console.log(obj2); // { name: "John", age: 30 }

obj2.age = 40;

console.log(obj1); // { name: "John", age: 30 }
console.log(obj2); // { name: "John", age: 40 }

在上面的示例中，我们使用JSON.stringify()将obj1转换为字符串，然后使用JSON.parse()将字符串转换为新的对象obj2。然后我们修改了obj2的age属性，obj1的age属性并没有改变。

需要注意的是，这种方法有一些限制。例如，它无法复制函数和正则表达式对象。

lodash.cloneDeep()

lodash是一个流行的JavaScript工具库，提供了许多实用的方法，包括cloneDeep()方法，可以实现深克隆。

首先，我们需要使用npm或yarn安装lodash库。

npm install lodash

const _ = require('lodash');

let obj1 = { name: "John", age: 30 };
let obj2 = _.cloneDeep(obj1);

console.log(obj2); // { name: "John", age: 30 }

obj2.age = 40;

console.log(obj1); // { name: "John", age: 30 }
console.log(obj2); // { name: "John", age: 40 }

在上面的示例中，我们使用_.cloneDeep()方法将obj1深克隆到一个新的对象obj2中。然后我们修改了obj2的age属性，obj1的age属性并没有改变。

lodash的cloneDeep()方法非常强大，可以正确处理各种类型的对象和数据。