創(chuàng)建一個新的對象，來接受你要重新復(fù)制或引用的對象值。如果對象屬性是基本的數(shù)據(jù)類型，復(fù)制的就是基本類型的值給新對象；但如果屬性是引用數(shù)據(jù)類型，復(fù)制的就是內(nèi)存中的地址，如果其中一個對象改變了這個內(nèi)存中的地址，會影響到另一個對象。

實(shí)現(xiàn)方法

方法一：Object.assign

es6 中 object 的一個方法，用于 JS 對象的合并等,返回目標(biāo)對象。它不會拷貝對象的繼承屬性和不可枚舉的屬性

let target = {};
let source = {a:{b:1}};
Object.assign(target,source)
console.log(taget) // {a:{b:1}}
target.a.b = 2;
console.log(taget) // {a:{b:2}}
console.log(source) // {a:{b:2}}

方法二：擴(kuò)展運(yùn)算符方式

/* 對象的拷貝 */
let obj = {a:1,b:{c:1}}
let obj2 = {...obj}
obj.a = 2
console.log(obj)  //{a:2,b:{c:1}}
console.log(obj2); //{a:1,b:{c:1}}
obj.b.c = 2
console.log(obj)  //{a:2,b:{c:2}} 
console.log(obj2); //{a:1,b:{c:2}}
/* 數(shù)組的拷貝 */
let arr = [1, 2, 3];
let newArr = [...arr];

方法三：concat和slice 淺拷貝數(shù)組

僅僅針對數(shù)組類型，都會返回一個新的數(shù)組對象。

concat 淺拷貝數(shù)組
let arr = [1, 2, 3];
let newArr = arr.concat();
newArr[1] = 100;
console.log(arr);  // [ 1, 2, 3 ]
console.log(newArr); // [ 1, 100, 3 ]

slice 淺拷貝數(shù)組
let arr = [1, 2, {val: 4}];
let newArr = arr.slice();
newArr[2].val = 1000;
console.log(arr);  //[ 1, 2, { val: 1000 } ]

深拷貝

將一個對象從內(nèi)存中完整地拷貝出來一份給目標(biāo)對象，并從堆內(nèi)存中開辟一個全新的空間存放新對象，且新對象的修改并不會改變原對象，二者實(shí)現(xiàn)真正的分離。

實(shí)現(xiàn)方法

方法一：乞丐版（JSON.stringify和JSON.parse）

let obj1 = { a:1, b:[1,2,3] }
let str = JSON.stringify(obj1)；
let obj2 = JSON.parse(str)；
console.log(obj2);   //{a:1,b:[1,2,3]} 
obj1.a = 2；
obj1.b.push(4);
console.log(obj1);   //{a:2,b:[1,2,3,4]}
console.log(obj2);   //{a:1,b:[1,2,3]}

缺陷：

拷貝的對象的值中如果有函數(shù)、undefined、symbol 這幾種類型，經(jīng)過 JSON.stringify 序列化之后的字符串中這個鍵值對會消失
拷貝 Date 引用類型會變成字符串
無法拷貝不可枚舉的屬性
無法拷貝對象的原型鏈
拷貝 RegExp 引用類型會變成空對象
對象中含有 NaN、Infinity 以及 -Infinity，JSON 序列化的結(jié)果會變成 null

手寫遞歸實(shí)現(xiàn)

基礎(chǔ)版

 let obj = {a:{b:1}};
 function deepClone(obj){
  let cloneObj = Object.prototype.toString.call(obj) === "[object Array]" ? [] : {};
   for(let key in obj){
     if(typeof obj[key]=== "object" && obj !== null){
       cloneObj[key] = deepClone(obj[key])
     }else{
       cloneObj[key] = obj[key]
     }
   }
   return cloneObj;
 }
 let obj2 = deepClone(obj);
 obj2.a.b = 33
 console.log("obj",obj) // {a:{b:1}}
 console.log("obj2",obj2) // {a:{b:33}}

缺陷：　　

不能復(fù)制不可枚舉的屬性以及 Symbol 類型　　
這種方法只是針對普通的引用類型的值做遞歸復(fù)制，而對于 Array、Date、RegExp、Error、Function 這樣的引用類型并不能正確地拷貝
對象的屬性里面成環(huán)，即循環(huán)引用沒有解決

改進(jìn)版

const isComplexDataType = obj => (typeof obj === 'object' || typeof obj === 'function') && (obj !== null)
const deepClone = function (obj, hash = new WeakMap()) {
  if (obj.constructor === Date) 
  return new Date(obj)       // 日期對象直接返回一個新的日期對象
  if (obj.constructor === RegExp)
  return new RegExp(obj)     //正則對象直接返回一個新的正則對象
  //如果循環(huán)引用了就用 weakMap 來解決
  if (hash.has(obj)) return hash.get(obj)
  let allDesc = Object.getOwnPropertyDescriptors(obj)
  //遍歷傳入?yún)?shù)所有鍵的特性
  let cloneObj = Object.create(Object.getPrototypeOf(obj), allDesc)
  //繼承原型鏈
  hash.set(obj, cloneObj)
  for (let key of Reflect.ownKeys(obj)) { 
    cloneObj[key] = (isComplexDataType(obj[key]) && typeof obj[key] !== 'function') ? deepClone(obj[key], hash) : obj[key]
  }
  return cloneObj
}

手寫深拷貝參考：

http://chabaoo.cn/article/247540.htm

http://chabaoo.cn/article/247544.htm

其他實(shí)現(xiàn)方法

lodash庫的_.cloneDeep方法，jQuery.extend()方法

FAQ:賦值和深淺拷貝的區(qū)別

注意：前提都是針對引用類型

賦值

當(dāng)我們把一個對象賦值給一個新的變量時，賦的其實(shí)是該對象的在棧中的地址，而不是堆中的數(shù)據(jù)。也就是兩個對象指向的是同一個存儲空間，無論哪個對象發(fā)生改變，其實(shí)都是改變的存儲空間的內(nèi)容，因此，兩個對象是聯(lián)動的。

let a = {name:'jimmy',b:{age:12}}
let b = a;
b.name = 'chimmy';
b.b.age = 21;
console.log(a) //  {name:'chimmy',b:{age:21}}
console.log(b) //  {name:'chimmy',b:{age:21}}

淺拷貝

重新在堆中創(chuàng)建內(nèi)存，拷貝前后對象的基本數(shù)據(jù)類型互不影響，但拷貝前后對象的引用類型因共享同一塊內(nèi)存，會相互影響。

let a = {name:'jimmy',b:{age:12}}
let b = {...a};
b.name = 'chimmy';
b.b.age = 21;
console.log(a) //  {name:'jimmy',b:{age:21}}
console.log(b) //  {name:'chimmy',b:{age:21}}

深拷貝

將一個對象從內(nèi)存中完整地拷貝出來一份給目標(biāo)對象，并從堆內(nèi)存中開辟一個全新的空間存放新對象，且新對象的修改并不會改變原對象，二者實(shí)現(xiàn)真正的分離。

let a = {name:'jimmy',b:{age:12}}
let b = {...a};
b.name = 'chimmy';
b.b.age = 21;
console.log(a) //  {name:'jimmy',b:{age:12}}
console.log(b) //  {name:'chimmy',b:{age:21}}