js深拷贝和浅拷贝的区别

JavaScript中的深拷贝和浅拷贝是指在复制对象或数组时,是否复制其内部的子对象或子数组。

浅拷贝只复制对象或数组的第一层,而不会复制其内部的子对象或子数组。这意味着,如果原始对象或数组中的子对象或子数组发生了变化,那么浅拷贝后的对象或数组也会受到影响。

深拷贝则会递归复制对象或数组的所有子对象或子数组,直到所有子对象或子数组都被复制完毕。这意味着,即使原始对象或数组中的子对象或子数组发生了变化,深拷贝后的对象或数组也不会受到影响。

因此,深拷贝比浅拷贝更安全,但也更耗费资源。在实际应用中,需要根据具体情况选择使用哪种拷贝方式。

在JavaScript中,浅拷贝可以使用Object.assign()方法或展开运算符(…)来实现。例如:

// 使用Object.assign()方法进行浅拷贝
const obj1 = {a: 1, b: {c: 2}};
const obj2 = Object.assign({}, obj1);
obj2.b.c = 3;
console.log(obj1); // {a: 1, b: {c: 3}}
console.log(obj2); // {a: 1, b: {c: 3}}

// 使用展开运算符进行浅拷贝
const arr1 = [1, 2, [3, 4]];
const arr2 = [...arr1];
arr2[2][0] = 5;
console.log(arr1); // [1, 2, [5, 4]]
console.log(arr2); // [1, 2, [5, 4]]

而深拷贝则需要使用递归或第三方库来实现。例如,可以使用JSON.parse(JSON.stringify(obj))来进行深拷贝,但该方法有一些限制,例如无法复制函数、正则表达式等特殊类型的数据。因此,更选择是使用第三方库,例如lodash的cloneDeep()方法。例如:

// 使用JSON.parse(JSON.stringify(obj))进行深拷贝
const obj1 = {a: 1, b: {c: 2}};
const obj2 = JSON.parse(JSON.stringify(obj1));
obj2.b.c = 3;
console.log(obj1); // {a: 1, b: {c: 2}}
console.log(obj2); // {a: 1, b: {c: 3}}

// 使用lodash的cloneDeep()方法进行深拷贝
const _ = require('lodash');
const arr1 = [1, 2, [3, 4]];
const arr2 = _.cloneDeep(arr1);
arr2[2][0] = 5;
console.log(arr1); // [1, 2, [3, 4]]
console.log(arr2); // [1, 2, [5, 4]]