angular.js 的angular.copy 、 angular.extend 、 angular.merge

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //angular.copy is deep copy
            var o1 = {
                name: ‘xudongyang‘,
                age: 26,
                skill:{}
            }
            var o2 = angular.copy(o1);
            console.log(o2);
            console.log(o1 == o2);

            //extend is shallow copy of the properties of the source objects from right to left
            var src1 = {
                name: ‘xudongyang‘,
                age: 20
            }
            var src2 = {
                age: 10,
                skill: {}
            }
            var dst = {},
                dst2 = angular.extend(dst , src2 , src1)
            console.log(dst2.skill == dst.skill);
            src2.skill.eat = "kaorou";
            console.log(dst2.skill);
            console.log(dst.skill);

            //angular.merge is deep copy
            var m1 = {name:‘xudongyang‘ , age:29},
                m2 = {age:10 , skill:{}}
                dstm = {};
                dstm2 = angular.merge(dstm , m2 , m1);
            console.log(dstm2);
            console.log(m2.skill == dstm2.skill);

            //angular.extend vs angular.merge
            var s1 = {skill:{name:‘java‘ , experience: 20, certified: true}},
                s2 = {skill:{name:‘js‘ , experience: 10}},
                dst = {},
                dst2 = angular.extend(dst , s1 , s2);
                console.log(dst);

            //angular.extend vs angular.merge
            var s1 = {skill:{name:‘java‘ , experience: 20, certified: true}},
                s2 = {skill:{name:‘js‘ , experience: 10}},
                dst = {},
                dst2 = angular.merge(dst , s1 , s2);
                console.log(dst);
            //浅克隆只克隆一层,深克隆一直复制到最底层
        </script>
    </body>
</html>
时间: 2024-10-11 06:53:28

angular.js 的angular.copy 、 angular.extend 、 angular.merge的相关文章

【Angular JS】正确调用JQuery与Angular JS脚本 - 修复Warning: Tired to load angular more than once

自己正在做一个小网站,使用Angular JS + Express JS + Mongo DB,在开发过程中,遇到一些问题,所以整理出来.希望对大家都有帮助. 这是今天解决的一个问题,Angular JS抛出Warning: Tired to load angular more than once. 前端使用的就是Angular JS,同时前端脚本中我也使用了JQuery.以下是二者Script的最初调用顺序, 在public文件夹下的index.html中: 1 <body ng-view>

Angular.js 学习二---$scope和$rootScope,Angular模块的run方法,依赖注入中代码压缩

一.$scope和$rootScope的区别 一句话总结: $rootScope针对全局的作用域生效 $scope只针对当前的controller作用域生效 二.AngularJS模块的run方法 run方法初始化全局的数据,只对全局作用域起作用 如$rootScope <script type="text/javascript"> var m1 = angular.module('myApp', []); m1.run(['$rootScope', function ($

Require.js、Angular.js整合

Require.js 详见: 初识Require.js 解密Require.js Angular.js 详见: 初识Angular.js之爱恨情仇 整合Require.js.Angular.js 配置 在Requirejs中配置angular.js. require-main.js // 配置 requirejs.config({ ... paths: { 'jquery': 'libs/jquery-2.1.3/jquery.min', 'angular': 'libs/angular-1.3

爱创课堂2016年Angular.JS前端开发从入门到上手企业开发视频教程(完整版)

资源网盘: 2016年Angular.JS从入门到上手企业开发 链接: https://pan.baidu.com/s/1dF2vBzV 密码: 3hbk 免费学习网站地址:http://www.icketang.com/ AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了.所以我做了一些工作(你也可以觉得是小花招)来让浏览器做我想要的事.AngularJS试图成为WEB应用中的一种客户端的解决

关于 angular js 的坑

angular js 很好很强大,但是注意,angular js并不适合操作DOM,虽然在某个版本更新过之后,angular 内部自建了 jqLite 来方便操作DOM,意图取代jquery的位置,真是居心叵测. 其实 angular 最好的地方还是给我们提供了一个新的思维方式,如果你是个新手,想看看传说中的 MVC 是个啥,在 ember, backbong, angular...等等众多框架中犹豫不决,那么推荐先看看angular 当然坑是很多,由于马上 2.* 的版本要出现,所以自然 1.

Angular JS 基础应用--第一篇

  前  言          Android应用开发中,有一些功能虽然能够使用原生JS来实现,但是会比较的复杂,因此一些相应的框架应运而生了.框架相对于原生JS而言,从主观上来说,最大的改变就是代码大幅度的减少了.在使用上,也比较方便易懂.因此,框架一经诞生就广受欢迎. 在本章,就将详细介绍其中一种框架的使用----Angular JS. AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML. angularJS表达式   1.angularJS使用双大括号{

Angular JS 学习

学习一个google 的开发的 前端js 框架   Angular JS. 参照的书:  Angular Js  published by O'REILLY. 第二个小例子:  有一个textbox 文本框,当输入内容,placeholder 中的内容会跟着变化. 因为把ng-model 拼错了,所以显示的结果中, 文本内容改变了,p的内容没有跟着有相应变化,找了好久没找出原因,原来是ng-model拼错,无语. <html ng-app = "myApp"><hea

Angular.js 中 copy 赋值与 = 赋值 区别

转自st.gg Angular.js 中 copy 赋值与 = 赋值 区别 为什么用 $scope.user = $scope.master; $scope.master 会跟着 $scope.user 改变?angular.copy 和 = 号赋值有什么区别呢?新手还没有搞懂,请教各位了. <!DOCTYPE html> <html> <script src= "http://apps.bdimg.com/libs/angular.js/1.3.9/angular

activiti自定义流程之整合(二):使用angular js整合ueditor创建表单

注:整体环境搭建:activiti自定义流程之整合(一):整体环境配置 基础环境搭建完毕,接下来就该正式着手代码编写了,在说代码之前,我觉得有必要先说明一下activit自定义流程的操作. 抛开自定义的表单不谈,通过之前的了解,我们知道一个新的流程开始,是在启动流程实例(processIntence)的时候,而流程实例依赖于流程定义(processDefinition),流程定义又依赖于流程模型(model). 我们用到的自定义表单需要在创建模型,画模型图的时候就指定表单的名称formKey,需

activiti自己定义流程之整合(二):使用angular js整合ueditor创建表单

基础环境搭建完成,接下来就该正式着手代码编写了,在说代码之前.我认为有必要先说明一下activit自己定义流程的操作. 抛开自己定义的表单不谈.通过之前的了解,我们知道一个新的流程開始.是在启动流程实例(processIntence)的时候,而流程实例依赖于流程定义(processDefinition).流程定义又依赖于流程模型(model). 我们用到的自己定义表单须要在创建模型,画模型图的时候就指定表单的名称formKey.须要保证这个formKey和我们创建的表单名称一致. 表单并不在创建