深克隆（Deep Clone）和浅克隆（Shallow Clone）是在复制对象或数组时常用的两种概念。它们主要区别在于复制的深
深克隆（Deep Clone）：
深克隆是指完全复制一个对象或数组，包括对象或数组中的所有嵌套对象或数组。在深克隆中，复制的结果是一个全新的对象或数组，与原始对象或数组完全独立，修改复制后的对象或数组不会影响原始对象或数组。深克隆会递归复制所有嵌套的对象或数组，确保每个对象或数组都是独立的。
浅克隆（Shallow Clone）：
浅克隆是指复制一个对象或数组，但只复制对象或数组的第一层结构，而不会复制嵌套的对象或数组。在浅克隆中，复制的结果仅包含原始对象或数组的引用，而不是深层的复制。因此，修改复制后的对象或数组的第一层结构可能会影响原始对象或数组。文章来源：https://www.toymoban.com/news/detail-835641.html
总结起来，深克隆会复制对象或数组的所有层级，确保每个对象或数组都是独立的，而浅克隆只会复制第一层结构，复制的结果包含原始对象或数组的引用。文章来源地址https://www.toymoban.com/news/detail-835641.html
深克隆方法：
- 利用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);
}到了这里，关于JS 深克隆和浅克隆 浅析的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
