深克隆（Deep Clone）和浅克隆（Shallow Clone）是在复制对象或数组时常用的两种概念。它们主要区别在于复制的深
深克隆（Deep Clone）：
深克隆是指完全复制一个对象或数组，包括对象或数组中的所有嵌套对象或数组。在深克隆中，复制的结果是一个全新的对象或数组，与原始对象或数组完全独立，修改复制后的对象或数组不会影响原始对象或数组。深克隆会递归复制所有嵌套的对象或数组，确保每个对象或数组都是独立的。
浅克隆（Shallow Clone）：
浅克隆是指复制一个对象或数组，但只复制对象或数组的第一层结构，而不会复制嵌套的对象或数组。在浅克隆中，复制的结果仅包含原始对象或数组的引用，而不是深层的复制。因此，修改复制后的对象或数组的第一层结构可能会影响原始对象或数组。
总结起来，深克隆会复制对象或数组的所有层级，确保每个对象或数组都是独立的，而浅克隆只会复制第一层结构，复制的结果包含原始对象或数组的引用。
深克隆方法：
- 利用JSON序列化和反序列化
const originalArray = [1, 2, [3, 4]];
const deepCloneArray = JSON.parse(JSON.stringify(originalArray));originalArray[2][0] = 300; // 修改原数组的第三个元素中的第一个元素console.log(originalArray); // [1, 2, [300, 4]]
console.log(deepCloneArray); // [1, 2, [3, 4]]，不受原数组修改的影响- 使用递归
function deepCloneArray(arr) {let clone = [];arr.forEach(item => {if (Array.isArray(item)) {clone.push(deepCloneArray(item));} else {clone.push(item);}});return clone;
}const originalArray = [1, 2, [3, 4]];
const deepCloneArray = deepCloneArray(originalArray);originalArray[2][0] = 300; // 修改原数组的第三个元素中的第一个元素console.log(originalArray); // [1, 2, [300, 4]]
console.log(deepCloneArray); // [1, 2, [3, 4]]，不受原数组修改的影响
- 使用Lodash库
const _ = require('lodash');
const deepClone = (arr) => {return _.cloneDeep(arr);
}
- 使用Map函数
function deepCloneArray(array) {return array.map(item => {if (Array.isArray(item)) {return deepCloneArray(item); // 递归调用深克隆函数} else if (typeof item === 'object' && item !== null) {return deepCloneObject(item); // 递归调用深克隆函数} else {return item; // 基本数据类型直接返回}});
}function deepCloneObject(obj) {let clonedObj = {};for (let key in obj) {if (Array.isArray(obj[key])) {clonedObj[key] = deepCloneArray(obj[key]); // 对数组进行深克隆} else if (typeof obj[key] === 'object' && obj[key] !== null) {clonedObj[key] = deepCloneObject(obj[key]); // 对对象进行深克隆} else {clonedObj[key] = obj[key]; // 基本数据类型直接复制}}return clonedObj;
}// 示例
const originalArray = [1, 2, [3, 4], {a: 5, b: [6, 7]}];
const clonedArray = deepCloneArray(originalArray);console.log(originalArray); // 原始数组
console.log(clonedArray); // 深克隆后的数组
浅克隆方法：
- 直接赋值
- 使用slice()方法
const originalArray = [1, 2, [3, 4]];
const shallowCloneArray = originalArray.slice();originalArray[2][0] = 300; // 修改原数组的第三个元素中的第一个元素console.log(originalArray); // [1, 2, [300, 4]]
console.log(shallowCloneArray); // [1, 2, [300, 4]]，受原数组修改的影响
- 使用concat()方法
const originalArray = [1, 2, [3, 4]];
const shallowCloneArray = originalArray.concat();originalArray[2][0] = 300; // 修改原数组的第三个元素中的第一个元素console.log(originalArray); // [1, 2, [300, 4]]
console.log(shallowCloneArray); // [1, 2, [300, 4]]，受原数组修改的影响
- 使用扩展操作符
const shallowClone = (arr) => {return [...arr];
}
- 使用Array.from方法
const shallowClone = (arr) => {return Array.from(arr);
}
- 使用Object.assign()方法
const shallowClone = (arr) => {return Object.assign([], arr);
}
)
