javascript - js裡面的clone方法有什麼用?
大家讲道理
大家讲道理 2017-06-26 10:52:02
0
3
743

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

大家讲道理
大家讲道理

光阴似箭催人老,日月如移越少年。

全部回覆(3)
typecho

好處就是,不同於“=”,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的屬性。

给我你的怀抱

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

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

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

阿神

javascript中的深拷貝和淺拷貝?

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!