【ionic开发】TypeScript的深拷贝与浅拷贝

duwenquan-方形LOGO.png

TypeScript

    TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程
    TypeScript扩展了JavaScript的语法,所以任何现有的JavaScript程序可以不加改变的在TypeScript下工作。TypeScript是为大型应用之开发而设计,而编译时它产生 JavaScript 以确保兼容性。
    TypeScript 支持为已存在的 JavaScript 库添加类型信息的头文件,扩展了它对于流行的库如jQueryMongoDBNode.js和 D3.js 的好处。

TS中的浅拷贝与深拷贝

    所谓深拷贝与浅拷贝,是围绕引用类型变量的拷贝进行的讨论
    在TypeScript中,变量分为基本类型和引用类型两种。其本质区别是不可变性,基本类型是不可变的,而引用类型是可变的。

    所谓基本类型的不可变性,我们可以举个例子

let a = 1;
let b = 1;
a++;
console.log("a的值是:"+a,"b的值是:"+b);
//打印结果如下:
/*
a的值是2,b的值是1
*/

声明一个变量a,并为其赋值1,这时内存中开辟出一片区域用来储存1。此时声明了一个变量b,也为b赋值1。当执行a++时,基本类型的不可变性就体现出来,a++的值应该为2,但是这个值并不会将原来储存1的那片内存覆盖掉,而是再开辟一片内存来存储2。所以对于这个1来讲,他是永远不可变的。

而对于引用变量则不同,因为其存储的是只想某个内存区域的地址,所以其修改时直接操作在内存上的,这就导致了深拷贝和浅拷贝问题的出现。

  • 浅拷贝
let shallowA = {
    x: 1,
    y: -1
}
let shallowB = shallowA;
shallowA.x++;

console.log("shallowA.x==="+shallowA.x,"shallowB.x==="+shallowB.x,)
//打印结果如下:
shallowA.x === 2 
shallowB.x === 2 

    这就是最简单的浅拷贝,其效果十分明显,对拷贝源的操作,会直接体现在拷贝目标上,因为这个赋值行为的本质是内存地址的赋值,所以他们指向了同一片内存区域。

    浅拷贝十分容易,也十分常见,但却无法满足需求,假如我们需要获得与拷贝源完全相同,却又不会互相影响的对象,应该怎么办呢。

  • Object.assign()
        TypeScript为我们提供了一种十分好用的方法,Object.assign(target, ...source)方法assign方法接受多个参数,第一个参数target为拷贝目标,剩余参数...source是拷贝源。此方法可以将...source中的属性复制到target中,同名属性会进行覆盖,并且在复制过程中实现了'伪'深拷贝
let shallowA = {
    a: 1,
    b: 2,
    c: {
        d: 1,
    }
}
let shallowB = {};
Object.assign(shallowB, shallowA);
shallowA.a++;

console.log("shallowA.a==="+shallowA.a,"shallowB.a==="+shallowB.a,);
//打印结果如下:

shallowA.a === 2 
shallowB.a === 1 

表面上看,好像已经实现了深拷贝的效果,对shallowA.a进行的操作并没有体现在shallowA.a中,但是呢,关键的时候来了,这也是我今天为什么要写这个博客的主要问题所在。

shallowA.c.d++;

console.log("shallowA.c.d==="+shallowA.c.d,"shallowB.c.d==="+shallowB.c.d);

//打印结果如下:
shallowA.c.d === 2 
shallowB.c.d === 2 

从上面的打印结果看出,Object.assign()的拷贝类型十分明显了,这是一种可以对非嵌套对象进行深拷贝的方法,如果对象中出现嵌套情况,那么其对被嵌套对象的行为就成了普通的浅拷贝.

在今天的开发中我也遇到了此问题。从后台返回的数据是一个数组A,数组A里面又包含了B对象,B对象中又包含数组C,数组C里面又含有对象D。
而我又将数组A拷贝三份。放进一个大数组,形如【A1,A2,A3】;其中A1,A2,A3,都是A数组拷贝过来。当我操作A1数组里面的A.B.C.D的时候,发现,A2,与A3的D对象也跟着改变。
那么,应该如何拷贝才能达到操作A1中的D对象,而A2与A3的D对象不变呢,也就是如何实现完完全全的深拷贝呢?

stringify()和parse()

JSON对象中包含两个方法, stringify()和parse(),前者可以将对象JSON化,而后者可以将JSON格式转换为对象.这是一种可以实现深拷贝的方法.但这种方法的缺陷是会破坏原型链,并且无法拷贝属性值为function的属性所以如果只是想单纯复制一个嵌套对象,可以使用此方法。

let shallowA = {
    a: 1,
    b: {
        c: 1
    }
}
let shallowB = JSON.parse(JSON.stringify(shallowA));
shallowA.b.c++;
console.log("shallowA.b.c==="+shallowA.b.c"shallowB.b.c==="+shallowB.b.c);

//打印结果如下:
shallowA.b.c===2;
shallowB.b.c===1;

由此可见,我们已经实现了对象的完全深拷贝。

我的问题也就迎刃而解;接下来,就可以开心的开发接下来的功能了。。。。不解决此问题真的木办法往下继续了。


image.png

越努力越幸运,愿你我一起共同努力。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,189评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,577评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,857评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,703评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,705评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,620评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,995评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,656评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,898评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,639评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,720评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,395评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,982评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,953评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,195评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,907评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,472评论 2 342

推荐阅读更多精彩内容

  • 值类型与引用类型 谈浅拷贝与深拷贝之前,我们需要先理清一个概念,即值类型与引用类型。 什么是值类型与引用类型?这要...
    franose阅读 612评论 1 8
  • 概念 在Objective-C中并不是所有的对象都支持Copy,MutableCopy,遵守NSCopying协议...
    LeoAu阅读 8,711评论 10 28
  • 品效合一或者品效协同,我们已经说了很多年。之所以那么多年一直说,就是因为它们难以合一。 这个题目有点标题党。所谓攻...
    诸彦杰阅读 868评论 0 0
  • 新年的第一天,整天的无意识右脑开发课程,从人的先天天赋,到目前我们的样子,通过心理投射理论,双重无意识理论等以及色...
    洪雅昕阅读 437评论 0 0
  • 我有一个男神,叫刘同。 第一次听到刘同这个名字,是在7年前左右的一档电视节目上。 大概因为我是新闻专业的学生,而他...
    简安Tina阅读 239评论 1 0