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 相关文章推荐
THREE.JS入门教程(6)创建自己的全景图实现步骤
Jan 25 Javascript
一款基jquery超炫的动画导航菜单可响应单击事件
Nov 02 Javascript
详谈jQuery中的this和$(this)
Nov 13 Javascript
node.js中的fs.chmod方法使用说明
Dec 18 Javascript
JS Array.slice 截取数组的实现方法
Jan 02 Javascript
jquery ztree实现树的搜索功能
Feb 25 Javascript
JQuery点击行tr实现checkBox选中的简单实例
May 26 Javascript
JavaScript解八皇后问题的方法总结
Jun 12 Javascript
详解axios在node.js中的post使用
Apr 27 Javascript
开发Vue树形组件的示例代码
Dec 21 Javascript
React父子组件间的传值的方法
Nov 13 Javascript
layui表格分页 记录勾选的实例
Sep 02 Javascript
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
使用 MySQL 开始 PHP 会话
2006/12/21 PHP
用php实现的获取网页中的图片并保存到本地的代码
2010/01/05 PHP
php实现统计邮件大小的方法
2013/08/06 PHP
详解PHP错误日志的获取方法
2015/07/20 PHP
JSON两种结构之对象和数组的理解
2016/07/19 PHP
PHP入门教程之使用Mysqli操作数据库的方法(连接,查询,事务回滚等)
2016/09/11 PHP
php生出随机字符串
2017/07/06 PHP
window.onbeforeunload方法在IE下无法正常工作的解决办法
2010/01/23 Javascript
在JS中解析HTML字符串示例代码
2014/04/16 Javascript
ExtJS中设置下拉列表框不可编辑的方法
2014/05/07 Javascript
jQuery实现鼠标经过提示信息的地图热点效果
2015/04/26 Javascript
jquery.map()方法的使用详解
2015/07/09 Javascript
详细分析JavaScript函数定义
2015/07/16 Javascript
PHP结合jQuery实现的评论顶、踩功能
2015/07/22 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
2016/04/05 Javascript
浅析JS异步加载进度条
2016/05/05 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
2017/04/19 Javascript
ES6解构赋值的功能与用途实例分析
2017/10/31 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
2018/11/13 Javascript
VUE基于NUXT的SSR 服务端渲染
2018/11/30 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
2019/05/12 Javascript
解决vue的router组件component在import时不能使用变量问题
2020/07/26 Javascript
uniapp实现横向滚动选择日期
2020/10/21 Javascript
Python找出最小的K个数实例代码
2018/01/04 Python
学生信息管理系统python版
2018/10/17 Python
Python定时任务APScheduler原理及实例解析
2020/05/30 Python
深入了解Python 方法之类方法 & 静态方法
2020/08/17 Python
详解Python中的编码问题(encoding与decode、str与bytes)
2020/09/30 Python
中专毕业生自荐信
2013/11/16 职场文书
计算机专业职业生涯规划范文
2014/01/19 职场文书
2014年工作总结及2015工作计划
2014/12/12 职场文书
酒店工程部主管岗位职责
2015/04/16 职场文书
公司奖励通知
2015/04/21 职场文书
2019年作为一名实习生的述职报告
2019/09/29 职场文书
SQL IDENTITY_INSERT作用案例详解
2021/08/23 MySQL
JS class语法糖的深入剖析
2022/07/07 Javascript