jQuery extendでオブジェクトをマージする

jQueryのextendメソッドでオブジェクトをマージするサンプルです。

サンプル	オブジェクトをマージする(extend)
	同じキー項目の値は上書きされる
	同じキー項目の値の上書きを避ける
	再帰的にコピーする

オブジェクトをマージする(extend)

jQuery.extend( [deep ], target, object1 [, objectN ] )

引数のオブジェクトをマージします。オブジェクトは2つ以上でも可能です。
以下は、jQueryのextendメソッドのリンクです。
https://api.jquery.com/jquery.extend/

extendメソッドでマージするサンプルです。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
	const color1 = {
		id: 1,
		name: '赤'
	};
	
	const color2 = {
		romaji: 'red'
	};
	
	$.extend(color1, color2);
	
	console.log(color1);//{id: 1, name: "赤", romaji: "red"}
	console.log(color2);//{romaji: "red"}
</script>

3～6行目は、1つめのオブジェクトです。
8～10行目は、2つめのオブジェクトです。
12行目は、メソッドで2つのオブジェクトをマージしています。
14行目は、1つめのオブジェクトです。値が追加されています。
15行目は、2つめのオブジェクトです。値は変わりません。

同じキー項目の値は上書きされる

同じキー項目の場合のサンプルです。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
	const color1 = {
		id: 1,
		name: '赤'
	};
	
	const color2 = {
		id: 2,
		romaji: 'red'
	};
	
	$.extend(color1, color2);
	
	console.log(color1);//{id: 2, name: "赤", romaji: "red"}
	console.log(color2);//{id: 2, romaji: "red"}
</script>

7,12行目のキー項目は同じidです。
その場合、後から追加した値で上書きされます。

同じキー項目の値の上書きを避ける

同じキー項目の値の上書きを避けるサンプルです。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
	const color1 = {
		id: 1,
		name: '赤'
	};
	
	const color2 = {
		id: 2,
		romaji: 'red'
	};

	$color3 = $.extend({},color1,color2);
	console.log($color3);//{id: 2, name: "赤", romaji: "red"}
	console.log(color1);//{id: 1, name: "赤"}
	console.log(color2);//{id: 2, romaji: "red"}
</script>

13行目は、空のオブジェクト、1つめのオブジェクト、2つめのオブジェクトをマージして新しい変数に代入しています。
引数の2つめ以降のオブジェクトは上書きされません。

再帰的にコピーする

再帰的にコピーするサンプルです。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
	const color1 = {
		id: 1,
		name: {
			name1: "赤",
			romaji1: "red"
		},

	};
	
	const color2 = {
		name: {
			romaji1: "red"
		},
	};

	$.extend(true,color1,color2);
	console.log(color1);
	//trueあり {id: 1, name: {name1: "赤", romaji1: "red"}}
	//trueなし {id: 1, name: {romaji1: "red"}}
</script>

１つ目の引数にtrueを指定すると再帰的にコピーします。(ディープコピー)
20行目は、trueありの場合です。
21行目は、trueなしの場合です。