JS拷貝對象詳解

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()方法、展開運算符等。選擇合適的方法可以提高程序的性能。