JavaScript專題之深淺拷貝
了解拷貝背后的過程，避免不必要的錯誤，Js專題系列之深淺拷貝，我們一起加油～
目錄
一、拷貝示例
當我們在操作數(shù)據(jù)之前，可能會遇到這樣的情況：
-
會經(jīng)常改動一組數(shù)據(jù)，但可能會用到原始數(shù)據(jù)
-
我需要兩組一樣的數(shù)據(jù)，但我不希望改動一個另一個隨之改動
-
我需要對數(shù)據(jù)操作前后進行對比
-
…
當我們遇到類似需要場景時，首先想到的就是拷貝它，殊不知拷貝也大有學(xué)問哦～
下面簡單的例子，你是否覺得熟悉？
1.1 基本類型拷貝示例
var str = 'How are you'; var newStr = str; newStr = 10 console.log(str); console.log(newStr);
大家都能想到，字符串是基本類型，它的值保存在棧中，在對它進行拷貝時，其實是為新變量開辟了新的空間。 str和newStr就好比兩個一模一樣的房間，布局一致卻毫無關(guān)聯(lián)。
1.2 引用類型拷貝示例
var data = [1, 2, 3, 4, 5]; var newData = data; newData[0] = 100; console.log(data[0]); console.log(newData[0]);
類似的代碼段，但這次我們使用數(shù)組這個引用類型舉例，你會發(fā)現(xiàn)修改賦值后的數(shù)據(jù)，原始數(shù)據(jù)也跟著改變了，這顯然不滿足我們的需要。本篇文章就來聊一聊引用數(shù)據(jù)拷貝的學(xué)問。
如果大家對Js的數(shù)據(jù)類型存在著疑問，不妨看看《JavaScript中的基本數(shù)據(jù)類型》
二、淺拷貝
拷貝的劃分都是針對引用類型來討論的，淺拷貝——顧名思義，淺拷貝就是“淺層拷貝”，實際上只做了表面功夫：
var arr = [1, 2, 3, 4]; var newArr = arr; console.log(arr, newArr); newArr[0] = 100; console.log(arr, newArr)
不發(fā)生事情（操作）還好，一旦對新數(shù)組進行了操作，兩個變量中所保存的數(shù)據(jù)都會發(fā)生改變。
發(fā)生這類情況的原因也是因為引用類型的基本特性：
-
存儲在變量處的值是一個指針（point），指向存儲對象的內(nèi)存地址。賦值給新變量相當于配了一把新鑰匙，房間并沒有換。
數(shù)組中的slice和concat都會返回一個新數(shù)組，我們一起來試一下：
var arr = [1,2,3,4]; var res = arr.slice(); res = arr.concat() res[0] = 100; console.log(arr);
這個問題這么快就解決了？雖然對這一層數(shù)據(jù)進行了這樣的的處理后，確實解決了問題，但！
var arr = [ { age: 23 }, [1,2,3,4] ]; var newArr = arr.concat(); arr[0].age = 18; arr[1][0] = 100; console.log(arr) console.log(newArr)
果然事情沒有那么簡單，這也是因為數(shù)據(jù)類型的不同。
S 不允許我們直接操作內(nèi)存中的地址，也就是說不能操作對象的內(nèi)存空間，所以，我們對對象的操作都只是在操作它的引用而已。
既然淺拷貝達不到我們的要求，本著效率的原則，我們找找有沒有幫助我們實現(xiàn)深拷貝的方法。
三、深拷貝的方法？
數(shù)據(jù)的方法失敗了，還有沒有其他辦法？我們需要實現(xiàn)真正意義上的拷貝出獨立的數(shù)據(jù)。
3.1 JSON
這里我們利用JSON的兩個方法，JSON.stringify()，JSON.parse()來實現(xiàn)最簡潔的深拷貝
var arr = ['str', 1, true, [1, 2], {age: 23}] var newArr = JSON.parse( JSON.stringify(arr) ); newArr[3][0] = 100; console.log(arr); console.log(newArr);
這個方法應(yīng)該是實現(xiàn)深拷貝最簡潔的方法，但是，它仍然存在問題，我們先來看看剛才都做了些什么：
-
定義一個包含都過類型的數(shù)組
arr
-
JSON.stringify(arr), 將一個 JavaScript 對象或值轉(zhuǎn)換為
JSON 字符串
-
JSON.parse(xxx), 方法用來解析JSON字符串，構(gòu)造由字符串描述的
值或?qū)ο?/code>
理解：
我們可以理解為，將原始數(shù)據(jù)轉(zhuǎn)換為新字符串，再通過新字符串還原為一個新對象，這中改變數(shù)據(jù)類型的方式，間接的繞過了拷貝對象引用的過程，也就談不上影響原始數(shù)據(jù)。
限制：
這種方式成立的根本就是保證數(shù)據(jù)在“中轉(zhuǎn)”時的完整性，而JSON.stringify()將值轉(zhuǎn)換為相應(yīng)的JSON格式時也有缺陷：
-
undefined、任意的函數(shù)以及 symbol 值，在序列化過程中會被忽略（出現(xiàn)在非數(shù)組對象的屬性值中時）或者被轉(zhuǎn)換成 null（出現(xiàn)在數(shù)組中時）。
-
函數(shù)、undefined 被單獨轉(zhuǎn)換時，會返回 undefined，
-
如JSON.stringify(function(){})
-
JSON.stringify(undefined)
-
對包含循環(huán)引用的對象（對象之間相互引用，形成無限循環(huán)）執(zhí)行此方法，會拋出錯誤。
-
NaN 和 Infinity 格式的數(shù)值及 null 都會被當做 null。
-
其他類型的對象，包括 Map/Set/WeakMap/WeakSet，僅會序列化可枚舉的屬性。
所以當我們拷貝函數(shù)、undefined等stringify轉(zhuǎn)換有問題的數(shù)據(jù)時，就會出錯，我們在實際開發(fā)中也要結(jié)合實際情況使用。
舉一反三：
既然是通過改變數(shù)據(jù)類型來繞過拷貝引用這一過程，那么單純的數(shù)組深拷貝是不是可以通過現(xiàn)有的幾個API來實現(xiàn)呢？
var arr = [1,2,3]; var newArr = arr.toString().split(',').map(item => Number(item)) newArr[0] = 100; console.log(arr); console.log(newArr);
注意，此時僅能對包含純數(shù)字的數(shù)組進行深拷貝，因為：
-
toString無法正確的處理對象和函數(shù)
-
Number無法處理 false、undefined等數(shù)據(jù)類型
但我愿稱它為純數(shù)字數(shù)組深拷貝！
3.2 Object.assign()
有的人會認為Object.assign()，可以做到深拷貝，我們來看一下
var obj = {a: 1, b: { c: 2 } } var newObj = Object.assign({}, obj) newObj.a = 100; newObj.b.c = 200; console.log(obj); console.log(newObj)
神奇，第一層屬性沒有改變，但第二層卻同步改變了，這是為什么呢？
因為 Object.assign()拷貝的是（可枚舉）屬性值。
假如源值是一個對象的引用，它僅僅會復(fù)制其引用值。MDN傳送門
四、自己實現(xiàn)深淺拷貝
既然現(xiàn)有的方法無法實現(xiàn)深拷貝，不妨我們自己來實現(xiàn)一個吧～
4.1 淺拷貝
我們只需要將所有屬性即其嵌套屬性原封不動的復(fù)制給新變量一份即可，拋開現(xiàn)有的方法，我們應(yīng)該怎么做呢？
var shallowCopy = function(obj) { if (typeof obj !== 'object') return; var newObj = obj instanceof Array ? [] : {}; for (var key in obj) { if (obj.hasOwnProperty(key)) { newObj[key] = obj[key]; } } return newObj; }
我們只需要將所有屬性的引用拷貝一份即可～
4.2 深拷貝
相信大家在實現(xiàn)深拷貝的時候都會想到遞歸，同樣是判斷屬性值，但如果當前類型為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)建 第一個newObj
-
判斷類型為
[]
-
key為
0 (for in 以任意順序遍歷，我們假定按正常循序遍歷)
-
判斷不是引用類型，直接復(fù)制
-
key為
1
-
判斷是引用類型
-
進入遞歸，重新走了一遍剛才的流程，只不過讀取的是
obj[1]
另外請注意遞歸的方式雖然可以深拷貝，但是在性能上肯定不如淺拷貝，大家還是需要結(jié)合實際情況來選擇。
作者： 余光
轉(zhuǎn)自：https://blog.csdn.net/jbj6568839z/article/details/107964274?utm_medium=distribute.pc_category.none-task-blog-hot-4.nonecase&depth_1-utm_source=distribute.pc_category.none-task-blog-hot-4.nonecase&request_id=
