在 Javasript 中合併物件
Kushank Singh
2023年10月12日
-
在 JavaScript 中使用
object.assign()函式合併物件 - 在 JavaScript 中使用擴充套件運算子合並物件
-
在 JavaScript 中使用
array.reduce()函式合併物件 -
在 JavaScript 中使用
jquery.extend()函式合併物件 - 在 JavaScript 中使用使用者定義的函式合併物件
物件是一種非原始資料型別，它允許我們以鍵值對的形式儲存資料。
在本教程中，我們將使用不同的方法在 JavaScript 中合併兩個或多個物件。
在 JavaScript 中使用 object.assign() 函式合併物件
在 JavaScript 中，assign() 方法可以迭代地從一個或多個物件讀取屬性到目標物件。它返回目標物件。我們可以用一個空物件傳遞兩個物件來合併它們。
參考下面的程式碼。
var obj1 = {
fruits: ['Banana', 'Mango'],
vegetables: ['Potato', 'Broccoli'],
};
var obj2 = {
store: 'Walmart',
};
var obj3 = Object.assign({}, obj1, obj2);
console.log(obj3);
輸出：
{fruits: ["Banana", "Mango"], vegetables: ["Potato", "Broccoli"], store: "Walmart"}
在 JavaScript 中使用擴充套件運算子合並物件
在 JavaScript 中，展開運算子 (…) 可以解包陣列的所有元素。我們也可以用它來合併物件。
有關如何使用此方法的資訊，請參考以下程式碼。
var obj1 = {
fruits: ['Banana', 'Mango'],
vegetables: ['Potato', 'Broccoli'],
};
var obj2 = {
store: 'Walmart',
};
var obj3 = {...obj1, ...obj2};
console.log(obj3);
輸出：
{fruits: ["Banana", "Mango"], vegetables: ["Potato", "Broccoli"], store: "Walmart"}
在 JavaScript 中使用 array.reduce() 函式合併物件
在這裡，我們使用了 array.reduce() 函式，該函式用於在陣列中的每個元素上實現一個 reducer 函式（由你提供）。它返回單個輸出值。
我們在以下程式碼片段中實現了這一點。
var obj1 = {
fruits: ['Banana', 'Mango'],
vegetables: ['Potato', 'Broccoli'],
};
var obj2 = {
store: 'Walmart',
};
function merge(...arr) {
return arr.reduce((acc, val) => {
return {...acc, ...val};
}, {});
}
var obj3 = merge(obj1, obj2);
console.log(obj3);
輸出：
{fruits: ["Banana", "Mango"], vegetables: ["Potato", "Broccoli"], store: "Walmart"}
在 JavaScript 中使用 jquery.extend() 函式合併物件
jQuery 是一個輕量級且速度非常快的 JavaScript 庫。它簡化了 JavaScript 的使用。
extend() 是一種 jQuery 方法，用於將兩個或多個物件合併為一個物件。它返回一個物件。
例如，
var obj1 = {
fruits: ['Banana', 'Mango'],
vegetables: ['Potato', 'Broccoli'],
};
var obj2 = {
store: 'Walmart',
};
jQuery.extend(obj1, obj2);
輸出：
{fruits: ["Banana", "Mango"], vegetables: ["Potato", "Broccoli"], store: "Walmart"}
在 JavaScript 中使用使用者定義的函式合併物件
在這裡，我們建立了自己的函式來返回一個合併的物件。它使用兩個物件的屬性合併成第三個物件。
參考下面的程式碼。
var obj1 = {
fruits: ['Banana', 'Mango'],
vegetables: ['Potato', 'Broccoli'],
};
var obj2 = {
store: 'Walmart',
};
function merge_options(obj1, obj2) {
var obj3 = {};
for (var key in obj1) {
obj3[key] = obj1[key];
}
for (var key in obj2) {
obj3[key] = obj2[key];
}
return obj3;
};
merge_options(obj1, obj2);
輸出：
{fruits: ["Banana", "Mango"], vegetables: ["Potato", "Broccoli"], store: "Walmart"}