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

Question

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

Answer 1

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

Answer 2

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

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

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

Answer 3

javascript中的深拷貝和淺拷貝？