前言
之前去一家公司面試的時候，面試官問了我一個問題，說:"如何才能深拷貝一個對象"她我。當時我心里有些竊喜，這么簡單的問題還用想嗎迫横？于是脫口而出:"平時常用的有兩種辦法番舆，第一種用JSON.parse(JSON.stringify(obj))，第二種可以使用for...in加遞歸完成"员淫。面試官聽了以后點了點頭覺得挺滿意的合蔽。
當時我也并沒有太過在乎這個問題，直到前段時間又想起這個問題介返，發(fā)現(xiàn)上面說的兩種方法都是有Bug的拴事。
提出問題
那么上面所說的Bug是什么呢？
- 特殊對象拷貝
首先讓我們試想有這么一個對象圣蝎，在不考慮普通類型的情況下刃宵，它有如下成員:
const obj = {
arr: [111, 222],
obj: {key: '對象'},
a: () => {console.log('函數(shù)')},
date: new Date(),
reg: /正則/ig
}
然后我們用上面兩種方式分別拷貝一次
JSON法
JSON.parse(JSON.stringify(obj))
輸出結(jié)果:
可以從中看出，obj中的普通對象和數(shù)組都能拷貝徘公，然而date對象成了字符串牲证，函數(shù)直接就不見了，正則成了一個空對象关面。
再來看看for...in加遞歸的方法
遞歸
function isObj(obj) {
return (typeof obj === 'object' || typeof obj === 'function') && obj !== null
}
function deepCopy(obj) {
let tempObj = Array.isArray(obj) ? [] : {}
for(let key in obj) {
tempObj[key] = isObj(obj[key]) ? deepCopy(obj[key]) : obj[key]
}
return tempObj
}
結(jié)果:
結(jié)論
通過上面的測試可知坦袍，這兩個方法都無法拷貝函數(shù)，date等太，reg類型的對象;
- 環(huán)
什么是環(huán)?
環(huán)就是對象循環(huán)引用捂齐，導致自己成為一個閉環(huán)，例如下面這個對象:
var a = {}
a.a = a
使用上面兩個方法拷貝一下會直接報錯
解決方案
- 環(huán)
可以使用一個WeakMap結(jié)構(gòu)存儲已經(jīng)被拷貝的對象缩抡，每一次進行拷貝的時候就先向WeakMap查詢該對象是否已經(jīng)被拷貝奠宜，如果已經(jīng)被拷貝則取出該對象并返回，將deepCopy函數(shù)改造成如下
function deepCopy(obj, hash = new WeakMap()) {
if(hash.has(obj)) return hash.get(obj)
let cloneObj = Array.isArray(obj) ? [] : {}
hash.set(obj, cloneObj)
for (let key in obj) {
cloneObj[key] = isObj(obj[key]) ? deepCopy(obj[key], hash) : obj[key];
}
return cloneObj
}
拷貝環(huán)結(jié)果:
- 特殊對象的拷貝
這個問題的解決比較麻煩瞻想，因為需要特別對待的對象種類實在太多压真，于是我參考了MDN上的結(jié)構(gòu)化拷貝，然后結(jié)合解決環(huán)的方案：
// 只解決date蘑险，reg類型滴肿，其他的可以自己添加
function deepCopy(obj, hash = new WeakMap()) {
let cloneObj
let Constructor = obj.constructor
switch(Constructor){
case RegExp:
cloneObj = new Constructor(obj)
break
case Date:
cloneObj = new Constructor(obj.getTime())
break
default:
if(hash.has(obj)) return hash.get(obj)
cloneObj = new Constructor()
hash.set(obj, cloneObj)
}
for (let key in obj) {
cloneObj[key] = isObj(obj[key]) ? deepCopy(obj[key], hash) : obj[key];
}
return cloneObj
}
拷貝結(jié)果:
完整版可以查看lodash深拷貝
- 函數(shù)的拷貝
但是MDN上的結(jié)構(gòu)化拷貝依舊沒有解決函數(shù)的拷貝
目前為止，我只想到使用eval的方法對函數(shù)進行拷貝佃迄，但是這種方法只能對箭頭函數(shù)生效嘴高，如果是fun(){}這種形式的則會出錯
拷貝函數(shù)增加函數(shù)類型
拷貝結(jié)果
出錯類型
后記
JavaScript的深拷貝還不止上面所說的這些坑竿音，還存在的問題有如何拷貝原型鏈上的屬性和屎？如何拷貝不可枚舉屬性? 如何拷貝Error對象等等的坑拴驮，在這里就不一一贅述了。
不過在日常過程中還是建議使用JSON方法柴信，這個方法已經(jīng)覆蓋了絕大部分的業(yè)務需求套啤，所以不需要把簡單的事情復雜化，不過面試中如果遇到面試官鉆牛角尖對這個問題的解答絕對可以秀他一臉了随常。
