angularJS深拷贝详解


Posted in Javascript onMarch 23, 2017

在了解angular深拷贝之前,首先看下边的代码。

var a = 1;
var b = a;
b = 2;
console.log(a + " " + b);

很显然,输出的a的值是1,b的值是2。接下来再看一段代码。

var a = [1,2,3,4];
var b = a;
b.push(5);
console.log(a + " " + b);

很显然,输出a的值是[1,2,3,4,5],b的值是[1,2,3,4,5]。再来看下一段代码。

var a = {
  name:"zhangsan",
  age:20
}
var b = a;
b.name = "lisi";
b.age = 30;
console.log(a + " " + b);

很显然,输出的a和b的值都是{name:"lisi",age:30}。这是为什么呢?

在JavaScript或者其他语言中,都有深拷贝和浅拷贝这两个名词。在第一段代码中,a和b都是基本数据类型,当复制彼此的值之后,再改变值。此时a的值并没有随着b的值的改变而改变,这就是深拷贝。当数据类型为数组或者对象这些复杂数据类型时,复制到数组或者对象之后,再改变数组或者对象的值,a的值也随着b的值改变而改变,这就是浅拷贝。

怎样解决深拷贝这个问题呢?

数组数据类型:使用concat()方法。b = a.concat();此时改变b的值,a的值就不会随着b的值的改变而改变。

对象数据类型:b.name = a.name; b.age = a.age;此时,改变b的值,a的值就不会随着b的值的改变而改变。但是,该方法需要知道a对象里边都有哪些字段。一个一个的复制,特别麻烦。

AngularJS的深拷贝

使用angular的同学可能都忽略了angularJS自带的封装好的方法。angular.isString(), angular.isNumber(),angular.isArray() , angular.isFunction() 等等。其中解决深拷贝的方法angular.copy(),能够解决深拷贝的问题。如下:

var a = {
  name :"zhangsan",
  age : 20
}
var b = angular.copy(a);

此时,改变b的值,a的值就不会随着b的值的改变而改变,也就解决了深拷贝的问题。

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

Javascript 相关文章推荐
最近项目写了一些js,水平有待提高
Jan 31 Javascript
javascript 嵌套的函数(作用域链)
Mar 15 Javascript
javascript十六进制及二进制转化的方法
May 06 Javascript
原生JavaScript编写canvas版的连连看游戏
May 29 Javascript
BootStrap中Table分页插件使用详解
Oct 09 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
Feb 19 Javascript
Javascript实现信息滚动效果
May 18 Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
Apr 24 Javascript
JointJS流程图的绘制方法
Dec 03 Javascript
JavaScript闭包与作用域链实例分析
Jan 21 Javascript
在HTML中使用JavaScript的两种方法
Dec 24 Javascript
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 Vue.js
canvas实现环形进度条效果
Mar 23 #Javascript
Javascript实现登录记住用户名和密码功能
Mar 22 #Javascript
jquery实现图片平滑滚动详解
Mar 22 #jQuery
JavaScript中在光标处插入添加文本标签节点的详细方法
Mar 22 #Javascript
jQuery轻松实现无缝轮播效果
Mar 22 #jQuery
JavaScript登录记住密码操作(超简单代码)
Mar 22 #Javascript
原生JS京东轮播图代码
Mar 22 #Javascript
You might like
ezSQL PHP数据库操作类库
2010/05/16 PHP
php数组函数序列之rsort() - 对数组的元素值进行降序排序
2011/11/02 PHP
使用php get_headers 判断URL是否有效的解决办法
2013/04/27 PHP
php环境下利用session防止页面重复刷新的具体实现
2014/01/09 PHP
php的ajax简单实例
2014/02/27 PHP
php防止站外远程提交表单的方法
2014/10/20 PHP
wordpress网站转移到本地运行测试的方法
2017/03/15 PHP
PHP+MySql实现一个简单的留言板
2020/07/19 PHP
点击进行复制的JS代码实例
2013/08/23 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
2014/02/19 Javascript
使用jQuery实现的掷色子游戏动画效果
2014/03/14 Javascript
jquery获取复选框被选中的值
2014/04/10 Javascript
javascript调试之DOM断点调试法使用技巧分享
2014/04/15 Javascript
学习JavaScript事件流和事件处理程序
2016/01/25 Javascript
大白话讲解JavaScript的Promise
2017/04/06 Javascript
详解webpack自定义loader初探
2018/08/29 Javascript
Nodejs监听日志文件的变化的过程解析
2019/08/04 NodeJs
Moment.js实现多个同时倒计时
2019/08/26 Javascript
如何在Vue中抽离接口配置文件
2019/10/31 Javascript
[03:00]2018完美盛典_最佳英雄奖
2018/12/17 DOTA
Python接收Gmail新邮件并发送到gtalk的方法
2015/03/10 Python
如何使用repr调试python程序
2020/02/28 Python
基于python tkinter的点名小程序功能的实例代码
2020/08/22 Python
工程专业求职自荐书范文
2014/02/18 职场文书
应届毕业生自荐信
2014/05/28 职场文书
承诺书格式
2014/06/03 职场文书
家庭教育的心得体会
2014/09/01 职场文书
党员对十八届四中全会的期盼思想汇报范文
2014/10/17 职场文书
2014年社区工会工作总结
2014/12/18 职场文书
2014初中数学教研组工作总结
2014/12/19 职场文书
大学生学年个人总结
2015/02/15 职场文书
安全生产奖惩制度
2015/08/06 职场文书
缅怀先烈主题班会
2015/08/14 职场文书
解决Go gorm踩过的坑
2021/04/30 Golang
Java 在线考试云平台的实现
2021/11/23 Java/Android
vue封装数字翻牌器
2022/04/20 Vue.js