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 相关文章推荐
jquery弹出层类代码分享
Dec 27 Javascript
javascript中加号(+)操作符的一些神奇作用
Jun 06 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
Dec 08 Javascript
JavaScript输出当前时间Unix时间戳的方法
Apr 06 Javascript
JS之相等操作符详解
Sep 13 Javascript
javascript实现下雨效果
Mar 27 Javascript
JS判断Android、iOS或浏览器的多种方法(四种方法)
Jun 29 Javascript
js学习总结_基于数据类型检测的四种方式(必看)
Jul 04 Javascript
详解vue-router 初始化时做了什么
Jun 11 Javascript
jQuery each和js forEach用法比较
Feb 27 jQuery
js简单遍历获取对象中的属性值的方法示例
Jun 19 Javascript
JavaScript实现拖拽功能
Feb 11 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的可变变量名需要的注意的问题
2013/06/20 PHP
PHP中几个可以提高运行效率的代码写法、技巧分享
2014/08/21 PHP
推荐几款用 Sublime Text 开发 Laravel 所用到的插件
2014/10/30 PHP
PHP ajax 异步执行不等待执行结果的处理方法
2015/05/27 PHP
PHP+jQuery实现滚屏无刷新动态加载数据功能详解
2017/05/04 PHP
PHP实现基于面向对象的mysqli扩展库增删改查操作工具类
2017/07/18 PHP
PHP自定义序列化接口Serializable用法分析
2017/12/29 PHP
PHP设计模式之工厂模式(Factory Pattern)的讲解
2019/03/21 PHP
jquery DOM操作 基于命令改变页面
2010/05/06 Javascript
javascript自然分类法算法实现代码
2013/10/11 Javascript
基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码
2014/05/11 Javascript
js带点自动图片轮播幻灯片特效代码分享
2015/09/07 Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
2016/07/12 Javascript
轻松搞定js表单验证
2016/10/13 Javascript
从零学习node.js之搭建http服务器(二)
2017/02/21 Javascript
无法获取隐藏元素宽度和高度的解决方案
2017/03/07 Javascript
原生JS实现圆环拖拽效果
2017/04/07 Javascript
分享Bootstrap简单表格、表单、登录页面
2017/08/04 Javascript
详解VueJS应用中管理用户权限
2018/02/02 Javascript
小程序清理本地缓存的方法
2018/08/17 Javascript
200行HTML+JavaScript实现年会抽奖程序
2019/01/22 Javascript
微信小程序新手教程之启动页的重要性
2019/03/03 Javascript
js Array.slice的8种不同用法示例
2019/07/10 Javascript
不刷新网页就能链接新的js文件方法总结
2020/03/01 Javascript
javascript canvas检测小球碰撞
2020/04/17 Javascript
[02:51]DOTA2 2015国际邀请赛中国区预选赛第一日战报
2015/05/27 DOTA
python机器学习之神经网络(一)
2017/12/20 Python
Pycharm2017版本设置启动时默认自动打开项目的方法
2018/10/29 Python
Python图像处理PIL各模块详细介绍(推荐)
2019/07/17 Python
python实现三种随机请求头方式
2021/01/05 Python
eBay意大利购物网站:eBay.it
2019/09/04 全球购物
《金子》教学反思
2014/04/13 职场文书
运动会演讲稿300字
2014/08/25 职场文书
工人先锋号事迹材料(2016精选版)
2016/03/01 职场文书
详解PHP设计模式之依赖注入模式
2021/05/25 PHP
Python基本知识点总结
2022/04/07 Python