當(dāng)前位置：首頁 > 前端技术 > javascript >内容正文

javascript

javascript中浅拷贝和深拷贝的理解

發(fā)布時間：2024/7/19 javascript 31 豆豆

生活随笔收集整理的這篇文章主要介紹了 javascript中浅拷贝和深拷贝的理解小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

javascript中淺拷貝和深拷貝的理解

什么是拷貝？

簡單地說就是復(fù)制，對數(shù)據(jù)的復(fù)制

淺拷貝：改變拷貝者的值，被拷貝者的值也會變化

深拷貝：改變拷貝者的值，被拷貝者的值不會變化

由于基本數(shù)據(jù)類型是存放在棧中，拷貝的就是自己本身，所以就是深拷貝

1：number

var a = 1; b = a; console.log(a);//1 console.log(b);//1 b = 2; console.log(a);//1 console.log(b);//2

2:string

var a = "hello"; b = a; console.log(a);//hello console.log(b);//hello b = "world"; console.log(a);//hello console.log(b);//world

3:boolean

var a = true; b = a; console.log(a);//true console.log(b);//true b = false; console.log(a);//true console.log(b);//false

4:null

var a = null; b = a; console.log(a);//null console.log(b);//null b = "hello"; console.log(a);//null console.log(b);//hello

5:undefined

var a = undefined; b = a; console.log(a);//undefined console.log(b);//undefined b = "hello"; console.log(a);//undefined console.log(b);//hello

對于引用數(shù)據(jù)類型，通過復(fù)制的形式一般就是淺拷貝

6：Array淺拷貝

復(fù)制的只是引用，a和b在棧中是不同的值，但二者在堆中是同一塊區(qū)域

var a = [1,2,3]; b = a; console.log(a);//[1,2,3] console.log(b);//[1,2,3] b[1] = 4; console.log(a);//[1,4,3] console.log(b);//[1,4,3]

7：Array深拷貝

復(fù)制的不僅是引用，還有引用值，堆中也未b開辟了一塊空間

8：Array深拷貝slice(0)

var a = [1,2,3]; b = a.slice(0); console.log(a);//[1,2,3] console.log(b);//[1,2,3] b[1] = 4; console.log(a);//[1,2,3] console.log(b);//[1,4,3]

9：Array深拷貝concat()

var a = [1,2,3]; b = a.concat(); console.log(a);//[1,2,3] console.log(b);//[1,2,3] b[1] = 4; console.log(a);//[1,2,3] console.log(b);//[1,4,3]

10：Array深拷貝deepCopy()

var a = [1,2,3]; b = []; deepCopy(a,b) console.log(a);//[1,2,3] console.log(b);//[1,2,3] b[1] = 4; console.log(a);//[1,2,3] console.log(b);//[1,4,3]function deepCopy(arr1,arr2){for(var i = 0,L = arr1.length;i<L;i++){arr2[i] = arr1[i]} }

11：上面三種方法只針對一位數(shù)組，對于多維數(shù)組有局限性

12：Array多維數(shù)組深拷貝deepCopy()

var a = [[1,2,3,4],5,6]; b = []; deepCopy(a,b) console.log(a);//[ [ 1, 2, 3, 4 ], 5, 6 ] console.log(b);//[ [ 1, 2, 3, 4 ], 5, 6 ] b[0][1] = 7; b[1] = 8; console.log(a);//[ [ 1, 7, 3, 4 ], 5, 6 ] console.log(b);//[ [ 1, 7, 3, 4 ], 8, 6 ]function deepCopy(arr1,arr2){for(var i = 0,L = arr1.length;i<L;i++){arr2[i] = arr1[i]} }

13：Array多維數(shù)組深拷貝slice(0)

var a = [[1,2,3,4],5,6]; b = a.slice(0) console.log(a);//[ [ 1, 2, 3, 4 ], 5, 6 ] console.log(b);//[ [ 1, 2, 3, 4 ], 5, 6 ] b[0][1] = 7; b[1] = 8; console.log(a);//[ [ 1, 7, 3, 4 ], 5, 6 ] console.log(b);//[ [ 1, 7, 3, 4 ], 8, 6 ]

14：Array多維數(shù)組深拷貝concat()

var a = [[1,2,3,4],5,6]; b = a.concat() console.log(a);//[ [ 1, 2, 3, 4 ], 5, 6 ] console.log(b);//[ [ 1, 2, 3, 4 ], 5, 6 ] b[0][1] = 7; b[1] = 8; console.log(a);//[ [ 1, 7, 3, 4 ], 5, 6 ] console.log(b);//[ [ 1, 7, 3, 4 ], 8, 6 ]

15：Array多維數(shù)組深拷貝deepCopy()優(yōu)化處理

16:對象淺拷貝

17：對象深拷貝

18：對象深拷貝：內(nèi)嵌對象

19：對象深拷貝deepCopy()

20：對象深拷貝deepCopy()：內(nèi)嵌對象

21:jquery中對數(shù)組的拷貝

var a = [1,2,3]; var b = $.extend([],a); console.log(a)//[1,2,3] console.log(b)//[1,2,3] b.push(4) console.log(a)//[1,2,3] console.log(b)//[1,2,3,4]

22:jquery中對對象的拷貝1

var a = {a1:1,a2:2,a3:3}; var b = $.extend({},a); console.log(a)//{a1:1,a2:2,a3:3} console.log(b)//{a1:1,a2:2,a3:3} b.b4 = 4 console.log(a)//{a1:1,a2:2,a3:3} console.log(b)//{a1:1,a2:2,a3:3,b4:4}

23:jquery中對對象的拷貝2

var a = {a1:1,a2:2,a3:3}; var b = $.extend({b0:0},a); console.log(a)//{a1:1,a2:2,a3:3} console.log(b)//{b0:0,a1:1,a2:2,a3:3} b.b4 = 4 console.log(a)//{a1:1,a2:2,a3:3} console.log(b)//{b0:0,a1:1,a2:2,a3:3,b4:4}

24:jquery中對對象的拷貝3

轉(zhuǎn)載于:https://www.cnblogs.com/bijiapo/p/5546527.html

總結(jié)

以上是生活随笔為你收集整理的javascript中浅拷贝和深拷贝的理解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。