为什么以及何时使用 angular.copy?(深拷贝) [英] Why and when to use angular.copy? (Deep Copy)

问题描述

我一直将所有从服务接收到的数据直接保存到局部变量、控制器或作用域.我认为应该被视为浅拷贝，对吗?

示例:数据服务.callFunction().then(功能(响应){$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',功能($范围){$scope.printToConsole = function() {$scope.main = {第一:'第一'，第二个:'第二个'};$scope.child = angular.copy($scope.main);console.log('主对象:');console.log($scope.main);console.log('带有 angular.copy 的子对象:');控制台日志($scope.child)；$scope.child.first = 'last';console.log('新子对象:')控制台日志($scope.child)；console.log('子项更改后的主对象并使用 angular.copy :');console.log($scope.main);console.log('Assing main object without copy and update child');$scope.child = $scope.main;$scope.child.first = 'last';console.log('更新后的主对象:');console.log($scope.main);console.log('更新后的子对象:');控制台日志($scope.child)；}}]);//基本对象分配示例变量主 = {第一:'第一'，第二个:'第二个'};var 一 = 主要;//与主相同var 二 = 主要;//与主相同console.log('main :' + JSON.stringify(main));//所有对象都相同console.log('one :' + JSON.stringify(one));//所有对象都相同console.log('二:' + JSON.stringify(二));//所有对象都相同二 = {三:'三'};//两个改变了，但一个和 main 保持不变console.log('main :' + JSON.stringify(main));//one 和 main 相同console.log('one :' + JSON.stringify(one));//one 和 main 相同console.log('二:' + JSON.stringify(二));//两个变了二 = 主要;//与主相同二.第一 = '最后';//改变对象属性的值，从而改变所有对象属性的值console.log('main :' + JSON.stringify(main));//所有对象都与新值相同console.log('one :' + JSON.stringify(one));//所有对象都与新值相同console.log('二:' + JSON.stringify(二));//所有对象都与新值相同

<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()'>解释</button>

I've been saving all the data received from services direct to local variable, controller, or scope. What I suppose would be considered a shallow copy, is that correct?

Example:

DataService.callFunction()
.then(function(response) {
  $scope.example = response.data;
});

Recently I was told to use angular.copy in order to create a deep copy.

$scope.example = angular.copy(response.data);

However, the deep copy information seems to be working in the same way when used by my Angular application. Are there specific benefits to using a deep copy (angular.copy) and can you please explain them to me?

解决方案

Use angular.copy when assigning value of object or array to another variable and that object value should not be changed.

Without deep copy or using angular.copy, changing value of property or adding any new property update all object referencing that same object.

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>

这篇关于为什么以及何时使用 angular.copy?(深拷贝)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！