浅拷贝与深拷贝

60 阅读2分钟

JavaScript的对象拷贝,有 浅拷贝深拷贝 两种概念

浅拷贝 复制了对象的基本结构,但对于嵌套的对象或数组,只复制了引用。

深拷贝 则是创建一个完全独立的新对象,递归地复制所有嵌套的对象和数组。以下是关于浅拷贝和深拷贝的详细整理和归纳

  • 浅拷贝 Shallow Copy

使用 Object.assign()

// 创建一个源对象
const sourceObj = { a: 1, b: { c: 2 } };

// 使用 Object.assign() 进行浅拷贝
const shallowCopy = Object.assign({}, sourceObj);

// 修改拷贝后的对象属性
shallowCopy.a = 5;
shallowCopy.b.c = 10;

console.log(sourceObj);      // { a: 1, b: { c: 10 } }
console.log(shallowCopy);    // { a: 5, b: { c: 10 } }

使用扩展运算符(Spread Operator)

// 创建一个源对象
const sourceObj = { a: 1, b: { c: 2 } };

// 使用扩展运算符进行浅拷贝
const shallowCopy = { ...sourceObj };

// 修改拷贝后的对象属性
shallowCopy.a = 5;
shallowCopy.b.c = 10;

console.log(sourceObj);      // { a: 1, b: { c: 10 } }
console.log(shallowCopy);    // { a: 5, b: { c: 10 } }
  • 深拷贝(Deep Copy)

使用 JSON 序列化与解析

// 创建一个源对象
const sourceObj = { a: 1, b: { c: 2 } };

// 使用 JSON 序列化与解析进行深拷贝
const deepCopy = JSON.parse(JSON.stringify(sourceObj));

// 修改拷贝后的对象属性
deepCopy.a = 5;
deepCopy.b.c = 10;

console.log(sourceObj);      // { a: 1, b: { c: 2 } }
console.log(deepCopy);       // { a: 5, b: { c: 10 } }

使用递归实现深拷贝函数

function deepClone(obj) {
    if (obj === null || typeof obj !== 'object') {
        return obj;
    }

    const copy = Array.isArray(obj) ? [] : {};

    for (const key in obj) {
        if (Object.prototype.hasOwnProperty.call(obj, key)) {
            copy[key] = deepClone(obj[key]);
        }
    }

    return copy;
}

// 创建一个源对象
const sourceObj = { a: 1, b: { c: 2 } };

// 使用自定义的深拷贝函数
const deepCopy = deepClone(sourceObj);

// 修改拷贝后的对象属性
deepCopy.a = 5;
deepCopy.b.c = 10;

console.log(sourceObj);      // { a: 1, b: { c: 2 } }
console.log(deepCopy);       // { a: 5, b: { c: 10 } }

浅拷贝通常在对象结构较简单且不涉及嵌套引用时使用,而深拷贝则适用于需要完全独立副本的情况