JS 深克隆和浅克隆 浅析

        深克隆（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);
}