1. 对于基本数据类型

其值在内存中占据着固定大小的空间,并被保存在栈内存中。当一个变量向另一个变量复制基本类型的值,会创建这个值的副本,并且我们不能给基本数据类型的值添加属性。其为深拷贝。

2. 对于引用类型

 浅拷贝:只复制指向某个对象的指针,而不复制对象本身,新旧对象共享一块内存; 改变一个对象,另一个会随之改变;
 深拷贝:复制并创建一个一模一样的对象,不共享内存,修改新对象,旧对象保持不变。

01 浅拷贝的实现

var arr = [1, 2, 3, '4'];

var arr2 = arr;
arr2[1] = "test";
console.log(arr); // [1, "test", 3, "4"]
console.log(arr2); // [1, "test", 3, "4"]

我们可以看到,简单的赋值便是浅拷贝,一个对象改变,另一个也随之改变。

02 深拷贝的实现

1.使用JSON.stringfy();

var obj1 = { a: { b: 10 } };
var obj2 = JSON.parse(JSON.stringify(obj1));
obj2.a.b = 20;
console.log(obj1); //{ a: { b: 10 } }
console.log(obj2); //{ a: { b: 20 } }
console.log(obj1 === obj2); // false
console.log(obj1.a === obj2.a); // false

2.使用递归实现

function deepClone(obj){
let objClone = Array.isArray(obj)?[]:{};
if(obj && typeof obj==="object"){
for(key in obj){
//判断ojb子元素是否为对象,如果是,递归复制
if(obj[key]&&typeof obj[key] ==="object"){
objClone[key] = deepClone(obj[key]);
}else{
//如果不是,简单复制
objClone[key] = obj[key];
}
}
}
return objClone;
}
let a=[1,2,3,4],
b=deepClone(a);
a[0]=2;
console.log(a);//[2, 2, 3, 4]
console.log(b);// [1, 2, 3, 4]

当对象中有循环引用时:

即:

var a={c:1,d:2};
a.e=a;

设置一个标记,当目前对象已经被克隆过时,则不再循环调用

function deepClone(obj){
mark[obj]=1;
let objClone = Array.isArray(obj)?[]:{};
for(key in obj){
//判断ojb子元素是否为对象,如果是,递归复制
if(obj[key]&&typeof obj[key] ==="object"){
if(mark[obj[key]]==1){
objClone[key]=obj[key];
continue;
}
objClone[key] = deepClone(obj[key]);
}else{
//如果不是,简单复制
objClone[key] = obj[key];
}
}
return objClone;
}
var a={c:1,d:2};
a.e=a;
mark={};
b=deepClone(a); console.log(a);//{c: 1, d: 2, e: {…}}
console.log(b);//{c: 1, d: 2, e: {…}}

3.JQuery的extend()。

$.extend( [deep ], target, object1 [, objectN ] )

deep表示是否深拷贝,true为深拷贝,false为浅拷贝;

target object类型 目标对象,其他对象的成员属性将被附加到该对象上。

object1  objectN可选。 Object类型 第一个以及第N个被合并的对象。

let a=[0,1,[2,3],4],
b=$.extend(true,[],a);
a[0]=-1;
a[2][0]=-1;
console.log(a);//[-1,1,[-1,3],4]
console.log(b);//[0,1,[2,3],4]

特别说明:concat(),slice()不是深拷贝,因为其只是一级属性是深拷贝,二级属性就不是了。

let a=[0,1,[2,3],4],
b=a.slice();
a[0]=-1;
a[2][0]=-1;
console.log(a);//[-1,1,[-1,3],4]
console.log(b);//[0,1,[-1,3],4]
let a=[0,1,[2,3],4],
b=[].concat(a);
a[0]=-1;
a[2][0]=-1;
console.log(a);//[-1,1,[-1,3],4]
console.log(b);//[0,1,[-1,3],4]

js深拷贝与浅拷贝的区别及实现的更多相关文章

  1. 关于JS深拷贝和浅拷贝

    最近在前端开发中遇到一些问题,就是数组中的某个对象或某个对象的值改变之后,在不刷新页面的时候需要重新渲染值时,页面显示的还是原来的数据.比如: data{ A:[{id:1,num:1},{id:2, ...

  2. js 深拷贝和浅拷贝

    js 深拷贝和浅拷贝 先举一下项目中遇到的两个例子: 例子1: var json = $.parseJSON(data.data);//data.data是接口返回的值var a = json.cha ...

  3. 老生常谈之js深拷贝与浅拷贝

    前言 经常会在一些网站或博客看到"深克隆","浅克隆"这两个名词,其实这个很好理解,今天我们就在这里分析一下js深拷贝和浅拷贝. 浅拷贝 我们先以一个例子来说明 ...

  4. Python 深拷贝和浅拷贝的区别

    python的复制,深拷贝和浅拷贝的区别    在python中,对象赋值实际上是对象的引用.当创建一个对象,然后把它赋给另一个变量的时候,python并没有拷贝这个对象,而只是拷贝了这个对象的引用  ...

  5. js 中引用类型 的深拷贝 和 浅拷贝的区别

    一.曾经在读JQ源码的时候,对深拷贝算是有了一点的理解.我们在项目中是不是经常会遇到这样的问题呢? 后台返回一个数组对象(引用类型).次数在页面渲染中需要对部分数据进行处理 比如:银行卡6234509 ...

  6. Python赋值语句与深拷贝、浅拷贝的区别

    参考:http://stackoverflow.com/questions/17246693/what-exactly-is-the-difference-between-shallow-copy-d ...

  7. python深拷贝和浅拷贝的区别

    首先深拷贝和浅拷贝都是对象的拷贝,都会生成一个看起来相同的对象,他们本质的区别是拷贝出来的对象的地址是否和原对象一样,也就是地址的复制还是值的复制的区别. 什么是可变对象,什么是不可变对象: 可变对象 ...

  8. 在vue中子组件修改props引发的对js深拷贝和浅拷贝的思考

    不管是react还是vue,父级组件与子组件的通信都是通过props来实现的,在vue中父组件的props遵循的是单向数据流,用官方的话说就是,父级的props的更新会向下流动到子组件中,反之则不行. ...

  9. c# 深拷贝与浅拷贝的区别分析及实例

    浅拷贝(影子克隆):只复制对象的基本类型,对象类型,仍属于原来的引用. 深拷贝(深度克隆):不紧复制对象的基本类,同时也复制原对象中的对象.就是说完全是新对象产生的. 深拷贝是指源对象与拷贝对象互相独 ...

随机推荐

  1. SDIO卡 了解

    SDIO接口是在SD接口基础上发展起来的,SDIO接口兼容SD接口.SDIO协议又在SD卡协议之上添加了CMD52(一般用来访问寄存器)和CMD53(字节和块传输)命令.SDIO和SD卡规范间的一个重 ...

  2. POJ3252 Round Numbers —— 数位DP

    题目链接:http://poj.org/problem?id=3252 Round Numbers Time Limit: 2000MS   Memory Limit: 65536K Total Su ...

  3. 解决IE浏览器部分版本不支持background-size属性问题

    background-size是CSS3新增的属性,现在有很多浏览器都支持CSS3了.但是IE浏览器有些版本还是不支持,比如IE8,IE9也有些CSS3的属性会支持,但是有些也不支持.在这里就了解一下 ...

  4. BestCoder5 1001 Poor Hanamichi(hdu 4956) 解题报告

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4956(它放在题库后面的格式有一点点问题啦,所以就把它粘下来,方便读者观看) 题目意思:给出一个范围 [ ...

  5. hdu 超级楼梯 解题报告

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2041 哦--对了,这些题读者可以直接忽略,我只是想练习一下自己薄弱的地方...... 题目意思我就不说 ...

  6. Windows下如何生成数字证书

    1.Makecert.exe<证书创建工具>使用说明:http://msdn.microsoft.com/zh-cn/library/bfsktky3.aspx 2.SignTool.ex ...

  7. Ubuntu中右击出现终端

    1 root用户 $sudo apt-get install  nautilus-open-terminal 2重启 3ok

  8. UVa 11040 Add bricks in the wall (水题递推)

    题意:给定一个金字塔,除了最后一行,每个数都等于支撑它的两个数的和,现在给奇数行的左数奇数位置,求整个金字塔. 析:很容易看出来,从下往上奇数行等于 a[i][j] = (a[i-2][j-1] - ...

  9. 基于puppeteer的网络拦截工具flyover

    为什么需要网络拦截工具 通常我们会遇到这样的场景: 线上一个图片有异常,线下修正之后需要发布之前进行测试,有些情况下,QA同学有直接在线上环境测试的需求,只是链接本地资源,通常在windows下有一个 ...

  10. Codeforces Round #421 (Div. 2)B. Mister B and Angle in Polygon(模拟+精度控制)

    传送门 题意 给出正n多边形和一个数a,寻找与a最接近的角,输出角编号 分析 找出多边形上所有角,一一比对即可 trick 1.判断的时候注意精度,i.e.x-eps>0 2.double与do ...