在 Javasript 中合併物件

Kushank Singh 2023年1月30日 2021年7月3日
  1. 在 JavaScript 中使用 object.assign() 函式合併物件
  2. 在 JavaScript 中使用擴充套件運算子合並物件
  3. 在 JavaScript 中使用 array.reduce() 函式合併物件
  4. 在 JavaScript 中使用 jquery.extend() 函式合併物件
  5. 在 JavaScript 中使用使用者定義的函式合併物件
在 Javasript 中合併物件

物件是一種非原始資料型別,它允許我們以鍵值對的形式儲存資料。

在本教程中,我們將使用不同的方法在 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"}

相關文章 - JavaScript Object