JS拷贝对象详解

KIVED • 2025-04-13 11:45 • 编程

JS是一种灵活的编程语言，其中对象是JS编程的基础。JS拷贝对象是重要的问题之一，因为它会影响到程序的正确性和性能。本文从多个方面对JS拷贝对象进行详细阐述。

一、深拷贝和浅拷贝

JS拷贝对象有两种方法：深拷贝和浅拷贝。

1.浅拷贝

浅拷贝只是复制引用，新对象和原对象会指向同一块内存空间。如果修改新对象，原对象也会发生改变。

    
        // 示例1
        const obj1 = {a: 1, b: {c: 2}};
        const obj2 = obj1;
        obj2.a = 2;
        console.log(obj1); // {a: 2, b: {c: 2}}
        console.log(obj2); // {a: 2, b: {c: 2}}

        // 示例2
        const arr1 = [1, 2, [3, 4]];
        const arr2 = arr1;
        arr2[0] = 2;
        console.log(arr1); // [2, 2, [3, 4]]
        console.log(arr2); // [2, 2, [3, 4]]

2.深拷贝

深拷贝会复制对象的所有属性和嵌套对象，新的对象和原始对象不共享内存。如果修改新对象，原始对象不会发生改变。

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

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

            for (let key in obj) {
                if (obj.hasOwnProperty(key)) {
                    result[key] = deepClone(obj[key]);
                }
            }

            return result;
        }

        const obj1 = {a: 1, b: {c: 2}};
        const obj2 = deepClone(obj1);
        obj2.b.c = 3;
        console.log(obj1); // {a: 1, b: {c: 2}}
        console.log(obj2); // {a: 1, b: {c: 3}}

二、Object.assign()

Object.assign()方法可以复制一个或多个对象，并返回合并后的新对象。

1.合并多个对象

    
        // 示例
        const obj1 = {a: 1, b: 2};
        const obj2 = {c: 3, d: 4};
        const obj3 = {e: 5, f: 6};
        const obj4 = Object.assign(obj1, obj2, obj3);
        console.log(obj1); // {a: 1, b: 2, c: 3, d: 4, e: 5, f: 6}
        console.log(obj2); // {c: 3, d: 4}
        console.log(obj3); // {e: 5, f: 6}
        console.log(obj4); // {a: 1, b: 2, c: 3, d: 4, e: 5, f: 6}

2.给对象添加新属性

    
        // 示例
        const obj1 = {a: 1, b: 2};
        const obj2 = {c: 3, d: 4};
        const obj3 = {e: 5, f: 6};
        const obj4 = Object.assign({}, obj1, obj2, obj3, {g: 7});
        console.log(obj1); // {a: 1, b: 2}
        console.log(obj2); // {c: 3, d: 4}
        console.log(obj3); // {e: 5, f: 6}
        console.log(obj4); // {a: 1, b: 2, c: 3, d: 4, e: 5, f: 6, g: 7}

三、展开运算符

展开运算符可以快速将对象展开成多个属性。

    
        // 示例
        const obj1 = {a: 1, b: {c: 2}};
        const obj2 = {...obj1};
        obj2.b.c = 3;
        console.log(obj1); // {a: 1, b: {c: 2}}
        console.log(obj2); // {a: 1, b: {c: 3}}

        const arr1 = [1, 2, [3, 4]];
        const arr2 = [...arr1];
        arr2[0] = 2;
        console.log(arr1); // [1, 2, [3, 4]]
        console.log(arr2); // [2, 2, [3, 4]]

四、性能和递归次数

拷贝对象的方法越复杂，递归次数就越多，性能就越低。

    
        // 示例
        const obj1 = {a: 1, b: {c: 2}};
        const obj2 = JSON.parse(JSON.stringify(obj1));
        obj2.b.c = 3;
        console.log(obj1); // {a: 1, b: {c: 2}}
        console.log(obj2); // {a: 1, b: {c: 3}}

五、结论

JS拷贝对象有多种方法：深拷贝和浅拷贝、Object.assign()方法、展开运算符等。选择合适的方法可以提高程序的性能。

原创文章，作者：KIVED，如若转载，请注明出处：https://www.506064.com/n/369729.html