[解決済み] なぜ、そしていつangular.copyを使うのか?(ディープコピー)
2022-05-27 17:50:39
質問
サービスから受け取ったデータを全てローカル変数、コントローラ、スコープに直接保存しています。浅いコピーとみなされるものだと思いますが、正しいのでしょうか?
Example:
DataService.callFunction()
.then(function(response) {
$scope.example = response.data;
});
最近、ディープコピーを作成するためにangular.copyを使うように言われました。
$scope.example = angular.copy(response.data);
しかし、私のAngularアプリケーションで使用する場合、ディープコピー情報は同じように動作しているようです。 ディープコピー(angular.copy)を使用する具体的な利点はありますか、そして私にそれを説明することができますか?
どのように解決するのですか?
使用方法
angular.copy
は、オブジェクトや配列の値を別の変数に代入するときに使用します。
object
の値が変更されてはいけません。
がなければ ディープコピー を使用するか angular.copyを使用します。 また、プロパティの値を変更したり、新しいプロパティを追加する場合は 全てのオブジェクトを更新する はその同じオブジェクトを参照します。
var app = angular.module('copyExample', []);
app.controller('ExampleController', ['$scope',
function($scope) {
$scope.printToConsole = function() {
$scope.main = {
first: 'first',
second: 'second'
};
$scope.child = angular.copy($scope.main);
console.log('Main object :');
console.log($scope.main);
console.log('Child object with angular.copy :');
console.log($scope.child);
$scope.child.first = 'last';
console.log('New Child object :')
console.log($scope.child);
console.log('Main object after child change and using angular.copy :');
console.log($scope.main);
console.log('Assing main object without copy and updating child');
$scope.child = $scope.main;
$scope.child.first = 'last';
console.log('Main object after update:');
console.log($scope.main);
console.log('Child object after update:');
console.log($scope.child);
}
}
]);
// Basic object assigning example
var main = {
first: 'first',
second: 'second'
};
var one = main; // same as main
var two = main; // same as main
console.log('main :' + JSON.stringify(main)); // All object are same
console.log('one :' + JSON.stringify(one)); // All object are same
console.log('two :' + JSON.stringify(two)); // All object are same
two = {
three: 'three'
}; // two changed but one and main remains same
console.log('main :' + JSON.stringify(main)); // one and main are same
console.log('one :' + JSON.stringify(one)); // one and main are same
console.log('two :' + JSON.stringify(two)); // two is changed
two = main; // same as main
two.first = 'last'; // change value of object's property so changed value of all object property
console.log('main :' + JSON.stringify(main)); // All object are same with new value
console.log('one :' + JSON.stringify(one)); // All object are same with new value
console.log('two :' + JSON.stringify(two)); // All object are same with new value
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="copyExample" ng-controller="ExampleController">
<button ng-click='printToConsole()'>Explain</button>
</div>
関連
-
WeChatアプレット用ユニアプリによるグローバルシェアリング
-
Javascript Bootstrapのグリッドシステム、ナビゲーションバー、ローテーションの説明
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] JSONPとは何か、なぜ作られたのか?
-
[解決済み] Node.jsを使うタイミングをどう判断するか?
-
[解決済み] JavaScriptで二重引用符と単一引用符はいつ使うべきですか?
-
[解決済み] varキーワードの目的と、どのような場合に使用する(または省略する)べきですか?
-
[解決済み] encodeURI / encodeURIComponentの代わりにescapeを使用するのはどのような場合ですか?
-
[解決済み] AngularJSで$scope.$watchと$scope.$applyを使用するにはどうすればよいですか?
-
[解決済み] ディープコピーとシャローコピーの違いは何ですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
Vueがechartsのtooltipにクリックイベントを追加するケーススタディ
-
WeChatアプレット用ユニアプリによるグローバルシェアリング
-
vue+webrtc(Tencent cloud)ライブ機能の実践を実現するために
-
VUEグローバルフィルターの概念と留意点、基本的な使い方
-
Vueの「データを聴く」原則を解説
-
[解決済み] 期待される代入または関数呼び出し: 未使用式なし ReactJS
-
[解決済み】<select>で現在選択されている<option>をJavaScriptで取得するにはどうすればよいですか?
-
nodejs unhandledPromiseRejectionWarning メッセージ
-
フロントエンド非同期(アシンク)ソリューション(全ソリューション)
-
jq は html ページとデータを動的に分割する。