Angular.jsでオブジェクトのコピー・上書き・比較をしてみる

Angular.jsでオブジェクトのコピー・上書き・比較をしてみます。

copy

copyはオブジェクトをディープコピーします。

HTML

<div ng-controller="ctrl">
	<div class="button">
		<button ng-hide="flag" ng-click="add()">データ変更</button>
	</div>
</div>

JavaScript

angular.module('app', []).controller('ctrl', function($scope) {
	var data1 = {
		'leader': 'マナト',
		'member': [
			{
				'name': 'ハルヒロ',
				'class': '盗賊'
			}, {
				'name': 'ランタ',
				'class': '暗黒騎士'
			}, {
				'name': 'マナト',
				'class': '神官'
			}, {
				'name': 'モグゾー',
				'class': '戦士'
			}, {
				'name': 'ユメ',
				'class': '狩人'
			}, {
				'name': 'シホル',
				'class': '魔法使い'
			}
		]
	};

	// data2にdata1をディープコピー
	var data2 = angular.copy(data1);

	// データ変更前の値
	console.log(data1);
	console.log(data2);

	// データ変更の処理
	$scope.flag = false;
	$scope.add = function() {
		// data1の値を変更する
		data1['member'].splice(2,1);
		data1['leader'] = 'ハルヒロ';
		data1['member'].push({
			'name': 'メリイ',
			'class': '神官'
		})
		data1['member'].splice(2,1);
		data1['member'].push({
			'name': 'クザク',
			'class': '聖騎士'
		})

		// データ変更後の値
		console.log(data1);
		console.log(data2);

		$scope.flag = true;
	}
});

ディープコピーを行うため、コピー元を変更してもコピー先は変更されません。
また、$scopeのオブジェクトのコピーはできません。
copyのデモページ
　

extend

extendは別のオブジェクトから要素を追加(上書き)します。

HTML

<div ng-controller="ctrl">
	<div class="button">
		<button ng-hide="flag" ng-click="add()">データ変更</button>
	</div>
</div>

JavaScript

angular.module('app', []).controller('ctrl', function($scope) {
	var data1 = {
		'leader': 'マナト',
		'member': [
			{
				'name': 'ハルヒロ',
				'class': '盗賊'
			}, {
				'name': 'ランタ',
				'class': '暗黒騎士'
			}, {
				'name': 'マナト',
				'class': '神官'
			}, {
				'name': 'モグゾー',
				'class': '戦士'
			}, {
				'name': 'ユメ',
				'class': '狩人'
			}, {
				'name': 'シホル',
				'class': '魔法使い'
			}
		]
	};

	// 上書きするデータ1
	var data2 = {
		'leader': 'ハルヒロ',
		'member': [
			{
				'name': 'ハルヒロ',
				'class': '盗賊'
			}, {
				'name': 'ランタ',
				'class': '暗黒騎士'
			}, {
				'name': 'モグゾー',
				'class': '戦士'
			}, {
				'name': 'ユメ',
				'class': '狩人'
			}, {
				'name': 'シホル',
				'class': '魔法使い'
			}, {
				'name': 'メリイ',
				'class': '神官'
			}
		]
	};

	// 上書きするデータ2
	var data3 = {
		'member': [
			{
				'name': 'ハルヒロ',
				'class': '盗賊'
			}, {
				'name': 'ランタ',
				'class': '暗黒騎士'
			}, {
				'name': 'ユメ',
				'class': '狩人'
			}, {
				'name': 'シホル',
				'class': '魔法使い'
			}, {
				'name': 'メリイ',
				'class': '神官'
			}, {
				'name': 'クザク',
				'class': '聖騎士'
			}
		]
	};

	// 上書き前の値
	console.log(data1);

	// データ上書きの処理
	$scope.flag = false;
	$scope.add = function(index) {
		// data1にdata2,data3の値を上書きする
		angular.extend(data1, data2, data3);

		// 上書き後の値
		console.log(data1);

		$scope.flag = true;
	}
});

既にある要素の場合は値が上書きされ、ない場合は追加されます。
extendのデモページ
　

equals

equalsはオブジェクトを比較して、一致するかどうかでtrue/falseを返します。

HTML

<div ng-controller="ctrl">
</div>

JavaScript

angular.module('app', []).controller('ctrl', function($scope) {
	var data1 = {
		'leader': 'マナト',
		'member': [
			{
				'name': 'ハルヒロ',
				'class': '盗賊'
			}, {
				'name': 'ランタ',
				'class': '暗黒騎士'
			}, {
				'name': 'マナト',
				'class': '神官'
			}, {
				'name': 'モグゾー',
				'class': '戦士'
			}, {
				'name': 'ユメ',
				'class': '狩人'
			}, {
				'name': 'シホル',
				'class': '魔法使い'
			}
		]
	};

	var data2 = {
		'leader': 'ハルヒロ',
		'member': [
			{
				'name': 'ハルヒロ',
				'class': '盗賊'
			}, {
				'name': 'ランタ',
				'class': '暗黒騎士'
			}, {
				'name': 'ユメ',
				'class': '狩人'
			}, {
				'name': 'シホル',
				'class': '魔法使い'
			}, {
				'name': 'メリイ',
				'class': '神官'
			}, {
				'name': 'クザク',
				'class': '聖騎士'
			}
		]
	};

	var data3 = {
		'leader': 'ハルヒロ',
		'member': [
			{
				'name': 'クザク',
				'class': '聖騎士'
			}, {
				'name': 'ランタ',
				'class': '暗黒騎士'
			}, {
				'name': 'ハルヒロ',
				'class': '盗賊'
			}, {
				'name': 'ユメ',
				'class': '狩人'
			}, {
				'name': 'シホル',
				'class': '魔法使い'
			}, {
				'name': 'メリイ',
				'class': '神官'
			}
		]
	};

	var data4 = {
		'leader': 'ハルヒロ',
		'member': [
			{
				'class': '聖騎士',
				'name': 'クザク'
			}, {
				'class': '暗黒騎士',
				'name': 'ランタ'
			}, {
				'class': '盗賊',
				'name': 'ハルヒロ'
			}, {
				'class': '狩人',
				'name': 'ユメ'
			}, {
				'class': '魔法使い',
				'name': 'シホル'
			}, {
				'class': '神官',
				'name': 'メリイ'
			}
		]
	};

	// データの比較
	console.log(angular.equals(data1, data2)); // 中身が異なる
	console.log(angular.equals(data2, data3)); // 配列内の順番が異なる
	console.log(angular.equals(data3, data4)); // オブジェクトの順番が異なる
});

連想配列の場合、要素の順番が異なっても同じオブジェクトであると判断されます。。
また、$scopeのオブジェクトの比較はできません。
equalsのデモページ