angular2 - copiar array javascript
¿Por qué y cuándo usar angular.copy?(Copia profunda) (7)
Cuando se utiliza angular.copy, en lugar de actualizar la referencia, se crea un nuevo objeto y se asigna al destino (si se proporciona un destino). Pero hay más. Hay algo genial que sucede después de una copia profunda.
Supongamos que tiene un servicio de fábrica que tiene métodos que actualizan las variables de fábrica.
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;
}]);
y un controlador que usa este servicio,
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);
}]);
Cuando se ejecuta el programa anterior, la salida será la siguiente,
****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]
Por lo tanto, lo bueno de usar la copia angular es que las referencias del destino se reflejan con el cambio de valores, sin tener que reasignar los valores manualmente, nuevamente.
He estado guardando todos los datos recibidos de los servicios directamente en la variable local, el controlador o el alcance. Lo que supongo que se consideraría una copia superficial, ¿es correcto?
Example:
DataService.callFunction()
.then(function(response) {
$scope.example = response.data;
});
Recientemente me dijeron que usara angular.copy para crear una copia profunda.
$scope.example = angular.copy(response.data);
Sin embargo, la información de copia profunda parece estar funcionando de la misma manera cuando es utilizada por mi aplicación Angular. ¿Existen beneficios específicos al usar una copia profunda (angular.copy) y, por favor, puede explicarme?
En ese caso, no necesita usar
angular.copy()
Explicacion :
-
=representa una referencia, mientras queangular.copy()crea un nuevo objeto como una copia profunda. -
Usar
=significaría que cambiar una propiedad deresponse.datacambiaría la propiedad correspondiente de$scope.exampleo viceversa. -
Usando
angular.copy()los dos objetos permanecerían separados y los cambios no se reflejarían entre sí.
Javascript pasa variables
by reference
, esto significa que:
var i = [];
var j = i;
i.push( 1 );
Ahora,
by reference
parte
i
es [1], y
j
es [1], aunque solo
i
haya cambiado.
Esto se debe a que cuando decimos que
j = i
javascript no copia la variable
i
y la asigna a
j
sino que hace referencia a la variable
i
través de
j
.
La copia angular nos permite perder esta referencia, lo que significa:
var i = [];
var j = angular.copy( i );
i.push( 1 );
Ahora
i
aquí es igual a [1], mientras que
j
todavía es igual a [].
Hay situaciones en las que este tipo de funcionalidad de
copy
es muy útil.
Sé que ya ha respondido, pero solo estoy tratando de hacerlo simple. Entonces angular.copy (datos) puede usar en caso de que desee modificar / cambiar su objeto recibido manteniendo sus valores originales sin modificar / sin modificar.
Por ejemplo: supongamos que hice una llamada a API y obtuve mi OriginalObj, ahora quiero cambiar los valores de api originalObj en algún caso, pero también quiero los valores originales, así que lo que puedo hacer es hacer una copia de mi api originalObj en duplicateObj y modificar duplicateObj de esta manera, mis valores originalesObj no cambiarán. En palabras simples, la modificación duplicateObj no se reflejará en originalObj a diferencia de cómo se comporta js obj.
$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);
El resultado es como ...
----------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"}
Solo estoy compartiendo mi experiencia aquí, utilicé angular.copy () para comparar las propiedades de dos objetos. Estaba trabajando en varias entradas sin elemento de formulario, me preguntaba cómo comparar las propiedades de dos objetos y, en función del resultado, tengo que habilitar y deshabilitar el botón Guardar. Entonces lo usé como a continuación.
Asigné valores de usuario de un objeto de servidor original a mi objeto ficticio, por ejemplo, userCopy y usé watch para verificar los cambios en el objeto de usuario.
mi API de servidor que me da datos del servidor
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();
});
// inicialmente mi botón guardar está desactivado porque los objetos son iguales, una vez que algo // cambia estoy activando guardar btn
$scope.btnSts=true;
$scope.$watch(''user'', function(newVal, oldVal){
console.log($scope.userCopy.name);
console.log();
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);
No estoy seguro, pero comparar dos objetos fue realmente un dolor de cabeza para mí siempre, pero con angular.copy () se realizó sin problemas.
Yo diría
angular.copy(source);
en su situación es innecesario si más tarde no lo usa sin un destino
angular.copy(source, [destination]);
.
Si se proporciona un destino, todos sus elementos (para matrices) o propiedades (para objetos) se eliminan y luego todos los elementos / propiedades de la fuente se copian en él.
Use
angular.copy
cuando asigne el valor del objeto o matriz a otra variable y ese valor del
object
no debe cambiarse.
Sin una copia profunda o utilizando angular.copy , cambiar el valor de la propiedad o agregar cualquier propiedad nueva actualiza todos los objetos que hacen referencia a ese mismo objeto.
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>