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 相关文章推荐
javascript 年月日联动实现核心代码
Dec 21 Javascript
精通Javascript系列之Javascript基础篇
Jun 07 Javascript
初学js 新节点的创建 删除 的步骤
Jul 04 Javascript
Javascript图像处理—亮度对比度应用案例
Jan 03 Javascript
js动态生成指定行数的表格
Jul 11 Javascript
使用js解决由border属性引起的div宽度问题
Nov 26 Javascript
探讨JavaScript中声明全局变量三种方式的异同
Dec 03 Javascript
javascript实现保留两位小数的多种方法
Dec 18 Javascript
jQuery实现图片向左向右切换效果的简单实例
May 18 Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
Aug 24 Javascript
基于iview的router常用控制方式
May 30 Javascript
Vue 的双向绑定原理与用法揭秘
May 06 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
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
PHP实现合并两个排序链表的方法
2018/01/19 PHP
返回对象在当前级别中是第几个元素的实现代码
2011/01/20 Javascript
JS实现将人民币金额转换为大写的示例代码
2014/02/13 Javascript
JavaScript使用cookie记录临时访客信息的方法
2015/04/07 Javascript
jQuery实现二级下拉菜单效果
2016/01/05 Javascript
js原型链与继承解析(初体验)
2016/05/09 Javascript
jQuery实现邮箱下拉列表自动补全功能
2016/09/08 Javascript
bootstrapValidator 重新启用提交按钮的方法
2017/02/20 Javascript
js获取浏览器和屏幕的各种宽度高度
2017/02/22 Javascript
JS实现的自动打字效果示例
2017/03/10 Javascript
bootstrap table使用入门基本用法
2017/05/24 Javascript
slideToggle+slideup实现手机端折叠菜单效果
2017/05/25 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
2017/06/01 jQuery
基于Vue.js实现tab滑块效果
2017/07/23 Javascript
jquery easyui如何实现格式化列
2017/07/30 jQuery
Js利用Canvas实现图片压缩功能
2017/09/13 Javascript
微信小程序自定义组件之可清除的input组件
2018/07/17 Javascript
微信小程序开发之自定义tabBar的实现
2018/09/06 Javascript
详解Vue中使用插槽(slot)、聚类插槽
2019/04/12 Javascript
vue select 获取value和lable操作
2020/08/28 Javascript
Python生成验证码实例
2014/08/21 Python
python之从文件读取数据到list的实例讲解
2018/04/19 Python
Python+selenium实现自动循环扔QQ邮箱漂流瓶
2018/05/29 Python
python 命令行传入参数实现解析
2019/08/30 Python
Python通过Pillow实现图片对比
2020/04/29 Python
举例详解HTML5中使用JSON格式提交表单
2015/06/16 HTML / CSS
移动端HTML5开发神器之vconsole详解
2020/12/15 HTML / CSS
加拿大在线旅游公司:Flighthub
2019/03/11 全球购物
附答案的Java面试题
2012/11/19 面试题
高校学生干部的自我评价分享
2013/11/04 职场文书
质检员的岗位职责
2013/11/15 职场文书
心理学专业大学生职业生涯规划范文
2014/02/19 职场文书
MySQL Router的安装部署
2021/04/24 MySQL
pytorch 如何把图像数据集进行划分成train,test和val
2021/05/31 Python
Golang使用Panic与Recover进行错误捕获
2022/03/22 Golang