在 JavaScript 中如何克隆物件？

前端小智發表於2022-12-20
JavaScript物件
微信搜尋 【大遷世界】, 我會第一時間和你分享前端行業趨勢，學習途徑等等。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

當我們想要複製原始值和引用值（物件）時，它們的行為會大不相同。

原始值

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

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

引用值

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

陣列

要複製陣列，slice()方法用於建立陣列的新副本。 可以獨立修改此副本，而不會影響原始陣列。

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

// 示例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)
// ["前端小智", "王大冶", "前端小力"]
//  ["前端小智", "王大冶", "我是隔壁老智"]

物件

當引用值是一個物件時，也會發生同樣的情況，對其屬性之一的任何修改都會影響這兩個變數。 若要克隆物件，請使用 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: "隔壁老智"
}
*/

深度複製

另一種非常有趣和優雅的物件深度複製方法是使用遞迴函式。

我們建立了一個deepClone(object)函式，將想要克隆的物件作為引數傳遞給它。在函式內部，將建立一個區域性變數克隆，這是一個空物件，其中將從起始物件克隆的每個屬性都將新增到該物件中。

具體思路：

  • 如果該屬性不是物件，則將其簡單地克隆並新增到新的克隆物件中。
  • 如果屬性是物件，則再次執行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}}}

程式碼部署後可能存在的BUG沒法實時知道，事後為了解決這些BUG，花了大量的時間進行log 除錯，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。

原文：https://www.ma-o.org/en/progr...

交流

有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq44924588... 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

相關文章