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 获取浏览器高度和宽度值(多浏览器)
Sep 02 Javascript
JavaScript.The.Good.Parts阅读笔记(一)假值与===运算符
Nov 16 Javascript
jquery animate实现鼠标放上去显示离开隐藏效果
Jul 21 Javascript
JS获取节点的兄弟,父级,子级元素的方法
Jan 09 Javascript
JS与jQuery遍历Table所有单元格内容的方法
Dec 07 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
Jan 21 Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
Mar 28 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
Sep 23 Javascript
js实现可旋转的立方体模型
Oct 16 Javascript
JavaScript实现邮箱地址自动匹配功能代码
Nov 28 Javascript
JS点击动态添加标签、删除指定标签的代码
Apr 18 Javascript
详解组件库的webpack构建速度优化
Jun 18 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
phpmyadmin操作流程
2006/10/09 PHP
PHP下常用正则表达式整理
2010/10/26 PHP
php基于base64解码图片与加密图片还原实例
2014/11/03 PHP
PHP登录验证码的实现与使用方法
2016/07/07 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
多个Laravel项目如何共用migrations详解
2018/09/25 PHP
JavaScript Cookie显示用户上次访问的时间和次数
2009/12/08 Javascript
jquery+css3打造一款ajax分页插件(自写)
2014/06/18 Javascript
JS实现屏蔽shift,Ctrl,alt等功能键的方法
2015/06/01 Javascript
jQuery 3.0中存在问题及解决办法
2016/07/15 Javascript
微信小程序 wxapp地图 map详解
2016/10/31 Javascript
javascript数据类型详解
2017/02/07 Javascript
详解nodeJS中读写文件方法的区别
2017/03/06 NodeJs
Vue filter介绍及其使用详解
2017/10/21 Javascript
jQuery判断网页是否已经滚动到浏览器底部的实现方法
2017/10/27 jQuery
javaScript动态添加Li元素的实例
2018/02/24 Javascript
微信小程序实现天气预报功能
2018/07/18 Javascript
在Python中使用pngquant压缩png图片的教程
2015/04/09 Python
Python利用前序和中序遍历结果重建二叉树的方法
2016/04/27 Python
python利用正则表达式搜索单词示例代码
2017/09/24 Python
Python使用base64模块进行二进制数据编码详解
2018/01/11 Python
python计算日期之间的放假日期
2018/06/05 Python
python实现ID3决策树算法
2018/08/29 Python
Django用户认证系统 组与权限解析
2019/08/02 Python
Python3批量移动指定文件到指定文件夹方法示例
2019/09/02 Python
Django choices下拉列表绑定实例
2020/03/13 Python
在keras中model.fit_generator()和model.fit()的区别说明
2020/06/17 Python
HTML5实现预览本地图片
2016/02/17 HTML / CSS
Exoticca英国:以最优惠的价格提供豪华异国情调旅行
2018/10/18 全球购物
马来西亚太阳镜、眼镜和隐形眼镜网上商店:Focus Point
2018/12/13 全球购物
幼儿园亲子活动方案
2014/01/29 职场文书
公司司机岗位职责
2014/02/07 职场文书
人事科岗位职责范本
2014/03/02 职场文书
调查研究项目计划书
2014/04/29 职场文书
局火灾防控工作方案
2014/05/25 职场文书
Python的代理类实现,控制访问和修改属性的权限你都了解吗
2022/03/21 Python