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

什么是拷貝？

簡單地說就是復制，對數據的復制

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

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

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

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

對于引用數據類型，通過復制的形式一般就是淺拷貝

6：Array淺拷貝

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

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深拷貝

復制的不僅是引用，還有引用值，堆中也未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：上面三種方法只針對一位數組，對于多維數組有局限性

12：Array多維數組深拷貝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多維數組深拷貝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多維數組深拷貝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多維數組深拷貝deepCopy()優化處理

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

16:對象淺拷貝

var a = {name:"zyb",age:23}; var b = a; console.log(a)//{ name: 'zyb', age: 23 } console.log(b);//{ name: 'zyb', age: 23 }a.name = "lisi"; console.log(a)//{ name: 'lisi', age: 23 } console.log(b);//{ name: 'lisi', age: 23 }

17：對象深拷貝

var a = {name:"zyb",age:23}; var b = new Object();b.name = a.name; b.age = a.age; console.log(a)//{ name: 'zyb', age: 23 } console.log(b);//{ name: 'zyb', age: 23 }a.name = "lisi"; console.log(a)//{ name: 'lisi', age: 23 } console.log(b);//{ name: 'zyb', age: 23 }

18：對象深拷貝：內嵌對象

var a = {name:"zyb",age:23,list:{goods:"籃球",detail:"運動是好的" }}; var b = new Object();b.name = a.name; b.age = a.age; b.list = a.list; console.log(a)//{ name: 'zyb', age: 23, list: { goods: '籃球', detail: '運動是好的' } } console.log(b);//{ name: 'zyb', age: 23, list: { goods: '籃球', detail: '運動是好的' } }a.name = "lisi"; a.list.goods = "足球"; console.log(a)//{ name: 'lisi', age: 23, list: { goods: '足球', detail: '運動是好的' } } console.log(b);//{ name: 'zyb', age: 23, list: { goods: '足球', detail: '運動是好的' } }

19：對象深拷貝deepCopy()

var a = {name:"zyb",age:23}; var b = deepCopy(a);console.log(a)//{ name: 'zyb', age: 23 } console.log(b);//{ name: 'zyb', age: 23 }a.name = "lisi";console.log(a)//{ name: 'lisi', age: 23 } console.log(b);//{ name: 'zyb', age: 23 }function deepCopy(obj){var result = {};for(var key in obj){if(obj.hasOwnProperty(key)){result[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key];}}return result; }

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

var a = {name:"zyb",age:23,list:{goods:"籃球",detail:"運動是好的" }}; var b = deepCopy(a)console.log(a)//{ name: 'zyb', age: 23, list: { goods: '籃球', detail: '運動是好的' } } console.log(b);//{ name: 'zyb', age: 23, list: { goods: '籃球', detail: '運動是好的' } }a.name = "lisi"; a.list.goods = "足球"; console.log(a)//{ name: 'lisi', age: 23, list: { goods: '足球', detail: '運動是好的' } } console.log(b);//{ name: 'zyb', age: 23, list: { goods: '籃球', detail: '運動是好的' } }function deepCopy(obj){var result = {};for(var key in obj){if(obj.hasOwnProperty(key)){result[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key];}}return result; }

21:jquery中對數組的拷貝

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

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

轉載于:https://www.cnblogs.com/bijiapo/p/5546527.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。