JS 深浅拷贝区别案例（代码实现）

浅拷贝：

// 浅拷贝
// newObj的值发生改变时，oldObj的值也会发生改变
// 原对象 oldObj
const oldObj = {
    name: "哈默",
    age: 20,
    colors: ['orange', 'green', 'blue'],
    friend: {
        name: "小夏"
    }
}

const newObj1=oldObj;
newObj1.name="小野";
// JS中是浅拷贝，修改一个对象的属性值，另一个对象的属性值也会改变
console.log('oldObj',oldObj);
console.log('newObj1',newObj1);

运行结果：

深拷贝：

//深拷贝
//newObj的值发生改变时，oldObj的值不发生改变

//原对象
const oldObj = {
    name: "哈默",
    age: 20,
    colors: ['orange', 'green', 'blue'],
    friend: {
        name: "小夏"
    }
}

//实现深拷贝
function deepClone(obj = {}) {
    // 传入的是数组或者对象,继续往下执行
    if (typeof obj !== 'object' || obj == null) {
        return obj
    }

    let result;

    //如果对象是数组的话，赋值空数组，否则赋值空对象
    if (obj instanceof Array) {
        result = []
    } else {
        result = {}
    }

    //用 for 循环实现新旧对象/数组的属性赋值
    for (let key in obj) {
        // 只深拷贝一层,只能实现一层的深拷贝
        // result[key]=obj[key]

        // 递归拷贝
         result[key]=deepClone(obj[key])
    }
    return result;
}

const newObj2 = deepClone(oldObj);
// 一层
newObj2.name = "小野";
// 多层
newObj2.friend.name = "小野";
console.log('oldObj', oldObj);
console.log('newObj2', newObj2);

运行结果：