js中区分深拷贝与浅拷贝的实战过程

let A = [0,1,2]
let B = A
console.log(A === B);
A[0] = 3
console.log(A,B);

// 声明一个变量
let a = 1;

// 声明一个变量
let a = 1;
let b = a; //b变量复制a变量
console.log(a,b); //1 1

// 声明一个变量
let a = 1;
let b = a; //b变量复制a变量
console.log(a,b); //1 1 
// 修改a的值不影响b
a = 123;
console.log(a,b); //123 1

// 声明一个引用类型的值
let a = [0,1,2,3,4]

let a = [0,1,2,3,4]
let b = a //复制的是一个指针，而不是堆中的值

// 声明一个引用类型的值
let a = [0,1,2,3,4];
let b = a; //复制的是一个指针，而不是堆中的值
console.log(a === b);
a[0] = 1; //改变a数组值，b数组跟着改变(浅拷贝)
console.log(a,b);

// 浅拷贝
let arr = [1,"hello",{name:"张三",age:21}]
let copyArr = arr
console.log(arr === copyArr); //true
arr[1] = "您好"
console.log("浅拷贝",arr, copyArr);

// JSON对象方法实现深拷贝
let arr = [1,"hello",{name:"张三",age:21}]
let newArr = JSON.parse(JSON.stringify(arr)) //将arr数组转换为字符串，再作为参数转化为对象
arr[1] = "您好"
arr[2].name = "法外狂徒"
console.log("深拷贝",arr, newArr);

// 手写递归实现深拷贝
function clone(target) {
    if (typeof target === 'object') {
        // 创建一个新对象
        let cloneTarget = {};
        // 遍历需要克隆的对象
        for (const key in target) {
            // 将需要克隆对象的属性执行深拷贝后依次添加到新对象上
            cloneTarget[key] = clone(target[key]);
        }
        // 返回克隆对象
        return cloneTarget;
    } else {
        return target;
    }
};
// 模拟拷贝对象
const person = {
    name: "李小白",
    age: 18,
    job: {
        name:"web前端",
        salary:"15k",
        address:"成都"
    }
};
// 将需要克隆的对象传递给clone函数作为参数，接收一个克隆对象作为返回结果
let newTarget = clone(person)
//修改原对象属性
person["name"] = "李大白" 
person["job"]["salary"] = "25k" 
console.log(person,newTarget); //实现深拷贝

function clone(target) {
    if (typeof target === 'object') {
        let isArr = Array.isArray(target)
        // 判断传入的参数是数组吗 ? 是则赋值[] : 否则赋值{}
        let cloneTarget = isArr ? [] : {};
        // 遍历需要克隆的对象
        for (const key in target) {
            // 将需要克隆对象的属性执行深拷贝后依次添加到新对象上
            cloneTarget[key] = clone(target[key]);
        }
        // 返回克隆对象
        return cloneTarget;
    } else {
        return target;
    }
};

$.extend( [deep ], target, object1 [, objectN ] )

let arr = ["李小白",18,["前端","15k"],21]
// true:开启深拷贝,目标对象:[],原对象:arr
let cloneArr = $.extend(true, [], arr)
arr[0] = "李大白";
arr[2][0] = "java";
console.log(arr, cloneArr);

let arr = ["李小白",18,["前端","15k"],21]
// false:不开启深拷贝,目标对象:[],原对象:arr
let cloneArr = $.extend(false, [], arr)
arr[0] = "李大白";
arr[2][0] = "java";
console.log(arr, cloneArr);

// slice()
let arr = [0,1,["hello","world"]];
let cloneArr = arr.slice();
arr[0] = "零";
arr[2][0] = "hello2022"
console.log(arr,cloneArr);

// concat()
let arr = [0,1,["hello","world"]];
let cloneArr = arr.concat();
arr[0] = "零";
arr[2][0] = "hello2022"
console.log(arr,cloneArr);