當我們想要復制原始值和引用值(對象)時，它們的行為會大不相同。

公司主營業(yè)務：成都網站制作、成都做網站、外貿營銷網站建設、移動網站開發(fā)等業(yè)務。幫助企業(yè)客戶真正實現互聯網宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯推出廣安免費做網站回饋大家。

原始值

我們假設一個變量 name 具有一個與之關聯的原始值(number，string，boolean，undefined 和null)。如果我們將此變量 name 復制到另一個變量name2 ，則原始變量的任何修改都不會影響到第二個變量，因為它們是原始值。

 
 
 
 

  
  
  
  
let name="前端小智"; 
  
  
  
  
let name2= name; 
  
  
  
  
console.log (name, name2); // 前端小智, 前端小智 
  
  
  
  
name="王大冶"; 
  
  
  
  
console.log (name,name2); // 王大冶 前端小智 
 
 
 
 

引用值

但是，如果我們對引用類型的值進行相同的操作，則我們對一個變量所做的任何更改也將反映在另一個變量中，因為兩個變量都指向同一對象。

數組

要拷貝數組，slice()方法用于創(chuàng)建數組的新副本?？梢元毩⑿薷拇烁北?，而不會影響原始數組。

如果未傳遞任何參數，則它會精確復制數組，但數字也可以作為參數傳遞。如果僅傳遞一個數字，它將確定我們要從其進行復制的索引的值，而如果傳遞兩個數字，則將標記開始和結束。

 
 
 
 

  
  
  
  
// 示例1 
  
  
  
  
const names = ['前端小智', '王大冶', '小力']; 
  
  
  
  
const names2 = names; 
  
  
  
  
console.log(names, names2); 
  
  
  
  
// ["前端小智", "王大冶", "小力"]  
  
  
  
  
// ["前端小智", "王大冶", "小力"]  
  
  
  
  
 
  
  
  
  
// 示例2 
  
  
  
  
names2[2] = '前端小力'; 
  
  
  
  
console.log(names, names2); 
  
  
  
  
//  ["前端小智", "王大冶", "前端小力"]  
  
  
  
  
//  ["前端小智", "王大冶", "前端小力"]  
  
  
  
  
 
  
  
  
  
// 示例3 
  
  
  
  
const name2 = names.slice(); 
  
  
  
  
names[2] = '我是隔壁老智'; 
  
  
  
  
console.log(name2, names2) 
  
  
  
  
// ["前端小智", "王大冶", "前端小力"] 
  
  
  
  
//  ["前端小智", "王大冶", "我是隔壁老智"] 
 
 
 
 

對象

當引用值是一個對象時，也會發(fā)生同樣的情況，對其屬性之一的任何修改都會影響這兩個變量。若要克隆對象，請使用 Object.assign()方法，該方法會將一個或多個源對象的所有可枚舉屬性的值復制到目標對象，但是此方法僅對對象的一個淺拷貝。

 
 
 
 

  
  
  
  
// 示例1 
  
  
  
  
const names = { 
  
  
  
  
  name: '前端小智', 
  
  
  
  
  surname: '隔壁老智' 
  
  
  
  
} 
  
  
  
  
 
  
  
  
  
const names2 = names; 
  
  
  
  
console.log(names, names2) // 打印結果是一模一樣的 
  
  
  
  
 
  
  
  
  
// 示例2 
  
  
  
  
names2.surname ='隔壁老王'; 
  
  
  
  
console.log(names, names2) 
  
  
  
  
 
  
  
  
  
// {name: "前端小智", surname: "隔壁老王"} 
  
  
  
  
// {name: "前端小智", surname: "隔壁老王"} 
  
  
  
  
 
  
  
  
  
// 示例3 
  
  
  
  
const names3 = Object.assign({}, names); 
  
  
  
  
names3.surname = '隔壁老色P'; 
  
  
  
  
console.log(names, names3) 
  
  
  
  
 
  
  
  
  
// {name: "前端小智", surname: "隔壁老王"} 
  
  
  
  
// {name: "前端小智", surname: "隔壁老色P"} 
 
 
 
 

要對對象進行深拷貝，需要使用其他方法。

正如我們所說，Object.assign()方法只是一個淺拷貝(即，當我們的對象沒有其他對象作為屬性時)才有效。在這些情況下，必須對對象進行深拷貝。

與淺拷貝不同，深拷貝以遞歸方式復制每個子對象，直到所有涉及的對象都被復制為止。

我們可以使用什么方法復制對象的深層副本?

JSON.parse(JSON.stringify(obj))

此方法使用JSON.stringify()將對象轉換為字符串，然后再用JSON.parse()將其轉換回對象。此方法對簡單對象有效，但如果對象屬性是函數時無效。

 
 
 
 

  
  
  
  
const names = { 
  
  
  
  
  name: '前端小智', 
  
  
  
  
  surname: '隔壁老智', 
  
  
  
  
  social: { 
  
  
  
  
    wx: '大遷世界', 
  
  
  
  
    url: 'www.lsp.com' 
  
  
  
  
  } 
  
  
  
  
} 
  
  
  
  
const names2 = JSON.parse(JSON.stringify(names)); 
  
  
  
  
names2.social.url = 'www.baidu.com'; 
  
  
  
  
console.log(names, names2); 
  
  
  
  
 
  
  
  
  
/**  
  
  
  
  
{ 
  
  
  
  
  name: "前端小智" 
  
  
  
  
  social: {wx: "大遷世界", url: "www.lsp.com"} 
  
  
  
  
  surname: "隔壁老智" 
  
  
  
  
} 
  
  
  
  
*/ 
  
  
  
  
 
  
  
  
  
/**  
  
  
  
  
{ 
  
  
  
  
  name: "前端小智" 
  
  
  
  
  social: {wx: "大遷世界", url: "www.baidu.com"} 
  
  
  
  
  surname: "隔壁老智" 
  
  
  
  
} 
  
  
  
  
*/ 
 
 
 
 

深度拷貝

另一種非常有趣和優(yōu)雅的對象深度復制方法是使用遞歸函數。

我們創(chuàng)建了一個deepClone(object)函數，將想要克隆的對象作為參數傳遞給它。在函數內部，將創(chuàng)建一個局部變量克隆，這是一個空對象，其中將從起始對象克隆的每個屬性都將添加到該對象中。

具體思路：

• 如果該屬性不是對象，則將其簡單地克隆并添加到新的克隆對象中。
• 如果屬性是對象，則再次執(zhí)行deepClone(value)函數，并將屬性的值(在這種情況下為對象)作為參數傳遞，并重復相同的過程。

 
 
 
 

  
  
  
  
function deepClone(object) { 
  
  
  
  
  var clone = {}; 
  
  
  
  
  for (var key in object) { 
  
  
  
  
    var value = object[key]; 
  
  
  
  
    if (typeof(value) !== 'object') { 
  
  
  
  
      clone[key] = value; 
  
  
  
  
    } else { 
  
  
  
  
      clone[key]=deepClone(value); 
  
  
  
  
    } 
  
  
  
  
  } 
  
  
  
  
  return clone; 
  
  
  
  
}  
  
  
  
  
 
  
  
  
  
deepClone({value1:1,value2:{value3:2}}); 
  
  
  
  
//{value1:1,value2:{value3:2}} 
  
  
  
  
deepClone({value1:1,value2:{value3:{value3b:3}}}); 
  
  
  
  
//{value1:1,value2:{value3:{value3b:3}}} 
 
 
 
 

 作者：Luigi Nori 譯者：前端小智 來源：stackabuse

原文：https://www.ma-o.org/en/programming/javascript/the-javascript-asign-method-to-merge-and-clone-objects

當前名稱：在JavaScript中如何克隆對象？
文章分享：http://uogjgqi.cn/article/dhjigij.html