JavaScript篇 深拷貝和淺拷貝

2021-09-24 11:56:53 字數 2435 閱讀 2613

一、概念:

1、淺拷貝

拷貝的物件和原來的物件指向同乙個引用位址。

乙個改變另乙個也會改變。

2、深拷貝

拷貝的物件內容和原來的物件一樣,但是兩個物件指向不同的位址。

乙個改變另乙個不會改變。

1、淺拷貝

方法一:直接賦值,淺拷貝任意層次

let a = 

}let b = a

console.log("a1", a)

console.log("b1", b)

b.title = "b的title"

console.log("a2", a)

console.log("b2", b)

b.content.partone = "b的第一段"

console.log("a3", a)

console.log("b4", b)

輸出:a1 }

b1 }

a2 }

b2 }

a3 }

b4 }

方法二:object.assign()實現一層的深拷貝,二層以及以上還是淺拷貝

let a = 

}let b = object.assign({}, a)

console.log("a1", a)

console.log("b1", b)

b.title = "b的title"

console.log("a2", a)

console.log("b2", b)

b.content.partone = "b的第一段"

console.log("a3", a)

console.log("b4", b)

輸出:a1 }

b1 }

a2 }

b2 }

a3 }

b4 }

2、深拷貝

方法一:json原生api

缺點:如果key-value對應的value值為function,會直接丟棄該key-value

let a = ,

"method": function ()

}let b = json.parse(json.stringify(a))

console.log("a1", a)

console.log("b1", b)

b.title = "b的title"

console.log("a2", a)

console.log("b2", b)

b.content.partone = "b的第一段"

console.log("a3", a)

console.log("b3", b)

輸出:a1 ,

method: [function: method] }

b1 }

a2 ,

method: [function: method] }

b2 }

a3 ,

method: [function: method] }

b3

方法二:遞迴實現深拷貝

let a = ,

"method": function ()

}function deepclone(obj)

if (obj && typeof obj === 'object') else }}

} return objclone

}let b = deepclone(a)

console.log("a1", a)

console.log("b1", b)

b.title = "b的title"

console.log("a2", a)

console.log("b2", b)

b.content.partone = "b的第一段"

console.log("a3", a)

console.log("b3", b)

輸出:a1 ,

method: [function: method] }

b1 ,

method: [function: method] }

a2 ,

method: [function: method] }

b2 ,

method: [function: method] }

a3 ,

method: [function: method] }

b3 ,

method: [function: method] }

javascript 淺拷貝和深拷貝

簡單的賦值就是淺拷貝。因為物件和陣列在賦值的時候都是引用傳遞。賦值的時候只是傳遞乙個指標。看下面的例項 var a 1,2,3 var b a var test var c test console.log a console.log b console.log test console.log b...

JavaScript深拷貝和淺拷貝

我們在專案開發過程中經常會拿到乙個資料後需要拷貝乙份副本出來進行操作,而且會發現在很多前端框架中都是拷貝乙份操作的,那麼這就涉及到了 js 中對資料的深淺拷貝問題,所謂深淺拷貝,淺拷貝的意思就是,你只是複製了物件資料的引用,並沒有把記憶體裡的值另外複製乙份,那麼深拷貝就是把值完整地複製乙份新的值。那...

JavaScript 的深拷貝和淺拷貝

關於淺拷貝,按照常理理解,以及參考其他語言,我認為淺拷貝指的是和目標物件 陣列 和原始物件 陣列 指向同一塊記憶體空間。賦值操作就是這種淺拷貝。var src var target src target.y 4 console.log src.y 4,相互影響使用object 建立物件的副本也是一樣...