深入JavaScript中深拷貝和淺拷貝

深拷貝和淺拷貝問題的本質還是不同資料型別的儲存方式差異，尤其是引用資料型別的特殊。

現分別對賦值、淺拷貝、深拷貝做深入研究：

1.賦值

原理：直接將物件指標直接賦值給另乙個變數

**：

let developer = ,

frameworks: ['react', 'vue', 'angularjs'],
summary: function()
};let newdeveloper = developer;
console.log(newdeveloper);
//基本型別：改變原物件
newdeveloper.title = 'frontend leader';
console.log(developer.title); // frontend leader
//物件：改變原物件
//陣列：改變原物件
newdeveloper.frameworks.push('angular');
console.log(developer.frameworks); // [ 'react', 'vue', 'angularjs', 'angular' ]
//函式：改變原物件
newdeveloper.summary = function () ;
developer.summary(); // i like fe development

原理：遍歷物件的每個屬性進行逐個拷貝

實現方式：

**：

let developer = ,

frameworks: ['react', 'vue', 'angularjs'],
summary: function()
};/*
* 方式1：逐個複製
** */
function cloneinshallow(source) ;
for (prop in source)
return target
}let newdeveloper = cloneinshallow(developer);
/** 方式2：object.assign()
** */
// let newdeveloper = object.assign({}, developer);
console.log(newdeveloper);
//基本型別：不改變原物件
newdeveloper.title = 'frontend leader';
console.log(developer.title); // frontend
// 物件：改變原物件
//陣列：改變原物件
newdeveloper.frameworks.push('angular');
console.log(developer.frameworks); // [ 'react', 'vue', 'angularjs', 'angular' ]
//函式：不改變原物件
newdeveloper.summary = function () ;
developer.summary(); // i am fe developer

原理：使用遞迴，遍歷每乙個物件屬性進行拷貝

實現方式：

**：

let developer = ,

frameworks: ['react', 'vue', 'angularjs', ],
summary: function()
};/*
* 方式1: 純手工打造
* */
function cloneindeep(source) ;
for (let prop in source)else
});target[prop] = newarray;
}else if(object.getprototypeof(value) === object.prototype)else
}return target
}else
}let newdeveloper = cloneindeep(developer);
/** 方式2: json.parse(json.stringify(obj))
* 弊端：會拋棄物件的constructor
* 適用：能夠被json直接表示的資料結構，物件中只包含number、string、boolean、array、扁平物件
* 不適用：含有function、regexp
* */
// let newdeveloper = json.parse(json.stringify(developer));
/** 方式3: jquery
* */
let $ = require('jquery');
// let newdeveloper = $.extend({}, developer);
/** 方式4: lodash
* */
let _ = require('lodash');
// let newdeveloper = _.clonedeep(developer);
console.log(newdeveloper);
//基本型別：不改變原物件
newdeveloper.title = 'frontend leader';
console.log(developer.title); // frontend
// 物件：不改變原物件
//陣列：不改變原物件
newdeveloper.frameworks.push('angular');
console.log(developer.frameworks); // [ 'react', 'vue', 'angularjs' ,  ]
newdeveloper.frameworks[3].node = 'koa';
console.log(developer.frameworks); // [ 'react', 'vue', 'angularjs' ,  ]
//函式：不改變原物件
newdeveloper.summary = function () ;
developer.summary(); // i am fe developer

javascript 原型 this 閉包 深拷貝

function a console.log a window 複製 for var i 1 i 5 i i 1000 輸出5個6，首先因為 settime 是個非同步函式，所有會先把迴圈全部執行完畢，這時i等於6，for let i 1 i 5 i i 1000 i 1000 i i 複製 fun...

JavaScript 利用遞迴實現物件深拷貝

先來普及一下深拷貝和淺拷貝的區別 淺拷貝 就是簡單的複製，用等號即可完成 let a let b a這就完成了乙個淺拷貝 但是當修改物件b的時候，我們發現物件a的值也被改變了 b.a 10 console.log a.a 10這是因為淺拷貝只複製了指向物件的指標，新舊物件共用同一塊記憶體，修改某乙個...

javascript實現陣列或物件的深拷貝

第一 簡單粗暴 let arr 1,let copyarr json.parse json.stringify arr console.log copyarr 1,arr 1 a 3 console.log copyarr 1,copyarr 1 a 5 console.log arr 1,可以看出...