浅谈angular.copy() 深拷贝


Posted in Javascript onSeptember 14, 2017

因为项目中需要拷贝,查阅angularjs API文档,发现对angular.copy() 的解释:

复制一个对象或者一个数组(好吧,万物皆对象,数组也是一个对象)。

1> 如果省略了destination,一个新的对象或数组将会被创建出来;
2> 如果提供了destination,则source对象中的所有元素和属性都会被复制到destination中;
3> 如果source不是对象或数组(例如是null或undefined), 则返回source;
4> 如果source和destination类型不一致,则会抛出异常。 注意:这个是单纯复制覆盖,不是类似继承。

使用方法:

angular.copy(source, [destination]);

参数:

参数名称 参数类型 描述
source * 被copy的对象. 可以使任意类型, 包括null和undefined.
destination (optional) Object,array copy去的目的地. 可以省略, 如果不省略, 其必须和source是同类

返回值:

返回复制或更新后的对象

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
  </head>

  <body ng-app="copyApp">
    <div ng-controller="CopyController">
      <form novalidate class="simple-form">
        姓名: <input type="text" ng-model="user.name" /><br /> 
        年龄:<input type="number" ng-model="user.age" /><br /> 
        邮箱: <input type="email" ng-model="user.email" /><br />
        性别:<input type="radio" ng-model="user.gender" value="male" /> 男
        <input type="radio" ng-model="user.gender" value="female" /> 女
        <br />
        <button ng-click="reset()">重置</button>
        <button ng-click="update(user)">保存(拷贝)</button>
      </form>
      <pre>form = {{user | json}}</pre>
      <pre>master = {{master | json}}</pre>
    </div>

    <script>
      angular.module('copyApp', [])
        .controller('CopyController', ['$scope', function($scope) {
          $scope.master = {};
          $scope.update = function(user) {
            $scope.master = angular.copy(user);
            console.log($scope.master);
          };
          $scope.reset = function() {
            angular.copy($scope.user, $scope.master);
            console.log($scope.master);// Object { }
            console.log($scope.user); //undefined
          };
          $scope.reset();
        }]);
    </script>
  </body>

</html>

效果图

浅谈angular.copy() 深拷贝

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript数组组合成字符串的脚本
Jan 06 Javascript
node.js中的fs.link方法使用说明
Dec 15 Javascript
JavaScript中的console.dir()函数介绍
Dec 29 Javascript
简化版手机端照片预览组件
Apr 13 Javascript
JS制作手机端自适应缩放显示
Jun 11 Javascript
JQuery操作textarea,input,select,checkbox方法
Sep 02 Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
Feb 17 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
Oct 29 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
Nov 22 Javascript
基于vue2.0动态组件及render详解
Mar 17 Javascript
vue中轮训器的使用
Jan 27 Javascript
微信小程序select下拉框实现源码
Nov 08 Javascript
说说AngularJS中的$parse和$eval的用法
Sep 14 #Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
Sep 14 #Javascript
日期时间范围选择插件:daterangepicker使用总结(必看篇)
Sep 14 #Javascript
详解React Native顶|底部导航使用小技巧
Sep 14 #Javascript
Angularjs 1.3 中的$parse实例代码
Sep 14 #Javascript
浅谈JavaScript中的属性:如何遍历属性
Sep 14 #Javascript
基于node.js express mvc轻量级框架实践
Sep 14 #Javascript
You might like
解析thinkphp中的导入文件标签
2013/06/20 PHP
Javascript 布尔型分析
2008/12/22 Javascript
JavaScript 利用StringBuffer类提升+=拼接字符串效率
2009/11/24 Javascript
JavaScript CSS修改学习第五章 给“上传”添加样式
2010/02/19 Javascript
extjs grid设置某列背景颜色和字体颜色的方法
2010/09/03 Javascript
jquery入门—数据删除与隔行变色以及图片预览
2013/01/07 Javascript
jquery实现鼠标滑过显示提示框的方法
2015/02/05 Javascript
深入理解JavaScript系列(40):设计模式之组合模式详解
2015/03/04 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
2015/06/19 Javascript
JavaScript的==运算详解
2016/07/20 Javascript
微信小程序 loading(加载中提示框)实例
2016/10/28 Javascript
JavaScript面向对象程序设计创建对象的方法分析
2018/08/13 Javascript
JavaScript模板引擎应用场景及实现原理详解
2018/12/14 Javascript
使用post方法实现json往返传输数据的方法
2019/03/30 Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
2019/08/26 Javascript
vue基于v-charts封装双向条形图的实现代码
2019/12/09 Javascript
javascript 原型与原型链的理解及应用实例分析
2020/02/10 Javascript
Vue中实现回车键切换焦点的方法
2020/02/19 Javascript
js实现无缝轮播图特效
2020/05/09 Javascript
[01:03:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第一场 1月29日
2021/03/11 DOTA
Python中用函数作为返回值和实现闭包的教程
2015/04/27 Python
结合Python的SimpleHTTPServer源码来解析socket通信
2016/06/27 Python
python嵌套字典比较值与取值的实现示例
2017/11/03 Python
Django实现web端tailf日志文件功能及实例详解
2019/07/28 Python
TensorFlow tf.nn.max_pool实现池化操作方式
2020/01/04 Python
详解Python多线程下的list
2020/07/03 Python
HTML4和HTML5之间除了相似以外的10个主要不同
2012/12/13 HTML / CSS
高清屏中使用Canvas绘图出现模糊的问题及解决方法
2019/06/03 HTML / CSS
酒店员工检讨书
2014/02/18 职场文书
经贸专业毕业生求职信范文
2014/05/01 职场文书
责任胜于能力演讲稿
2014/05/20 职场文书
党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
正规欠条模板
2015/07/03 职场文书
体育教师教学随笔
2015/08/15 职场文书
2016年大学生暑期社会实践活动总结
2016/04/06 职场文书
Log4j.properties配置及其使用
2021/08/02 Java/Android