当前位置：首页 > news >正文

使用JavaScript实现深浅拷贝

news 来源：原创 2025/5/15 2:35:54

1. 拷贝的基本概念和必要性

在 JavaScript 中，数据类型分为基本数据类型（如 Number、String、Boolean、Null、Undefined、Symbol）和引用数据类型（如 Object、Array）。基本数据类型存储的是值本身，而引用数据类型存储的是内存地址。当需要对数据进行操作且不想影响原始数据时，就需要进行拷贝。

2. 浅拷贝（Shallow Copy）

概念

浅拷贝创建一个新对象，新对象的顶层属性是原始对象属性的副本，但如果原始对象的属性是引用类型，新对象和原始对象会共享这些引用类型属性的内存地址。也就是说，修改新对象中引用类型的属性会影响原始对象中对应的属性。

实现方式

扩展运算符（Spread Operator）：常用于数组和对象的浅拷贝。

// 数组浅拷贝
const originalArray = [1, [2, 3]];
const shallowCopiedArray = [...originalArray];
shallowCopiedArray[1][0] = 9;
console.log(originalArray); // 输出: [1, [9, 3]]

// 对象浅拷贝
const originalObject = { a: 1, b: { c: 2 } };
const shallowCopiedObject = { ...originalObject };
shallowCopiedObject.b.c = 9;
console.log(originalObject.b.c); // 输出: 9

Object.assign()：用于将一个或多个源对象的所有可枚举属性复制到目标对象。

const original = { a: 1, b: { c: 2 } };
const shallowCopy = Object.assign({}, original);
shallowCopy.b.c = 9;
console.log(original.b.c); // 输出: 9

Array.prototype.slice()：常用于数组的浅拷贝。

const arr = [1, [2, 3]];
const newArr = arr.slice();
newArr[1][0] = 9;
console.log(arr); // 输出: [1, [9, 3]]

3. 深拷贝（Deep Copy）

概念

深拷贝会递归地复制对象及其所有嵌套的属性，创建一个完全独立的新对象，新对象和原始对象在内存中没有任何共享部分。修改新对象的任何属性都不会影响原始对象。

实现方式

JSON.parse(JSON.stringify())：这是一种简单的深拷贝方法，但有局限性。它不能处理函数、Symbol 类型的属性、Date 对象、RegExp 对象等。

const original = { a: 1, b: { c: 2 } };
const deepCopy = JSON.parse(JSON.stringify(original));
deepCopy.b.c = 9;
console.log(original.b.c); // 输出: 2

递归实现：自定义函数递归地复制对象和数组。

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

    let clone;
    if (Array.isArray(obj)) {
        clone = [];
        for (let i = 0; i < obj.length; i++) {
            clone[i] = deepClone(obj[i]);
        }
    } else {
        clone = {};
        for (let key in obj) {
            if (obj.hasOwnProperty(key)) {
                clone[key] = deepClone(obj[key]);
            }
        }
    }
    return clone;
}

const original = { a: 1, b: { c: 2 } };
const deepCopy = deepClone(original);
deepCopy.b.c = 9;
console.log(original.b.c); // 输出: 2