如何在另一個物件中複製 JavaScript 物件屬性？

在 JavaScript 中，物件是鍵值對的集合。物件的屬性是鍵，並用字串表示。鍵的值是給定物件屬性的值。

在 JavaScript 中，物件可以透過多種方式複製到其他物件，其中一些方式包括：

使用擴充套件運算子 (...)

JavaScript 中的擴充套件運算子用於將原始給定物件的值複製到新物件。此運算子由三個點 (...) 表示。

示例 1

此示例演示瞭如何在 JavaScript 中使用擴充套件運算子複製物件：

var employee = {
   emp_name: "Abdul Rawoof",
   company: "Tutorials Point",
   salary: 18000,
   job: "Software Engineer-Intern"
}
console.log("The original object employee is:", employee)
var cpyEmployee = {...employee}
console.log("The copied object cpyEmployee is:",cpyEmployee);

如果物件具有巢狀物件，則使用擴充套件運算子時應編寫一些附加行。

使用 assign() 函式

此函式用於將原始物件複製到新物件。這與擴充套件運算子的區別在於，當存在巢狀物件時，如果使用 assign() 複製物件，則巢狀物件不會更改，而物件的其它變數可以更改。

assign() 函式有兩個引數。第一個引數是花括號 {}，用於確保新物件不會更改原始物件。第二個引數是要複製到新物件的原始物件的名稱。

語法

Object.assign({},originalObjectName)

示例 1

以下是 assign() 方法的示例。在這裡，我們正在建立一個物件並將其內容複製到新物件：

var employee = {
   emp_name: "Abdul Rawoof",
   company: "Tutorials Point",
   salary: 18000,
   job: "Software Engineer-Intern"
}
console.log("The original object employee is:", employee)
var cpyEmployee = Object.assign({},employee)
console.log("The copied object cpyEmployee is:",cpyEmployee);
cpyEmployee.emp_name="Jason"
cpyEmployee.job="Content writer-Intern"
console.log("The copied object with some different name and role is:",cpyEmployee)

在上面的示例中，原始物件被複制到新物件，然後更改物件的屬性。因此，由此可以得出結論，我們可以更新物件屬性的值，然後再從原始物件複製。

當使用 assign() 函式複製這些物件時，原始值和新複製的值將具有相同的引用。因此，一個值的更改會相應地改變另一個值。

示例 2

以下是assign() 方法的另一個示例。要將源物件的所有屬性複製到目標物件，可以使用以下程式碼：

const targetObj = { a: 1, b: 2 };
const sourceObj = { b: 4, c: 5 };
const returnedTarget = Object.assign(targetObj, sourceObj);
console.log(targetObj);
console.log(returnedTarget);
console.log(returnedTarget === targetObj);
console.log(sourceObj);

更新於：2022年9月2日

2K+ 次瀏覽

啟動您的職業生涯

完成課程獲得認證

開始學習
廣告