angular.copy를 사용하는 이유와 시기(Deep Copy)

angular.copy를 사용하는 이유와 시기(Deep Copy)

서비스에서 받은 모든 데이터를 로컬 변수, 컨트롤러 또는 범위에 직접 저장했습니다.얕은 복사라고 생각되는 게 맞나?

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>

때는 안 돼요.angular.copy()

설명:

• = 있습니다.단, 「」는 참조를 나타내고 있습니다.angular.copy()는 새로운 객체를 딥카피로 만듭니다.

• 「」를 사용합니다.=하는 것을 합니다.response.data대응하는 특성을 바꿀 수 있다$scope.example또는 그 반대도 마찬가지입니다.

• 「」를 사용합니다.angular.copy()두 물체는 분리된 상태로 유지되며 변화는 서로에게 반영되지 않습니다.

라고 말할 수 것 같다.angular.copy(source);.angular.copy(source, [destination]);.

대상이 지정되면 모든 요소(배열용) 또는 속성(개체용)이 삭제되고 소스의 모든 요소/속성이 복사됩니다.

https://docs.angularjs.org/api/ng/function/angular.copy

angular.copy를 사용하면 참조를 업데이트하는 대신 새 개체가 생성되어 대상에 할당됩니다(대상 지정 시).하지만 더 있습니다.딥 카피 후에 일어나는 멋진 일이 있어요.

공장 변수를 업데이트하는 방법을 사용하는 공장 서비스가 있다고 가정해 보십시오.

angular.module('test').factory('TestService', [function () {
    var o = {
        shallow: [0,1], // initial value(for demonstration)
        deep: [0,2] // initial value(for demonstration)
    }; 
    o.shallowCopy = function () {
        o.shallow = [1,2,3]
    }
    o.deepCopy = function () {
        angular.copy([4,5,6], o.deep);
    }
    return o;
}]);

이 서비스를 사용하는 컨트롤러,

angular.module('test').controller('Ctrl', ['TestService', function (TestService) {
     var shallow = TestService.shallow;
     var deep = TestService.deep;

     console.log('****Printing initial values');
     console.log(shallow);
     console.log(deep);

     TestService.shallowCopy();
     TestService.deepCopy();

     console.log('****Printing values after service method execution');
     console.log(shallow);
     console.log(deep);

     console.log('****Printing service variables directly');
     console.log(TestService.shallow);
     console.log(TestService.deep);
}]);

위 프로그램을 실행하면 다음과 같이 출력됩니다.

****Printing initial values
[0,1]
[0,2]

****Printing values after service method execution
[0,1]
[4,5,6]

****Printing service variables directly
[1,2,3]
[4,5,6]

따라서 앵글 복사를 사용하면 수동으로 값을 재할당하지 않고도 대상 참조가 값의 변경과 함께 반영된다는 장점이 있습니다.

이미 대답한 건 알지만, 그래도 간단하게 하려고요.so angular.copy(데이터)는 원래 값을 변경하지 않고 그대로 유지함으로써 수신된 개체를 수정/변경하려는 경우에 사용할 수 있습니다.

예를 들어 api 호출을 하고 originalObj를 얻었다고 가정해 봅시다.어떤 경우에는 api originalObj의 값을 변경하고 싶지만 원래 값도 변경하고 싶기 때문에 api originalObj의 복사본을 duplicateObj에 복사하여 이 방법으로 my OriginalObj 값을 변경할 수 있습니다.간단히 말하면, js obj의 동작과 달리 duplicateObj 수정은 originalObj에 반영되지 않습니다.

 $scope.originalObj={
            fname:'sudarshan',
            country:'India'
        }
        $scope.duplicateObj=angular.copy($scope.originalObj);
        console.log('----------originalObj--------------');
        console.log($scope.originalObj);
        console.log('-----------duplicateObj---------------');
        console.log($scope.duplicateObj);

        $scope.duplicateObj.fname='SUD';
        $scope.duplicateObj.country='USA';
        console.log('---------After update-------')
        console.log('----------originalObj--------------');
        console.log($scope.originalObj);
        console.log('-----------duplicateObj---------------');
        console.log($scope.duplicateObj);

결과는 다음과 같습니다.

    ----------originalObj--------------
manageProfileController.js:1183 {fname: "sudarshan", country: "India"}
manageProfileController.js:1184 -----------duplicateObj---------------
manageProfileController.js:1185 {fname: "sudarshan", country: "India"}
manageProfileController.js:1189 ---------After update-------
manageProfileController.js:1190 ----------originalObj--------------
manageProfileController.js:1191 {fname: "sudarshan", country: "India"}
manageProfileController.js:1192 -----------duplicateObj---------------
manageProfileController.js:1193 {fname: "SUD", country: "USA"}

여기서 제 경험을 공유하려고 합니다.저는 angular.copy()를 사용하여 두 개체의 속성을 비교했습니다.폼 엘리먼트를 사용하지 않고 여러 입력에 대해 작업하고 있었는데, 두 개체의 속성을 어떻게 비교해야 할지 고민하고 있었고, 결과에 따라 저장 버튼을 활성화하거나 비활성화해야 했습니다.그래서 나는 아래와 같이 사용했다.

원래 서버 오브젝트 사용자 값을 더미 오브젝트에 할당하여 userCopy라고 하고 워치를 사용하여 사용자 오브젝트의 변경을 체크했습니다.

서버에서 데이터를 가져오는 서버 API:

var req = {
    method: 'GET',
    url: 'user/profile/' + id,
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
}
$http(req).success(function(data) {
    $scope.user = data;
    $scope.userCopy = angular.copy($scope.user);
    $scope.btnSts=true;
}).error(function(data) {
    $ionicLoading.hide();
});

//initially my save button is disabled because objects are same, once something 
//changes I am activating save button

$scope.btnSts = true;
$scope.$watch('user', function(newVal, oldVal) {
    console.log($scope.userCopy.name);

    if ($scope.userCopy.name !== $scope.user.name || $scope.userCopy.email !== $scope.user.email) {
        console.log('Changed');
        $scope.btnSts = false;
    } else {
        console.log('Unchanged');
        $scope.btnSts = true;
    }    
}, true);

잘 모르겠습니다만, 두 물건을 비교하는 것은 저에게 항상 골칫거리였지만, angular.copy()를 사용하면 원활하게 진행되었습니다.

Javascript가 변수를 전달합니다.by reference의 의미는 다음과 같습니다.

var i = [];
var j = i;
i.push( 1 );

때문에by reference일부i는 [1] 입니다.j[1]도 마찬가지입니다.i변경되었습니다.왜냐하면 우리가 말할 때j = ijavascript가 복사되지 않습니다.i변수화 및 할당j단, 레퍼런스i을 통해 변하다.j.

앵글 카피에서는, 이 참조가 없어집니다.즉, 다음과 같습니다.

var i = [];
var j = angular.copy( i );
i.push( 1 );

지금이다i여기에서는 [1]에 해당합니다만,j아직 []와 같습니다.

그런 일이 있을 수 있어요.copy기능은 매우 편리합니다.

언급URL : https://stackoverflow.com/questions/33043850/why-and-when-to-use-angular-copy-deep-copy