js中的深拷贝与浅拷贝
对象的深拷贝于浅拷贝
对于基本类型,浅拷贝过程就是对值的复制,这个过程会开辟出一个新的内存空间,将值复制到新的内存空间。而对于引用类型来书,浅拷贝过程就是对指针的复制,这个过程并没有开辟新的堆内存空间,只是将指向该内存的地址进行了复制。然而对引用类型的浅拷贝会出现一个问题,那就是修改其中一个对象的属性,则另一个对象的属性也会改变。产生了问题那必然有相对解决的方法, 就这样深拷贝就开始入场了,深拷贝会开辟新的栈,两个对象对应两个不同的地址,这样一来,改一个对象的属性,也不会改变另一个对象的属性。
下面我们用代码看一下深拷贝于浅拷贝是如何实现的 :
对象的浅拷贝
对象的浅拷贝实现方法很简单,说白了就是一个for in 循环的事情 :
let obj = {
nNum : 1,
sName : 'aaron'
};
function shallowCopy(args) {
let result = {};
for(let item in args) {
if(args.hasOwnProperty(item)) {
result[item] = args[item];
};
};
return result;
};
shallowCopy(obj);
或者,我们可以使用最常见的jQuery来实现这个功能 :
$.extend({} , obj);
亦或者,我们也可以采用ES6的方法用一行代码实现相同的功能 :
Object.assign({} , obj);
对于浅拷贝就说到这了,如果有补充或者发现问题的大牛可以回复我或者邮件通知,我会第一时间进行回复,好了废话说多了,我们接下来看一下深拷贝
对象的深拷贝
如果我们把上面的obj稍微修改一下那浅拷贝就有心无力了 :
let obj = {
nNum : 1,
oAar : [1,2,3,4]
};
我们不妨可以再用上面的方法试一下
let newObj = shallowCopy(obj);
newObj === obj // false
newObj.oAar === obj.oAar // true
从上面的结果显示我们可以看出,newObj.oAar与obj.oAar指针所指的是同一个位置,那我们如何改正这个问题呢?
其实也很容易,我们将obj.oAar再看待为一个新的对象,对其再进行一次浅拷贝不就可以了吗??不说了,上代码
function deepCopy(args) {
let result = {};
for(let item in args){
if(typeof args[item] === 'object' && args[item] !== null){
result[item] = deepCopy(args[item]);
}else{
result[item] = args[item];
};
};
return result;
};
result(obj);
我们来验证一下
let newObj = result(obj);
newObj === obj // false
newObj.oAar === obj.oAar // false
结果也显示我们实现了,ok
但是有没有其他的方式呢,比如说更简洁一些的,也是有的:
我们可以使用jQuery的$.extend(true, {}, obj)
,同样也可以实现,是不是觉得眼熟。前面我们说浅拷贝的时候也说过这个方法,但是多了一个为true的参数,$.extend()
方法,第一个参数默认为false,当设置它为true时则会开启深拷贝模式。
想想还有没有什么其他的方式= ̄ω ̄=?
其实还有一个捷径可走
还是上面举的那个obj,我们对它再进行一次尝试
let obj = {
nNum : 1,
oAar : [1,2,3,4]
};
function deepCopy(args) {
let result = {};
try {
result = JSON.parse(JSON.stringify(args));
}
return result;
}
let newObj = deepCopy(obj);
newObj === obj // false
newObj.oAar === obj.oAar // false
ヾ(。`Д´。) 什么鬼,这样也行? 那还前面说那么多废话,直接上这个方法岂不是爽歪歪?
但是这里不得不说明一点,投机取巧往往能达到看似相同的结果,但是还是存在一些隐性的问题的
就如上面这种方式和递归的方法相比是有弊端的,比如它会抛弃对象的constructor。也就是深拷贝之后,不管这个对象原来的构造函数是什么,在深拷贝之后都会变成Object。
这种方法能正确处理的对象只有 Number, String, Boolean, Array, 扁平对象,即那些能够被 json 直接表示的数据结构。RegExp对象是无法通过这种方式深拷贝。
最后再说一种方法,可以使用Object.create()方法达到深拷贝的效果
function deepCopy(args) {
let result = {};
for(let item in args){
if(typeof args[item] === 'object' && args[item] !== null){
result[item] = args[item].constructor === Array ? [] :
Object.create(prop);
}else{
result[item] = args[item];
};
};
return result;
}
let newObj = deepCopy(obj);
newObj === obj // false
newObj.oAar === obj.oAar // false
好了,更多的第三方库的方法我们就不一一列举了,原理更重要嘛,对吧。
最后我们来总结一下:
浅拷贝我们说了3种方法 :
- 通过for...in循环来实现
- 通过Object.assign()方法来实现
- 通过jQuery中的$.extend()方法来实现
深拷贝我们同样说了四种方法 :
- 通过递归的手法实现
- 通过jQuery中的$.extend()添加true参数方法来实现
- 通过JSON序列化反序列化来实现
- 用过Object.create()方法来实现
除了这几种如果各位还想到了其他什么好的方法欢迎下方留言ヾ( ̄▽ ̄)
js中的深拷贝与浅拷贝的更多相关文章
- js 中的深拷贝与浅拷贝
在面试中经常会问到js的深拷贝和浅拷贝,也常常让我们手写,下面我们彻底搞懂js的深拷贝与浅拷贝. 在js中 Array 和 Object 这种引用类型的值,当把一个变量赋值给另一个变量时,这个值得副 ...
- js 中的 深拷贝与浅拷贝
js在平时的项目中,赋值操作是最多的:比如说: var person1 = { name:"张三", age:18, sex:"male", height:18 ...
- js中的深拷贝和浅拷贝2
所谓 深浅拷贝: 对于仅仅是复制了引用(地址),换句话说,复制了之后,原来的变量和新的变量指向同一个东西,彼此之间的操作会互相影响,为 浅拷贝. 而如果是在堆中重新分配内存,拥有不同的地址,但是值是一 ...
- JS中的深拷贝和浅拷贝
浅拷贝 浅拷贝是拷贝第一层的拷贝 使用Object.assign解决这个问题. let a = { age: 1 } let b = Object.assign({}, a) a.age = 2 co ...
- JS对象复制(深拷贝、浅拷贝)
如何在 JS 中复制对象 在本文中,我们将从浅拷贝(shallow copy)和深拷贝(deep copy)两个方面,介绍多种 JS 中复制对象的方法. 在开始之前,有一些基础知识值得一提:Javas ...
- javascript中的深拷贝与浅拷贝
javascript中的深拷贝与浅拷贝 基础概念 在了解深拷贝与浅拷贝的时候需要先了解一些基础知识 核心知识点之 堆与栈 栈(stack)为自动分配的内存空间,它由系统自动释放: 堆(heap)则是动 ...
- 浅谈Java中的深拷贝和浅拷贝(转载)
浅谈Java中的深拷贝和浅拷贝(转载) 原文链接: http://blog.csdn.net/tounaobun/article/details/8491392 假如说你想复制一个简单变量.很简单: ...
- C语言中的深拷贝和浅拷贝
//C语言中的深拷贝和浅拷贝 #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<stdlib.h> #inc ...
- 浅谈Java中的深拷贝和浅拷贝
转载: 浅谈Java中的深拷贝和浅拷贝 假如说你想复制一个简单变量.很简单: int apples = 5; int pears = apples; 不仅仅是int类型,其它七种原始数据类型(bool ...
随机推荐
- Wing ide 6.0 注册 ,python 3.6环境
直接切入主题,套路如下: 1.选择手动输入license license number输入:CN123-12345-12345-12345 2.在下一步中,选择第二项,拷贝的request code ...
- 开blog
开这个blog,现阶段还是主要作为自己的学习笔记 If it could help others, it would be better!
- Codeforces Beta Round #2 A,B,C
A. Winner time limit per test:1 second memory limit per test:64 megabytes input:standard input outpu ...
- hdu_2668 Daydream O(n)求最长不重复子串
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2668 Daydream Time Limit: 2000/1000 MS (Java/Others) ...
- MYSQL数据库增量备份
MySQL数据库增量备份,在这之前修改我们的数据库配置文件/etc/my.cnf开启bin-log日志功能即可.接下来是我参考了下网上的一些方法,自己写的,主要还是要能学到他的一些思路和方法. #fu ...
- angularJS 与angujs-sku实现购物车组合查询
原网址:http://sentsin.com/web/1069.html demo : https://codepen.io/hzxs1990225/pen/VYyOdW 修复版文件下载:htt ...
- LNMP状态管理命令
https://lnmp.org/faq/lnmp-status-manager.html LNMP状态管理命令: LNMP 1.2+状态管理: lnmp {start|stop|reload|res ...
- Android之MaterialDesign应用技术
PS:纵观现在大大小小软件的界面都变的比较漂亮,还有一些系统了,比如小米的MIUI,华为的EMUI等,虽然底层都是安卓,但他们的界面多多少少都会不同,谷歌对这个UI也是非常重视的,MaterialDe ...
- 【问题解决】java中为什么不建议使用DataInputStream 的readLine()方法
常用方法 int read(byte[] b) 从包含的输入流中读取一定数量的字节,并将它们存储到缓冲区数组 b 中. int read(byte[] b, int off, int len) 从包含 ...
- -------- Rootkit 核心技术——利用 nt!_MDL 突破 KiServiceTable 的只读访问限制 Part II --------
------------------------------------------------------------------------------------------- 本篇开始进入正题 ...