理解深拷貝和淺拷貝之前先了解下js中的基本型別和參考型別
1、基本型別：
在js中，資料的基本型別undefined，null，string，number，boolean，在變數中賦的實際值，基本型別就是簡單的資料段，
基本型別的值是不可以改變的
var a = 1;
var b = a;
a++;
console.log(a); //2
console.log(b); //1
這里a和b是獨立的，當改變a或b，其另外一個值不會隨之改變
2、參考型別：
在js中，資料的參考型別object,Array,RegExp,date,function，在變數中賦的實際值
參考型別的值是可以改變的
var arr = [1,2,3,4,5];
var arr2 = arr;
arr[0] = 2;
console.log(arr); //[2、2、3、4、5]
console.log(arr2);//[2、2、3、4、5]
這里在改變arr[0]中的值后，arr2資料也跟著改變，參考型別在賦值的時候(arr2=arr),其實在堆疊記憶體中添加了arr2，但是堆記憶體中還是[1,2,3,4,5]，通俗點講就是參考型別賦值并非真正意義上的資料賦值，而是在堆疊記憶體中添加一個指標，還是指向堆記憶體中的[1,2,3,4,5],只添加堆疊記憶體的指標
好，到這里我們在討論深拷貝和淺拷貝，深拷貝顧名思義是在資料是相互獨立的，改資料而另一個不受影響，淺拷貝則是資料會隨之改變而改變，
這么一看，基本型別不正好是嘛，資料都是相互獨立的，乍看好像還真是的，
但是，但是，我們所說的深拷貝必須要在復雜的object型別下，基本型別里沒有object，那么只能是參考型別，
再來看個例子:
var arr3 = [[1,2],3,4,5];
var arr4 = arr3;
arr3[0][1] = 3;
console.log(arr3); //[[1,3],3,4,5]
console.log(arr4); //[[1,3],3,4,5]
明明改了arr3，為何arr4也改了，這不是我想要的，那如何獨立呢，你會發現使用什么for回圈，slice，concat是根本不管用的，網上有其他的坑，在此我就不多說了，直接說解決辦法
方法1、JSON
利用JSON.stringify和JSON.parse
var arr3 = [[1,2],3,4,5];
var arr4 = JSON.parse(JSON.stringify(arr3));
arr3[0][1] = 3;
console.log(arr3); //[[1,3],3,4,5]
console.log(arr4); //[[1,2],3,4,5]
但是這種方法有個小弊端，就是值不能為undefined或null，最好對資料提前判斷
方法2、jq $.extend
$.extend([deep],target,object1[,objextN]); //deep 值為true或false，true為深拷貝，false為淺拷貝，target 目標物件，其他物件的成員屬性將被附加到該物件上 object1/objextN 是需要被操作的物件，可以是多個，這里是例子中的arr3
var arr3 = [[1,2],3,4,5];
var arr4 = $.extend(true,[],arr3);
arr3[0][1] = 3;
console.log(arr3); //[[1,3],3,4,5]
console.log(arr4); //[[1,2],3,4,5]
以上就是介紹的兩種方法
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/14877.html
標籤：JavaScript
上一篇：vue生命周期理解（粗略總結）