首頁  >  問答  >  主體

javascript - js裡面的clone方法有什麼用?

有時候對數組之類的操作的時候,會使用clone方法,感覺不使用這個直接賦值也可以啊,這樣做有什麼好處?為了省內存?還有什麼淺拷貝深拷貝之類的,原諒我是小白。 。

大家讲道理大家讲道理2696 天前766

全部回覆(3)我來回復

  • typecho

    typecho2017-06-26 10:54:02

    好處就是,不同於“=”,clone的數組是在記憶體中是獨立的,你可以對它為所欲為。

    js中,陣列和物件都屬於引用型別。

    const arr = [1, 2, 3, 4, 5, 6];
    const arr1 = arr; // 直接赋值,arr1指向的是arr的内存,也就是说arr发生改变时,arr1也会被改变
    arr.push(123);
    console.log(arr1); // [1, 2, 3, 4, 5, 6, 123]
    
    const arr = [1, 2, 3, 4, 5, 6];
    const arr1 = arr.slice(0); // 克隆了一个arr1,arr与arr1指向不同的内存,arr的改变并不会影响到arr1
    arr.push(123);
    console.log(arr1); // [1, 2, 3, 4, 5, 6]
    

    所以,克隆的功能就是用來新產生一份數據,不污染原來的數據。

    至於深拷貝與淺拷貝:

    const obj1 = {
        name: 'Ash',
        class: {
            a: 1,
            b: 2,
        }
    };
    
    // 浅拷贝
    const obj2 = {};
    for (let key in obj1) {
        obj2[key] = obj1[key];
    }
    
    // 深拷贝
    const copyObj = (obj) => {
        const newObj = {};
        for (let key in obj) {
            if (typeof obj[key] !== 'object') {
                newObj[key] = obj[key];
            } else {
                newObj[key] = copyObj(obj[key]);
            }
        }
        return newObj;
    }
    const obj3 = copyObj(obj1);
    
    obj1.name = 'Coco';
    obj1.class.a = 100;
    console.log(obj2.name, obj2.class.a); // Ash 100
    console.log(obj3.name, obj3.class.a); // Ash 1

    可以看到,淺拷貝與深拷貝的區別在於:淺拷貝只是遍歷了obj1的第一層,然後把obj1的每個屬性都賦值給了obj2;而深拷貝則不會,當屬性值為對象時,深拷貝會new一個空對象,然後把對象的值賦值給這個空對象,在傳回這個空對像作為obj3的屬性。

    回覆
    0
  • 给我你的怀抱

    给我你的怀抱2017-06-26 10:54:02

    JS 程式設計中很重要的一個原則是「不是你的物件不要動」

    做個形象的比喻,我借給你一本書(object),我以為你只是要閱讀(read),你卻拿去練字(write),這本書還給我我都沒辦法在讀到正常的內容了。

    而 deepClone 就解決了這個問題,我給你一本書,你去複印一下,書原樣還給我,複印本你就可以隨意處置了。

    回覆
    0
  • 阿神

    阿神2017-06-26 10:54:02

    javascript中的深拷貝和淺拷貝?

    回覆
    0
  • 取消回覆