JavaScriptでオブジェクトをマージするコードと実行結果を紹介します。
JavaScriptで2つのオブジェクトをマージして1つのオブジェクトにします。
以下の書式が利用できます。
var (マージされたオブジェクト変数) = Object.assign({}, (オブジェクト変数1), (オブジェクト変数2));
var (マージされたオブジェクト変数) = { ...(オブジェクト変数1), ...(オブジェクト変数2) };
以下のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
var obj_a = {
valueA: 10,
valueC: "Penguin"
}
var obj_b = {
valueB: "Tokyo",
valueD: 2300
}
function MergeObject() {
var obj_m = Object.assign({}, obj_a, obj_b);
var elem = document.getElementById("output");
elem.innerHTML += "valueA:" + obj_m.valueA + "<br>";
elem.innerHTML += "valueB:" + obj_m.valueB + "<br>";
elem.innerHTML += "valueC:" + obj_m.valueC + "<br>";
elem.innerHTML += "valueD:" + obj_m.valueD + "<br>";
}
</script>
</head>
<body>
<h2>JavaScriptのオブジェクトをマージする</h2>
<button onclick="MergeObject();">Click</button>
<hr/>
<div id="output">
</div>
</body>
</html>
2つのオブジェクトを作成します。
var obj_a = {
valueA: 10,
valueC: "Penguin"
}
var obj_b = {
valueB: "Tokyo",
valueD: 2300
}
assignメソッドでマージします。マージしたオブジェクトを obj_m 変数に代入します。
var obj_m = Object.assign({}, obj_a, obj_b);
オブジェクトのメンバの値をページに表示します。
var elem = document.getElementById("output");
elem.innerHTML += "valueA:" + obj_m.valueA + "<br>";
elem.innerHTML += "valueB:" + obj_m.valueB + "<br>";
elem.innerHTML += "valueC:" + obj_m.valueC + "<br>";
elem.innerHTML += "valueD:" + obj_m.valueD + "<br>";
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
[Click]ボタンをクリックします。ページの下部に値が表示されます。4つのメンバの値が表示されています。
以下のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
var obj_a = {
valueA: 10,
valueC: "Penguin"
}
var obj_b = {
valueB: "Tokyo",
valueD: 2300
}
function MergeObject() {
var obj_m = { ...obj_a, ...obj_b };
var elem = document.getElementById("output");
elem.innerHTML += "valueA:" + obj_m.valueA + "<br>";
elem.innerHTML += "valueB:" + obj_m.valueB + "<br>";
elem.innerHTML += "valueC:" + obj_m.valueC + "<br>";
elem.innerHTML += "valueD:" + obj_m.valueD + "<br>";
}
</script>
</head>
<body>
<h2>JavaScriptのオブジェクトをマージする (スプレッド構文)</h2>
<button onclick="MergeObject();">Click</button>
<hr/>
<div id="output">
</div>
</body>
</html>
先の例と同じですが、結合処理をスプレッド構文で記述しています。
var obj_m = { ...obj_a, ...obj_b };
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
[Click]ボタンをクリックします。ページの下部に値が表示されます。4つのメンバの値が表示されています。
以下のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
var obj_a = {
valueA: 10,
valueC: "Penguin"
}
var obj_b = {
valueB: "Tokyo",
valueC: "Duck"
}
function MergeObject() {
var obj_m = Object.assign({}, obj_a, obj_b);
//var obj_m = Object.assign({}, obj_b, obj_a);
var elem = document.getElementById("output");
elem.innerHTML += "valueA:" + obj_m.valueA + "<br>";
elem.innerHTML += "valueB:" + obj_m.valueB + "<br>";
elem.innerHTML += "valueC:" + obj_m.valueC + "<br>";
}
</script>
</head>
<body>
<h2>JavaScriptのオブジェクトをマージする</h2>
<button onclick="MergeObject();">Click</button>
<hr/>
<div id="output">
</div>
</body>
</html>
先の例と同じですが、valueC メンバが両方のオブジェクトにあり衝突する状況です。
ページを表示し、ボタンをクリックすると下図の結果となります。obj_bのメンバが上書きされる状態になります。
#img("javascript-merge-object-05,maxwidth=420)
MergeObject()関数のコードを以下にします。obj_a と obj_b の順番を逆にします。
function MergeObject() {
//var obj_m = Object.assign({}, obj_a, obj_b);
var obj_m = Object.assign({}, obj_b, obj_a);
var elem = document.getElementById("output");
elem.innerHTML += "valueA:" + obj_m.valueA + "<br>";
elem.innerHTML += "valueB:" + obj_m.valueB + "<br>";
elem.innerHTML += "valueC:" + obj_m.valueC + "<br>";
}
ページを表示し、ボタンをクリックすると下図の結果となります。obj_aのメンバが上書きされる状態になります。
#img("javascript-merge-object-06,maxwidth=420)
後ろに記述したオブジェクトのメンバが上書きされる動作になることがわかりました。
