Javasript でオブジェクトをマージする
Kushank Singh
2023年10月12日
-
JavaScript で
object.assign()関数を使用してオブジェクトをマージする - JavaScript でスプレッド演算子を使用してオブジェクトをマージする
-
JavaScript で
array.reduce()関数を使用してオブジェクトをマージする -
JavaScript で
jquery.extend()関数を使用してオブジェクトをマージする - JavaScript でユーザー定義関数を使用してオブジェクトをマージする
オブジェクトは、キーと値のペアでデータを格納できるようにする非プリミティブデータ型です。
このチュートリアルでは、異なるメソッドを使用して JavaScript で 2つ以上のオブジェクトをマージします。
JavaScript で object.assign() 関数を使用してオブジェクトをマージする
JavaScript では、assign() メソッドは、1つまたは複数のオブジェクトからターゲットオブジェクトにプロパティを繰り返し読み取ることができます。ターゲットオブジェクトを返します。空のオブジェクトを持つ 2つのオブジェクトを渡して、それらをマージできます。
以下のコードを確認してください。
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 では、spread 演算子（…）は配列のすべての要素を解凍できます。これを使用してオブジェクトをマージすることもできます。
このメソッドの使用方法については、次のコードを参照してください。
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() 関数を使用しました。これは、配列内の各要素に（指定した）レデューサー関数を実装するために使用されます。単一の出力値を返します。
これは、次のコードスニペットで実装します。
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() は、2つ以上のオブジェクトを 1つのオブジェクトにマージするために使用される 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 でユーザー定義関数を使用してオブジェクトをマージする
ここでは、マージされたオブジェクトを返す独自の関数を作成します。2つのオブジェクトのプロパティを使用して 3 番目のオブジェクトにマージされます。
以下のコードを確認してください。
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"}