進(jìn)階路線
需要知道的就是一點(diǎn)：JavaScript的數(shù)據(jù)類型分為基本數(shù)據(jù)類型和引用數(shù)據(jù)類型。對(duì)于基本數(shù)據(jù)類型的拷貝，并沒(méi)有深淺拷貝的區(qū)別，我們所說(shuō)的深淺拷貝都是對(duì)于引用數(shù)據(jù)類型而言的。
5.1淺拷貝
淺拷貝的意思就是只復(fù)制引用，而未復(fù)制真正的值。
淺拷貝的實(shí)現(xiàn)
function Clone(source){
const targetObj = source.constructor === Array ? [] : {}; // 判斷復(fù)制的目標(biāo)是數(shù)組還是對(duì)象
for(let keys in source){ // 遍歷目標(biāo)
if(source.hasOwnProperty(keys)){
targetObj[keys] = source[keys];
}
}
return targetObj;
}
5.2 深拷貝
深拷貝就是對(duì)目標(biāo)的完全拷貝，不像淺拷貝那樣只是復(fù)制了一層引用，就連值也都復(fù)制了。
只要進(jìn)行了深拷貝，它們老死不相往來(lái)，誰(shuí)也不會(huì)影響誰(shuí)。
目前實(shí)現(xiàn)深拷貝的方法不多，主要是兩種：
1、利用 JSON 對(duì)象中的 parse 和 stringify
2、利用遞歸來(lái)實(shí)現(xiàn)每一層都重新創(chuàng)建對(duì)象并賦值
5.2.1 JSON.stringify/parse的方法
- JSON.stringify 是將一個(gè) JavaScript 值轉(zhuǎn)成一個(gè) JSON 字符串。
- JSON.parse是將一個(gè) JavaScript 值轉(zhuǎn)成一個(gè) JSON 字符串。
const originArray = [1,2,3,4,5];
const cloneArray = JSON.parse(JSON.stringify(originArray));
console.log(cloneArray === originArray); // false
確實(shí)是深拷貝，也很方便。但是，這個(gè)方法只能適用于一些簡(jiǎn)單的情況。比如下面這樣的一個(gè)對(duì)象就不適用,undefined、function、symbol 會(huì)在轉(zhuǎn)換過(guò)程中被忽略。
const originObj = {
name:'axuebin',
sayHello:function(){
console.log('Hello World');
}
}
console.log(originObj); // {name: "axuebin", sayHello: ?}
const cloneObj = JSON.parse(JSON.stringify(originObj));
console.log(cloneObj); // {name: "axuebin"}
5.2.2 遞歸深拷貝
遞歸的思想就很簡(jiǎn)單了，就是對(duì)每一層的數(shù)據(jù)都實(shí)現(xiàn)一次 創(chuàng)建對(duì)象->對(duì)象賦值 的操作，簡(jiǎn)單粗暴上代碼：
function CloneDeep(source){
// 判斷復(fù)制的目標(biāo)書(shū)數(shù)組還是對(duì)象
var targetObj = source.constructor === Array ? [] : {};
for(let keys in source){
//判斷對(duì)象是否包含特定的自身（非繼承）屬性。
if(source.hasOwnProperty(keys)){
//判斷是否是對(duì)象或者數(shù)組
if(source[keys] && typeof source[keys] === "object"){
targetObj = source.constructor === Array ? [] : {};
targetObj[keys] = CloneDeep(source[keys]);// 遞歸調(diào)用
}else{
targetObj[keys] = source[keys];
}
}
}
return targetObj;
}
一個(gè)簡(jiǎn)單的深拷貝就完成了，但是這個(gè)實(shí)現(xiàn)還存在很多問(wèn)題。
- 沒(méi)有對(duì)傳入?yún)?shù)進(jìn)行校驗(yàn)，傳入 null 時(shí)應(yīng)該返回 null 而不是 {}
- 對(duì)于對(duì)象的判斷邏輯不嚴(yán)謹(jǐn)，因?yàn)?typeof null === 'object'
該進(jìn)之后的寫(xiě)法
// 判斷是否為對(duì)象
function isObject(obj){
return typeof obj === 'object' && obj != null
}
function CloneDeep(source){
// 判斷復(fù)制的目標(biāo)書(shū)數(shù)組還是對(duì)象
if(!isObject(source)) return source;
var targetObj = source.constructor === Array ? [] : {};
for(let keys in source){
//判斷對(duì)象是否包含特定的自身（非繼承）屬性。
if(source.hasOwnProperty(keys)){
//判斷是否是對(duì)象或者數(shù)組
if(source[keys] && isObject(source[keys])){
targetObj = source.constructor === Array ? [] : {};
targetObj[keys] = CloneDeep(source[keys]);// 遞歸調(diào)用
}else{
targetObj[keys] = source[keys];
}
}
}
return targetObj;
}
循環(huán)引用問(wèn)題
以下這種情況會(huì)造成死循環(huán) 導(dǎo)致棧溢出
const obj1 = {
x: 1,
y: 2
};
obj1.z = obj1;
const obj2 = CloneDeep(obj1); \\棧溢出
解決辦法
解決方案很簡(jiǎn)單，其實(shí)就是循環(huán)檢測(cè)，我們?cè)O(shè)置一個(gè)數(shù)組或者哈希表存儲(chǔ)已拷貝過(guò)的對(duì)象，當(dāng)檢測(cè)到當(dāng)前對(duì)象已存在于哈希表中時(shí)，取出該值并返回即可
// 判斷是否為對(duì)象
function isObject(obj){
return typeof obj === 'object' && obj != null
}
function CloneDeep(source,hash = new WeakMap()){
// 判斷復(fù)制的目標(biāo)書(shū)數(shù)組還是對(duì)象
if(!isObject(source)) return source;
if (hash.has(source)) return hash.get(source); // 新增代碼，查哈希表
var targetObj = source.constructor === Array ? [] : {};
hash.set(source, targetObj ); // 新增代碼，哈希表設(shè)值
for(let keys in source){
//判斷對(duì)象是否包含特定的自身（非繼承）屬性。
if(source.hasOwnProperty(keys)){
//判斷是否是對(duì)象或者數(shù)組
if(source[keys] && isObject(source[keys])){
targetObj = source.constructor === Array ? [] : {};
targetObj[keys] = CloneDeep(source[keys]);// 遞歸調(diào)用
}else{
targetObj[keys] = source[keys];
}
}
}
return targetObj;
}
破解遞歸爆棧
function cloneDeep(x) {
const root = {};
// 棧
const loopList = [
{
parent: root,
key: undefined,
data: x,
}
];
while(loopList.length) {
// 廣度優(yōu)先
const node = loopList.pop();
const parent = node.parent;
const key = node.key;
const data = node.data;
// 初始化賦值目標(biāo)，key為undefined則拷貝到父元素，否則拷貝到子元素
let res = parent;
if (typeof key !== 'undefined') {
res = parent[key] = {};
}
for(let k in data) {
if (data.hasOwnProperty(k)) {
if (typeof data[k] === 'object') {
// 下一次循環(huán)
loopList.push({
parent: res,
key: k,
data: data[k],
});
} else {
res[k] = data[k];
}
}
}
}
return root;
}
