一、拷貝示例
當(dāng)我們?cè)诓僮鲾?shù)據(jù)之前垢粮，可能會(huì)遇到這樣的情況：
會(huì)經(jīng)常改動(dòng)一組數(shù)據(jù)铺坞，但可能會(huì)用到原始數(shù)據(jù)
我需要兩組一樣的數(shù)據(jù)，但我不希望改動(dòng)一個(gè)另一個(gè)隨之改動(dòng)
我需要對(duì)數(shù)據(jù)操作前后進(jìn)行對(duì)比
…
當(dāng)我們遇到類似需要場(chǎng)景時(shí)邻邮，首先想到的就是拷貝它，殊不知拷貝也大有學(xué)問哦～
下面簡(jiǎn)單的例子克婶，你是否覺得熟悉筒严？
1.1 基本類型拷貝示例
var str = 'How are you';
var newStr = str;
newStr = 10
console.log(str); // How are you
console.log(newStr); // 10
大家都能想到，字符串是基本類型情萤，它的值保存在棧中鸭蛙，在對(duì)它進(jìn)行拷貝時(shí)，其實(shí)是為新變量開辟了新的空間筋岛。?str和newStr就好比兩個(gè)一模一樣的房間娶视，布局一致卻毫無關(guān)聯(lián)。
1.2 引用類型拷貝示例
var data = [1, 2, 3, 4, 5];
var newData = data;
newData[0] = 100;
console.log(data[0]); // 100
console.log(newData[0]); // 100
類似的代碼段睁宰，但這次我們使用數(shù)組這個(gè)引用類型舉例肪获，你會(huì)發(fā)現(xiàn)修改賦值后的數(shù)據(jù)，原始數(shù)據(jù)也跟著改變了柒傻，這顯然不滿足我們的需要孝赫。本篇文章就來聊一聊引用數(shù)據(jù)拷貝的學(xué)問。
如果大家對(duì)Js的數(shù)據(jù)類型存在著疑問红符，不妨看看《JavaScript中的基本數(shù)據(jù)類型》
二寒锚、淺拷貝
拷貝的劃分都是針對(duì)引用類型來討論的，淺拷貝——顧名思義违孝，淺拷貝就是“淺層拷貝”刹前，實(shí)際上只做了表面功夫：
var arr = [1, 2, 3, 4];
var newArr = arr;
console.log(arr, newArr); // [1,2,3,4] [1,2,3,4]
newArr[0] = 100;
console.log(arr, newArr) // [100,2,3,4] [100,2,3,4]
不發(fā)生事情（操作）還好，一旦對(duì)新數(shù)組進(jìn)行了操作雌桑，兩個(gè)變量中所保存的數(shù)據(jù)都會(huì)發(fā)生改變喇喉。
發(fā)生這類情況的原因也是因?yàn)橐妙愋偷幕咎匦裕?/p>
存儲(chǔ)在變量處的值是一個(gè)指針（point），指向存儲(chǔ)對(duì)象的內(nèi)存地址校坑。賦值給新變量相當(dāng)于配了一把新鑰匙拣技，房間并沒有換千诬。
數(shù)組中的slice和concat都會(huì)返回一個(gè)新數(shù)組，我們一起來試一下：
var arr = [1,2,3,4];
var res = arr.slice();
// 或者
res = arr.concat()
res[0] = 100;
console.log(arr); // [1,2,3,4]
12345678
這個(gè)問題這么快就解決了膏斤？雖然對(duì)這一層數(shù)據(jù)進(jìn)行了這樣的的處理后徐绑，確實(shí)解決了問題，但莫辨！
var arr = [ { age: 23 }, [1,2,3,4] ];
var newArr = arr.concat();
arr[0].age = 18;
arr[1][0] = 100;
console.log(arr) // [ {age: 18}, [100,2,3,4] ]
console.log(newArr) // [ {age: 18}, [100,2,3,4] ]
果然事情沒有那么簡(jiǎn)單傲茄，這也是因?yàn)閿?shù)據(jù)類型的不同。
S 不允許我們直接操作內(nèi)存中的地址沮榜，也就是說不能操作對(duì)象的內(nèi)存空間盘榨，所以，我們對(duì)對(duì)象的操作都只是在操作它的引用而已蟆融。
既然淺拷貝達(dá)不到我們的要求草巡，本著效率的原則，我們找找有沒有幫助我們實(shí)現(xiàn)深拷貝的方法型酥。
三山憨、深拷貝的方法？
數(shù)據(jù)的方法失敗了弥喉，還有沒有其他辦法郁竟？我們需要實(shí)現(xiàn)真正意義上的拷貝出獨(dú)立的數(shù)據(jù)。
3.1 JSON
這里我們利用JSON的兩個(gè)方法档桃，JSON.stringify()，JSON.parse()來實(shí)現(xiàn)最簡(jiǎn)潔的深拷貝
var arr = ['str', 1, true, [1, 2], {age: 23}]
var newArr = JSON.parse( JSON.stringify(arr) );
newArr[3][0] = 100;
console.log(arr); // ['str', 1, true, [1, 2], {age: 23}]
console.log(newArr); // ['str', 1, true, [100, 2], {age: 23}]
123456
這個(gè)方法應(yīng)該是實(shí)現(xiàn)深拷貝最簡(jiǎn)潔的方法憔晒，但是藻肄，它仍然存在問題，我們先來看看剛才都做了些什么：
定義一個(gè)包含都過類型的數(shù)組arr
JSON.stringify(arr), 將一個(gè) JavaScript 對(duì)象或值轉(zhuǎn)換為?JSON 字符串
JSON.parse(xxx), 方法用來解析JSON字符串拒担，構(gòu)造由字符串描述的值或?qū)ο?/p>
理解：
我們可以理解為嘹屯，將原始數(shù)據(jù)轉(zhuǎn)換為新字符串，再通過新字符串還原為一個(gè)新對(duì)象从撼，這中改變數(shù)據(jù)類型的方式州弟，間接的繞過了拷貝對(duì)象引用的過程，也就談不上影響原始數(shù)據(jù)低零。
限制：
這種方式成立的根本就是保證數(shù)據(jù)在“中轉(zhuǎn)”時(shí)的完整性婆翔，而JSON.stringify()將值轉(zhuǎn)換為相應(yīng)的JSON格式時(shí)也有缺陷：
undefined、任意的函數(shù)以及 symbol 值掏婶，在序列化過程中會(huì)被忽略（出現(xiàn)在非數(shù)組對(duì)象的屬性值中時(shí)）或者被轉(zhuǎn)換成 null（出現(xiàn)在數(shù)組中時(shí)）啃奴。
函數(shù)、undefined 被單獨(dú)轉(zhuǎn)換時(shí)雄妥，會(huì)返回 undefined最蕾，如JSON.stringify(function(){})JSON.stringify(undefined)
對(duì)包含循環(huán)引用的對(duì)象（對(duì)象之間相互引用依溯，形成無限循環(huán)）執(zhí)行此方法，會(huì)拋出錯(cuò)誤瘟则。
NaN 和 Infinity 格式的數(shù)值及 null 都會(huì)被當(dāng)做 null黎炉。
其他類型的對(duì)象，包括 Map/Set/WeakMap/WeakSet醋拧，僅會(huì)序列化可枚舉的屬性慷嗜。
所以當(dāng)我們拷貝函數(shù)、undefined等stringify轉(zhuǎn)換有問題的數(shù)據(jù)時(shí)趁仙，就會(huì)出錯(cuò)洪添，我們?cè)趯?shí)際開發(fā)中也要結(jié)合實(shí)際情況使用。
舉一反三：
既然是通過改變數(shù)據(jù)類型來繞過拷貝引用這一過程雀费，那么單純的數(shù)組深拷貝是不是可以通過現(xiàn)有的幾個(gè)API來實(shí)現(xiàn)呢干奢？
var arr = [1,2,3];
var newArr = arr.toString().split(',').map(item => Number(item))
newArr[0] = 100;
console.log(arr); // [1,2,3]
console.log(newArr); // [100,2,3]
12345
注意，此時(shí)僅能對(duì)包含純數(shù)字的數(shù)組進(jìn)行深拷貝盏袄，因?yàn)椋?/p>
toString無法正確的處理對(duì)象和函數(shù)
Number無法處理 false忿峻、undefined等數(shù)據(jù)類型
但我愿稱它為純數(shù)字?jǐn)?shù)組深拷貝！
3.2 Object.assign()
有的人會(huì)認(rèn)為Object.assign()辕羽，可以做到深拷貝逛尚，我們來看一下
var obj = {a: 1, b: { c: 2 } }
var newObj = Object.assign({}, obj)
newObj.a = 100;
newObj.b.c = 200;
console.log(obj); // {a: 1, b: { c: 200 } }
console.log(newObj) // {a: 100, b: { c: 200 } }
神奇，第一層屬性沒有改變刁愿，但第二層卻同步改變了绰寞，這是為什么呢？
因?yàn)?Object.assign()拷貝的是（可枚舉）屬性值铣口。
假如源值是一個(gè)對(duì)象的引用滤钱，它僅僅會(huì)復(fù)制其引用值。MDN傳送門
四脑题、自己實(shí)現(xiàn)深淺拷貝
既然現(xiàn)有的方法無法實(shí)現(xiàn)深拷貝件缸，不妨我們自己來實(shí)現(xiàn)一個(gè)吧～
4.1 淺拷貝
我們只需要將所有屬性即其嵌套屬性原封不動(dòng)的復(fù)制給新變量一份即可，拋開現(xiàn)有的方法叔遂，我們應(yīng)該怎么做呢他炊？
var shallowCopy = function(obj) {
? ? if (typeof obj !== 'object') return;
? ? // 根據(jù)obj的類型判斷是新建一個(gè)數(shù)組還是對(duì)象
? ? var newObj = obj instanceof Array ? [] : {};
? ? // 遍歷obj，并且判斷是obj的屬性才拷貝
? ? for (var key in obj) {
? ? ? ? if (obj.hasOwnProperty(key)) {
? ? ? ? ? ? newObj[key] = obj[key];
? ? ? ? }
? ? }
? ? return newObj;
}
12345678910111213
我們只需要將所有屬性的引用拷貝一份即可～
4.2 深拷貝
相信大家在實(shí)現(xiàn)深拷貝的時(shí)候都會(huì)想到遞歸已艰，同樣是判斷屬性值痊末，但如果當(dāng)前類型為object則證明需要繼續(xù)遞歸，直到最后
var deepCopy = function(obj) {
? ? if (typeof obj !== 'object') return;
? ? var newObj = obj instanceof Array ? [] : {};
? ? for (var key in obj) {
? ? ? ? if (obj.hasOwnProperty(key)) {
? ? ? ? ? ? newObj[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key];
? ? ? ? }
? ? }
? ? return newObj;
}
我們用白話來解釋一下deepCopy都做了什么
const obj = [1, { a: 1, b: { name: '余光'} } ];
const resObj = deepCopy(obj);
讀取?obj哩掺，創(chuàng)建 第一個(gè)newObj判斷類型為?[]key為?0?(for in?以任意順序遍歷舌胶，我們假定按正常循序遍歷)判斷不是引用類型，直接復(fù)制key為?1判斷是引用類型進(jìn)入遞歸疮丛，重新走了一遍剛才的流程幔嫂，只不過讀取的是obj[1]
另外請(qǐng)注意遞歸的方式雖然可以深拷貝辆它，但是在性能上肯定不如淺拷貝，大家還是需要結(jié)合實(shí)際情況來選擇履恩。
