angularJS深拷贝详解

在了解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的值的改变而改变，也就解决了深拷贝的问题。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • AngularJS API之copy深拷贝详解及实例

    AngularJS API之copy深拷贝详解及实例

    angular提供了一个可以复制对象的api--copy(source,destination),它会对source对象执行深拷贝. 使用时需要注意下面几点: 如果只有一个参数(没有指定拷贝的对象),则返回一个拷贝对象 如果指定了destination,则会深拷贝对象复制给destination 如果source是null或者undefined,那么会直接返回source 如果source就是desitination,那么会报错. 下面看看使用样例: <html> <head> &

  • 浅谈angular.copy() 深拷贝

    浅谈angular.copy() 深拷贝

    因为项目中需要拷贝,查阅angularjs API文档,发现对angular.copy() 的解释: 复制一个对象或者一个数组(好吧,万物皆对象,数组也是一个对象). 1> 如果省略了destination,一个新的对象或数组将会被创建出来: 2> 如果提供了destination,则source对象中的所有元素和属性都会被复制到destination中: 3> 如果source不是对象或数组(例如是null或undefined), 则返回source: 4> 如果source和d

  • angularJS深拷贝详解

    在了解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 = {

  • AngularJs bootstrap详解及示例代码

    AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 本文用于解释Angular初始化的过程,以及如何在你有需要的时候对Angular进行手工初始化. 二.Angular <script> 标签 本例用于展示如何通过推荐的路径整合Angular,实现自动初始化. <!doctype html> <html xmlns:ng=&qu

  • Java中浅拷贝和深拷贝详解

    Java中浅拷贝和深拷贝详解

    目录 Java浅拷贝深拷贝 实现浅拷贝 实现深拷贝 Java浅拷贝深拷贝 浅拷贝和深拷贝涉及到了Object类中的clone()方法 实现浅拷贝 浅拷贝的实现需要类重写clone()方法 浅拷贝会创建一个新对象,这个对象有着原始对象属性值的一份精确拷贝 如果属性是基本类型,拷贝的就是基本类型的值: 如果属性是内存地址(引用类型),拷贝的就是内存地址 ,因此如果其中一个对象改变了这个地址,就会影响到另一个对象,导致两个对象的引用不等. 实现浅拷贝很简单只需要将类实现Cloneable接口然后重写c

  • AngularJS国际化详解及示例代码

    AngularJS国际化详解及示例代码

    AngularJS支持内置的国际化三种类型的过滤器货币,日期和数字.只需要根据国家的区域纳入相应的JS.默认情况下它处理浏览器的语言环境.例如,要使用丹麦语的语言环境,使用下面的脚本 <script src="https://code.angularjs.org/1.2.5/i18n/angular-locale_da-dk.js"></script> 使用丹麦语的语言环境实例 testAngularJS.html <html> <head&g

  • AngularJS过滤器详解及示例代码

    AngularJS过滤器详解及示例代码

    过滤器是用来更改修改数据,并且可以在表达式或使用管道符指令将其归入.以下是常用的过滤器的列表. S.No. 名称 描述 1 大写 转换文本为大写文本. 2 小写 转换文本为小写文本. 3 货币 货币格式格式文本. 4 过滤器 过滤数组中它根据所提供的标准的一个子集. 5 排序 排序提供标准的基础数组. 大写过滤器 添加大写的过滤器使用管道符的表达式.在这里,添加了大写过滤器,全部用大写字母打印学生姓名. Enter first name:<input type="text" ng

  • AngularJs Scope详解及示例代码

    一.什么是Scope? scope(http://code.angularjs.org/1.0.2/docs/api/ng.$rootScope.Scope)是一个指向应用model的object.它也是expression(http://www.cnblogs.com/lcllao/archive/2012/09/16/2687162.html)的执行上下文.scope被放置于一个类似应用的DOM结构的层次结构中.scope可以监测(watch,$watch)expression和传播事件.

  • AngularJS语法详解（续）

    src和href属性 Angularjs中src应写成ng-src,href应写成ng-href 例如: 复制代码 代码如下: <img ng-src="/images/cats/{{favoriteCat}}"> <a ng-href="/shop/category={{number}}">Some text</a> 表达式 在模板中可以进行简单的数学运算.比较运算.布尔运算.位运算.引用数组.和对象符号等 尽管我们可以使用表达

  • AngularJs 指令详解及示例代码

    AngularJs 指令详解及示例代码

    对于指令,可以把它简单的理解成在特定DOM元素上运行的函数,指令可以扩展这个元素的功能. 首先来看个完整的参数示例再来详细的介绍各个参数的作用及用法: angular.module('myApp', []) .directive('myDirective', function() { return { restrict: String, priority: Number, terminal: Boolean, template: String or Template Function: func

  • AngularJS 表达式详解及实例代码

    AngularJS 表达式详解及实例代码

    前面了解了AngularJS的基本用法,这里就跟着PDF一起学习下表达式的相关内容. 在AngularJS中的表达式,与js中并不完全相同. 首先它的表达式要放在{{}}才能使用,其次相对于javascript中的表达式概念,它有以下几点不同: 1 作用域不同 在javascript中默认的作用于是window,但是在angularJs中就不同了.它使用$scope控制作用于. 2 允许未定义的值 在angularjs中,如果使用了未定义的表达式,也不会出现错误,直接返回空值. 3 过滤器 可以

随机推荐