關於javascript的深拷貝淺拷貝思考

時間 2019-11-24

原文原文鏈接

深拷貝，淺拷貝

什麼是複製？javascript
- 簡單變量的複製，內存小，咱們直接複製不會發生引用。
- 首先深複製和淺複製只針對像 Object, Array 這樣的複雜對象的。簡單來講，淺複製只複製一層對象的屬性，而深複製則遞歸複製了全部層級。

下面是一個簡單的淺複製前端

淺複製只會將對象的屬性依次複製，而不會進行遞歸，而 javascript 儲存對象都是村地址的，淺複製就是將 obj.arr 和 shallowObj.arr 指向同一個內存地址

var obj = { a:1, arr: [2,3] };
var shallowObj = shallowCopy(obj);

function shallowCopy(src) {
  var dst = {};
  for (var prop in src) {
    if (src.hasOwnProperty(prop)) {
      dst[prop] = src[prop];
    }
  }
  return dst;
}
複製代碼

當咱們測試的時候就會發現這樣的結果

shallowObj.arr[1] = 5;
obj.arr[1]   // = 5
複製代碼

下面是一個深複製的例子java
- 深複製的原理上面提到了，咱們直接來看代碼。
```
var obj = { a:1, arr: [1,2] };
var obj2 = deepCopy(obj);

複製代碼
```

下面來討論廣泛的深淺複製的幾種實現方法git

ES6 使用兩種複製方法不會發生引用github
- array2 = Array.form(array1)
- array2 = [...array1];

基本的 js 數組和 json 複製json

array2 = array1.slice(0)
array2 = array1.concat()

//循環複製
for(var i = 0;i < arr1.length; i++){
    arr2[i] = arr1[i];
}

//json數據
for(var name in json1){
    json2[name] = json1[name];
}
複製代碼

淺複製的幾種方法數組

var json1 = {"a":"panda","arr1":[1,2,3]}
function copy(obj1) {
    var obj2 = {};
&emsp;&emsp;for (var i in obj1) {
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;obj2[i] = obj1[i];
&emsp;&emsp;}
    return obj2;
}
var json2 = copy(json1);
json1.arr1.push(4);
alert(json1.arr1);  //1234
alert(json2.arr1)  //1234
複製代碼

深複製的幾種方法hexo

//簡單粗暴的深複製
//劣勢:沒法複製函數
//原型鏈沒了，對象就是object，所屬的類沒了。
function jsonClone(obj) {
    return JSON.parse(JSON.stringify(obj));
}
var clone = jsonClone({ a:1 });
---------------
var json1={"name":"panda","age":18,"arr1":[1,2,3,4,5],"string":'afasfsafa',"arr2":[1,2,3,4,5],"arr3":[{"name1":"panda"},{"job":"前端開發"}]};
var json2={};

function copy(obj1,obj2){
  var obj2=obj2||{}; //最初的時候給它一個初始值=它本身或者是一個json
  for(var name in obj1){
    if(typeof obj1[name] === "object"){ //先判斷一下obj[name]是否是一個對象
      obj2[name]= (obj1[name].constructor===Array)?[]:{}; //咱們讓要複製的對象的name項=數組或者是json
      copy(obj1[name],obj2[name]); //而後來無限調用函數本身 遞歸思想
    }else{
      obj2[name]=obj1[name];  //若是不是對象，直接等於便可，不會發生引用。
    }
  }
  return obj2; //而後在把複製好的對象給return出去
}
json2=copy(json1,json2)
json1.arr1.push(6);
alert(json1.arr1);  //123456
alert(json2.arr1);  //12345

複製代碼