問(wèn)題描述

有時(shí)候?qū)?shù)組之類(lèi)的操作的時(shí)候，會(huì)使用clone方法，感覺(jué)不使用這個(gè)直接賦值也可以啊，這樣做有什么好處？為了省內(nèi)存？還有什么淺拷貝深拷貝之類(lèi)的，原諒我是小白。。

問(wèn)題解答

好處就是，不同于“=”，clone的數(shù)組是在內(nèi)存中是獨(dú)立的，你可以對(duì)它為所欲為。

js中，數(shù)組和對(duì)象都屬于引用類(lèi)型。

const arr = [1, 2, 3, 4, 5, 6];const arr1 = arr; // 直接賦值，arr1指向的是arr的內(nèi)存，也就是說(shuō)arr發(fā)生改變時(shí)，arr1也會(huì)被改變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); // 克隆了一個(gè)arr1，arr與arr1指向不同的內(nèi)存，arr的改變并不會(huì)影響到arr1arr.push(123);console.log(arr1); // [1, 2, 3, 4, 5, 6]

所以，克隆的作用就是用來(lái)新生成一份數(shù)據(jù)，不污染原來(lái)的數(shù)據(jù)。

至于深拷貝與淺拷貝：

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 100console.log(obj3.name, obj3.class.a); // Ash 1

可以看到，淺拷貝與深拷貝的區(qū)別在于：淺拷貝只是遍歷了obj1的第一層，然后把obj1的每個(gè)屬性都賦值給了obj2；而深拷貝則不會(huì)，當(dāng)屬性值為對(duì)象時(shí)，深拷貝會(huì)new一個(gè)空對(duì)象，然后把對(duì)象的值賦值給這個(gè)空對(duì)象，在返回這個(gè)空對(duì)象作為obj3的屬性。

JS 編程中很重要的一個(gè)原則是「不是你的對(duì)象不要?jiǎng)印?/b>

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

而 deepClone 就解決了這個(gè)問(wèn)題，我給你一本書(shū)，你去復(fù)印一下，書(shū)原樣還給我，復(fù)印本你就可以隨意處置了。