`

angular.copy用法实例

阅读更多

        angular.copy(a,b):将对象a深度拷贝至对象b,并返回对象b,完全拷贝所有数据,优点是b与a不会相互依赖(a,b完全脱离关联)。

        实例一:var r = angular.copy(a, b);将对象a中的属性深度拷贝给b对象,并返回b对象,即b、r引用的是同一个对象

var a = {
	name : 'bijian',
	address : 'shenzhen',
	family : {
		num : 6,
		amount : '80W'
	}
};
var b = {};
var r = angular.copy(a, b);
console.log('a:' + JSON.stringify(a));
console.log('b:' + JSON.stringify(b));
console.log('r:' + JSON.stringify(r));

b.address = 'hanzhou';
b.family.amount = '180W';
console.log('a:' + JSON.stringify(a));
console.log('b:' + JSON.stringify(b));
console.log('r:' + JSON.stringify(r));

运行结果:

a:{"name":"bijian","address":"shenzhen","family":{"num":6,"amount":"80W"}}
b:{"name":"bijian","address":"shenzhen","family":{"num":6,"amount":"80W"}}
r:{"name":"bijian","address":"shenzhen","family":{"num":6,"amount":"80W"}}
a:{"name":"bijian","address":"shenzhen","family":{"num":6,"amount":"80W"}}
b:{"name":"bijian","address":"hanzhou","family":{"num":6,"amount":"180W"}}
r:{"name":"bijian","address":"hanzhou","family":{"num":6,"amount":"180W"}}

 

        实例二:var r = angular.copy(a, b);将对象a中的属性深度拷贝给b对象,b与a不会相互依赖(a,b完全脱离关联)

var a = {
	name : 'bijian',
	address : 'shenzhen',
	family : {
		num : 6,
		amount : '80W'
	}
};
var b = {};
var r = angular.copy(a, b);
console.log('a:' + JSON.stringify(a));
console.log('b:' + JSON.stringify(b));
console.log('r:' + JSON.stringify(r));

a.address = 'hanzhou';
a.family.amount = '180W';
console.log('a:' + JSON.stringify(a));
console.log('b:' + JSON.stringify(b));
console.log('r:' + JSON.stringify(r));

运行结果:

a:{"name":"bijian","address":"shenzhen","family":{"num":6,"amount":"80W"}}
b:{"name":"bijian","address":"shenzhen","family":{"num":6,"amount":"80W"}}
r:{"name":"bijian","address":"shenzhen","family":{"num":6,"amount":"80W"}}
a:{"name":"bijian","address":"hanzhou","family":{"num":6,"amount":"180W"}}
b:{"name":"bijian","address":"shenzhen","family":{"num":6,"amount":"80W"}}
r:{"name":"bijian","address":"shenzhen","family":{"num":6,"amount":"80W"}}

 

        实例三:var r = angular.copy(a);将对象a对象的属性深度拷贝给对象r

var a = {
	name : 'bijian',
	address : 'shenzhen',
	family : {
		num : 6,
		amount : '80W'
	}
};
var r = angular.copy(a);
console.log('a:' + JSON.stringify(a));
console.log('r:' + JSON.stringify(r));

a.address = 'hanzhou';
a.family.amount = '180W';
console.log('a:' + JSON.stringify(a));
console.log('r:' + JSON.stringify(r));

运行结果:

a:{"name":"bijian","address":"shenzhen","family":{"num":6,"amount":"80W"}}
r:{"name":"bijian","address":"shenzhen","family":{"num":6,"amount":"80W"}}
a:{"name":"bijian","address":"hanzhou","family":{"num":6,"amount":"180W"}}
r:{"name":"bijian","address":"shenzhen","family":{"num":6,"amount":"80W"}}

 

        其实所有实例不如看源代码了解来的正确和直接,angular.copy源代码如下所示:

/**
 * @ngdoc function
 * @name angular.copy
 * @function
 *
 * @description
 * Creates a deep copy of `source`, which should be an object or an array.
 *
 * * If no destination is supplied, a copy of the object or array is created.
 * * If a destination is provided, all of its elements (for array) or properties (for objects)
 *   are deleted and then all elements/properties from the source are copied to it.
 * * If  `source` is not an object or array, `source` is returned.
 *
 * Note: this function is used to augment the Object type in Angular expressions. See
 * {@link ng.$filter} for more information about Angular arrays.
 *
 * @param {*} source The source that will be used to make a copy.
 *                   Can be any type, including primitives, `null`, and `undefined`.
 * @param {(Object|Array)=} destination Destination into which the source is copied. If
 *     provided, must be of the same type as `source`.
 * @returns {*} The copy or updated `destination`, if `destination` was specified.
 */
function copy(source, destination){
  if (isWindow(source) || isScope(source)) {
    throw ngMinErr('cpws', "Can't copy! Making copies of Window or Scope instances is not supported.");
  }

  if (!destination) {
    destination = source;
    if (source) {
      if (isArray(source)) {
        destination = copy(source, []);
      } else if (isDate(source)) {
        destination = new Date(source.getTime());
      } else if (isRegExp(source)) {
        destination = new RegExp(source.source);
      } else if (isObject(source)) {
        destination = copy(source, {});
      }
    }
  } else {
    if (source === destination) throw ngMinErr('cpi', "Can't copy! Source and destination are identical.");
    if (isArray(source)) {
      destination.length = 0;
      for ( var i = 0; i < source.length; i++) {
        destination.push(copy(source[i]));
      }
    } else {
      var h = destination.$$hashKey;
      forEach(destination, function(value, key){
        delete destination[key];
      });
      for ( var key in source) {
        destination[key] = copy(source[key]);
      }
      setHashKey(destination,h);
    }
  }
  return destination;
}
分享到:
评论

相关推荐

    angular.copy实例

    angular.copy 的使用方法 `angular.copy(source, [destination])` - `source`:要复制的对象或数组。 - `[destination]`:可选参数,如果提供,则将 `source` 复制到 `destination` 对象,否则创建新的对象。 ...

    AngularJS API之copy深拷贝详解及实例

    当点击“RESET”按钮时,`$scope.reset`方法被触发,该方法使用angular.copy()将`master`对象的值复制到`$scope.user`中。点击“SAVE”按钮时,`$scope.update`方法会被触发,它将`$scope.user`的值拷贝到`$scope....

    ionic2开发的仿外卖点餐系统(Ionic2+Angular2...包含CSS3飞入购物车效果和各种组件用法)

    then copy all files downloaded here into /wechat_restaurant 找到刚刚安在本地的项目wechat_restaurant文件夹,删除除了node_modules文件夹以外的所有文件,复制从这里下载的所有文件到项目wechat_restaurant中 ...

    欧拉公式求圆周率的matlab代码-skylibs:大量用于Python的库,用于处理高动态范围环境图

    e.copy().convertTo('angular') e_angular_sa = e_angular.solidAngles() envmap.EnvironmentMap环境地图类。 在这些格式之间轻松转换: latlong(矩形) 角度的 领域 立方体 空中的 Skylatlong 可用方法: .copy() ...

    AngularJS $modal弹出框实例代码

    下面给大家说下$modal拥有一个方法:open,该方法的...resolve:定义一个成员并将他传递给$modal指定的控制器,相当于routes的一个reslove属性,如果需要传递一个objec对象,需要使用angular.copy() backdrop:控制背

    flash shiti

    45.新增图层的方法有: A. 选择Insert菜单下的Layer命令 B. 按下图层编辑区左下方的钮 C. 按下图层编辑区左下方的钮 D. 选择File菜单下的Layer命令 FLASH 样题参考答案 1.D 2.D 3.C 4.B 5.B 6.A 7.D 8.B 9.D ...

    前端面试重难点web前端面试.doc

    Angular会定期检查数据是否发生变化,如果发现`viewModel`中的数据与备份的`copy_viewModel`不同,就会重新渲染对应的DOM节点。脏值检查通常在特定事件触发后进行,如用户输入、Ajax请求、定时器等,或者需要手动...

    clipboard.min.js下载

    3. 初始化实例:使用JavaScript创建`Clipboard`实例,并将触发复制操作的元素作为参数传入。 4. 添加事件监听器:绑定复制事件,如点击事件,调用`copy()`方法执行复制操作。 例如: ```html 这是要复制的文本"&gt;...

    Angularjs的启动过程分析

    接下来,AngularJS通过extend函数向其全局对象angular添加一系列方法和属性,例如:bootstrap、copy、extend、equals、element、forEach、injector、noop、bind等。这些方法和属性为AngularJS提供了丰富的功能,如...

    AngularJS中的表单简单入门

    $scope.user = angular.copy($scope.master); }; $scope.reset(); }); ``` 在这里,`$scope.master`对象存储了表单的初始值,`$scope.reset()`方法负责在点击重置按钮时将`$scope.user`恢复为初始状态。 **表单...

    AngularJs 弹出模态框(model)

    如果传递的是对象,应该使用angular.copy()来避免引用传递带来的问题。 - backdrop: 控制模态窗口背景的行为。可以设置为true(默认值,点击背景关闭模态框)、false(无背景)、或"static"(背景存在,但点击不会...

    超多AutoCAD图集

    4. **尺寸标注**:AutoCAD提供了多种尺寸样式和类型,如线性(Linear)、对齐(Aligned)、角度(Angular)等,通过实例,你可以学会如何正确标注图形尺寸。 5. **图块和外部参照**:图块(Block)是将常用图形保存...

    AutoCAD 2014建筑设计经典案例视频教程下载第4章 二维绘图基础.zip

    8. **图形对象选择与操作**:包括窗口选择(Window)、交叉选择(Crossing)和圈选(Lasso)等方法,以及对象选择过滤器的使用。 9. **视图控制**:掌握平移(Pan)和缩放(Zoom)命令,了解鸟瞰视图(Viewcube)和...

    AutoCAD 2015机械设计228例视频教程下载第02章 二维图形快速编辑.zip

    本教程聚焦于AutoCAD 2015版本在机械设计中的应用,通过228个实例详细讲解了二维图形的快速编辑技巧。在“第02章 二维图形快速编辑”中,我们将深入学习如何高效地操作和修改AutoCAD的二维图纸。 1. 基本绘图工具:...

    cad使用教程

    本教程以侯老师的AutoCAD为例,讲解其功能和使用方法,AutoCAD是业界标准的2D和3D设计软件,适用于各种专业领域。 三、界面与工作空间 AutoCAD的用户界面包括菜单栏、工具栏、命令行、绘图区等元素。用户可以根据...

    ajax 多线程时间 进度条

    `Copy_of_guagedemo`可能是一个包含示例代码的文件,用于演示如何使用Gauge(仪表盘)组件来创建进度条效果。Gauge组件常见于各种UI库,如Angular Material、Bootstrap、ECharts等,可以轻松定制样式和动画效果。 ...

    autocad命令全集

    这个"AutoCAD命令全集"文档将详细列出所有这些命令的用法、参数和实例,帮助用户全面掌握AutoCAD的操作技巧。通过深入学习和实践,设计师可以更加熟练地运用AutoCAD进行专业级别的设计工作。无论是建筑、机械、电气...

    AUTOCAD2007教程PPT版.rar

    此外,教程也会涵盖修改工具,如移动(Move)、旋转(Rotate)、复制(Copy)和修剪(Trim)等,这些工具使用户能够精确地调整图形元素。 在深入学习过程中,AutoCAD 2007的尺寸标注功能将被详细介绍,包括线性...

Global site tag (gtag.js) - Google Analytics