浅谈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 相关文章推荐
Jquery Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用
Mar 17 Javascript
11个用于提高排版水平的基于jquery的文字效果插件
Sep 14 Javascript
JavaScript分页功能的实现方法
Apr 25 Javascript
15个常用的jquery代码片段
Dec 19 Javascript
Vue.js事件处理器与表单控件绑定详解
Mar 20 Javascript
JavaScript数据结构之二叉查找树的定义与表示方法
Apr 12 Javascript
JS数组实现分类统计实例代码
Sep 30 Javascript
微信小程序使用npm包的方法步骤
Aug 13 Javascript
如何在微信小程序中存setStorage
Dec 13 Javascript
深入了解Vue.js 混入(mixins)
Jul 23 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
Aug 20 Javascript
vue3.0生命周期的示例代码
Sep 24 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
YII框架模块化处理操作示例
2019/04/26 PHP
TP5框架实现一次选择多张图片并预览的方法示例
2020/04/04 PHP
一些常用的JavaScript函数(json)附详细说明
2011/05/25 Javascript
读jQuery之七 判断点击了鼠标哪个键的代码
2011/06/21 Javascript
js实现jquery的offset()方法实例
2015/01/10 Javascript
js实现C#的StringBuilder效果完整实例
2015/12/22 Javascript
JavaScript实现图片懒加载(Lazyload)
2016/11/28 Javascript
JavaScript瀑布流布局实现代码
2017/05/06 Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
2017/06/20 jQuery
js通过Date对象实现倒计时动画效果
2017/10/27 Javascript
jquery中有哪些api jQuery主要API
2017/11/20 jQuery
原生js实现省市区三级联动代码分享
2018/02/12 Javascript
javascript实现蒙版与禁止页面滚动
2020/01/11 Javascript
[55:47]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第三局
2016/02/27 DOTA
在 Django/Flask 开发服务器上使用 HTTPS
2014/07/03 Python
深入分析在Python模块顶层运行的代码引起的一个Bug
2014/07/04 Python
Django的HttpRequest和HttpResponse对象详解
2018/01/26 Python
Python学习_几种存取xls/xlsx文件的方法总结
2018/05/03 Python
PyTorch线性回归和逻辑回归实战示例
2018/05/22 Python
对pandas的行列名更改与数据选择详解
2018/11/12 Python
Flask之请求钩子的实现
2018/12/23 Python
Python中一些深不见底的“坑”
2019/06/12 Python
使用pandas 将DataFrame转化成dict
2019/12/10 Python
django框架ModelForm组件用法详解
2019/12/11 Python
Python代码块及缓存机制原理详解
2019/12/13 Python
python线程join方法原理解析
2020/02/11 Python
Python任务自动化工具tox使用教程
2020/03/17 Python
Python爬虫过程解析之多线程获取小米应用商店数据
2020/11/14 Python
手机端用rem+scss做适配的详解
2017/11/15 HTML / CSS
BAILEY 44官网:美国制造的女性服装
2019/07/01 全球购物
新入职员工的自我介绍演讲稿
2014/01/02 职场文书
yy婚礼司仪主持词
2014/03/14 职场文书
小学开学标语
2014/07/01 职场文书
党员自我评议个人对照检查材料
2014/09/16 职场文书
2016入党积极分子心得体会
2016/01/06 职场文书
JavaScript获取URL参数的方法分享
2022/04/07 Javascript