JavaScript的淺拷貝和深拷貝

GeekQiaQia 發(fā)布于2019-08-23 14:09 / 2620人閱讀

摘要：但是進(jìn)行的是淺拷貝，拷貝的是屬性值。對象展開符深拷貝的實現(xiàn)方式手動復(fù)制轉(zhuǎn)成再轉(zhuǎn)回來只有可以轉(zhuǎn)成格式的對象才可以這樣用，像沒辦法轉(zhuǎn)成沒被改到使用方法避免相互引用對象導(dǎo)致死循環(huán)，如的情況四參考關(guān)于的淺拷貝和深拷貝

一、理解

淺拷貝只復(fù)制指向某個對象的指針，而不復(fù)制對象本身，新舊對象還是共享同一塊內(nèi)存。但深拷貝會另外創(chuàng)造一個一模一樣的對象，新對象跟原對象不共享內(nèi)存，修改新對象不會改到原對象。

二、淺拷貝與深拷貝

淺拷貝：賦值時，基本數(shù)據(jù)類型按值傳遞，對象按引用傳遞

var a = 25;
var b = a;
b = 18;
console.log(a);//25
console.log(b);//18
// b的修改并不會影響到a，因為它們是基本類型數(shù)據(jù)

var obj1 = { a: 10, b: 20, c: 30 };
var obj2 = obj1;
obj2.b = 100;
console.log(obj1);
// { a: 10, b: 100, c: 30 } <-- b 被改到了
console.log(obj2);
// { a: 10, b: 100, c: 30 }
// obj2修改了b的值，同時obj1的b也會被修改，因為他們根本是同一個對象，這就是所謂的淺拷貝

深拷貝：

var obj1 = { a: 10, b: 20, c: 30 };
var obj2 = { a: obj1.a, b: obj1.b, c: obj1.c };
obj2.b = 100;
console.log(obj1);
// { a: 10, b: 20, c: 30 } <-- b 沒被改到
console.log(obj2);
// { a: 10, b: 100, c: 30 }

三、實現(xiàn)方式

淺拷貝的實現(xiàn)方式
（1）直接賦值，就是淺拷貝。對象直接復(fù)制，則新對象的改變也會修改到舊對象。
（2） Object.assign(target, ...sources)

Object.assign是ES6的新函數(shù)。Object.assign()方法可以把任意多個的源對象自身的可枚舉屬性拷貝給目標(biāo)對象，然后返回目標(biāo)對象。但是Object.assign()進(jìn)行的是淺拷貝，拷貝的是屬性值。假如源對象的屬性值是一個指向?qū)ο蟮囊茫仓豢截惸莻€引用值。

var obj = { a: {a: "hello", b: 21} };
var initalObj = Object.assign({}, obj);

initalObj.a.a = "changed";
console.log(obj.a.a); // "changed"

（3）對象展開符...

var obj = [{index: 1, msg: "one"}, {index: 2, msg: "two"}];
var obj2 = [...obj];

console.log(obj2); //[{index: 1, msg: "one"}, {index: 2, msg: "two"}]

obj2.push({index: 3, msg: "three"});
console.log(obj2); // [{index: 1, msg: "one"}, {index: 2, msg: "two"}, {index: 3, msg: "three"}]
console.log(obj); // [{index: 1, msg: "one"}, {index: 2, msg: "two"}]

obj2[1].msg = "two again";
console.log(obj2); // [{index: 1, msg: "one"}, {index: 2, msg: "two again"}, {index: 3, msg: "three"}]
console.log(obj); // [{index: 1, msg: "one"}, {index: 2, msg: "two again"}]

深拷貝的實現(xiàn)方式
（1）手動復(fù)制

var obj1 = { a: 10, b: 20, c: 30 };
var obj2 = { a: obj1.a, b: obj1.b, c: obj1.c };

（2）轉(zhuǎn)成JSON再轉(zhuǎn)回來（只有可以轉(zhuǎn)成JSON格式的對象才可以這樣用，像function沒辦法轉(zhuǎn)成JSON）

var obj1 = { body: { a: 10 } };
var obj2 = JSON.parse(JSON.stringify(obj1));
obj2.body.a = 20;
console.log(obj1);
// { body: { a: 10 } } <-- 沒被改到
console.log(obj2);
// { body: { a: 20 } }
console.log(obj1 === obj2);
// false
console.log(obj1.body === obj2.body);
// false

（3）使用var newObj = Object.create(oldObj)方法

function deepClone(initalObj, finalObj) {    
  var obj = finalObj || {};    
  for (var i in initalObj) {        
    var prop = initalObj[i];        // 避免相互引用對象導(dǎo)致死循環(huán)，如initalObj.a = initalObj的情況
    if(prop === obj) {            
      continue;
    }        
    if (typeof prop === "object") {
      obj[i] = (prop.constructor === Array) ? [] : Object.create(prop);
    } else {
      obj[i] = prop;
    }
  }    
  return obj;
}

var str = {};
var obj = { a: {a: "hello", b: 21} };
deepClone(obj, str);

四、參考

【1】關(guān)于JavaScript的淺拷貝和深拷貝