為什么需要DeepCopy:
在JS里轮傍,除Array和Object之外的數(shù)據(jù)類型的復(fù)制可以直接通過等號=來實現(xiàn)申钩,但Array和Object類型的數(shù)據(jù)通過等號只是起引用作用色徘,指向的是同一塊內(nèi)存地址很洋。當源數(shù)據(jù)改變失乾,引用的數(shù)據(jù)也同時會發(fā)生變化宪哩。
JS實現(xiàn)DeepCopy的方式:
1.使用jq的$.extend(true,?target,?obj)
2.newobj?=?Object.create(sourceObj)????// 但是這個是有個問題就是 newobj的更改不會影響到 sourceobj但是 sourceobj的更改會影響到newObj
3.newobj?=?JSON.parse(JSON.stringify(sourceObj)) ????// undefined娩贷、任意的函數(shù)以及 symbol 值,在序列化過程中會被忽略(出現(xiàn)在非數(shù)組對象的屬性值中時)或者被轉(zhuǎn)換成 null(出現(xiàn)在數(shù)組中時)锁孟。但是在平時的開發(fā)中JSON.parse(JSON.stringify(obj))已經(jīng)滿足90%的使用場景了彬祖。
4.遞歸
? ? 1)尋常遞歸
? ??var deepCopy = function(o) {
? ? if (o instanceof Array) {? //先判斷Array
? ? ? ? var n = [];
? ? ? ? for (var i = 0; i < o.length; ++i) {
? ? ? ? ? ? n[i] = deepCopy(o[i]);
? ? ? ? }
? ? ? ? return n;
? ? } else if (o instanceof Object) {
? ? ? ? var n = {}
? ? ? ? for (var i in o) {
? ? ? ? ? ? n[i] = deepCopy(o[i]);
? ? ? ? }
? ? ? ? return n;
? ? } else {
? ? ? ? return o;
? ? }
}
2)Vuex源碼中使用的方法
function deepCopy (obj, cache = []) {
? function find (list, f) {
? ? return list.filter(f)[0]
? }
? if (obj === null || typeof obj !== 'object') {
? ? return obj
? }
? const hit = find(cache, c => c.original === obj)
? if (hit) {
? ? return hit.copy
? }
? const copy = Array.isArray(obj) ? [] : {}
? cache.push({
? ? original: obj,
? ? copy
? })
? Object.keys(obj).forEach(key => {
? ? copy[key] = deepCopy(obj[key], cache)
? })
? return copy
}