浅谈js的深拷贝与浅拷贝
来源:互联网 发布:比较好的淘宝客采集群 编辑:程序博客网 时间:2024/06/08 07:50
今天看es6的时候忽然想到一个问题就是针对于js的深拷贝和浅拷贝的问题,其实说直接点那,就是深复制和浅复制只针对像 Object, Array 这样的复杂对象的。简单来说,浅复制只复制一层对象的属性,而深复制则递归复制了所有层级。
因为浅复制只会将对象的各个属性进行依次复制,并不会进行递归复制,而 JavaScript 存储对象都是存地址的,所以浅复制会导致 obj.arr 和 shadowObj.arr 指向同一块内存地址,大概的示意图如下。
举一个列子哈:
let obj = { a:11, b: [22,33] };function objCopy(src) { let dst = {}; for (let prop in src) { if (src.hasOwnProperty(prop)) { dst[prop] = src[prop]; } } return dst;}let _copy = objCopy(obj);
因为浅复制只会将对象的各个属性进行依次复制,并不会进行递归复制,而 JavaScript 存储对象都是存地址的,所以浅复制会导致 obj.b和_copy.b 指向同一块内存地址,大概的示意图如下。导致的结果就是这样:
_copy.arr[1] = 88;obj.b[1] // = 88而深复制则不同,它不仅将原对象的各个属性逐个复制出去,而且将原对象各个属性所包含的对象也依次采用深复制的方法递归复制到新对象上。这就不会存在上面 obj 和 _copy的 b属性指向同一个对象的问题。
深拷贝要实现的效果是这样的:
实现深拷贝的方法如下
最简单的深拷贝,拿好:
b = JSON.parse( JSON.stringify(a) )
不过这有局限性:
- 无法复制函数
- 原型链没了,对象就是object,所属的类没了。
但是简单,大多时候完全可以满足需求了
jQuery.extend第一个参数可以是布尔值,用来设置是否深度拷贝的:jQuery.extend(true, { a : { a : "a" } }, { a : { b : "b" } } );jQuery.extend( { a : { a : "a" } }, { a : { b : "b" } } );
(数组深拷贝)
var arr = ["One","Two","Three"];var arrtoo = arr.slice(0);arrtoo[1] = "middle";document.writeln("数组的原始值:" + arr + "<br />");//Export:数组的原始值:One,Two,Threedocument.writeln("数组的新值:" + arrtoo + "<br />");//Export:数组的新值:One,middle,Threeconcat() 方法用于连接两个或多个数组。该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。语法arrayObject.concat(arrayX,arrayX,......,arrayX)说明返回一个新的数组。该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的。如果要进行 concat() 操作的参数是数组,那么添加的是数组中的元素,而不是数组。
(对象深拷贝)
就是把对象的属性遍历一遍,赋给一个新的对象。
var deepCopy= function(source) { var result={};
for (var key in source) {
result[key] = typeof source[key]===’object’? deepCoyp(source[key]): source[key];
}
return result;
}
var cloneObj = function(obj){ var str, newobj = obj.constructor === Array ? [] : {}; if(typeof obj !== 'object'){ return; } else if(window.JSON){ str = JSON.stringify(obj), //系列化对象 newobj = JSON.parse(str); //还原 } else { for(var i in obj){ newobj[i] = typeof obj[i] === 'object' ? cloneObj(obj[i]) : obj[i]; } } return newobj;};
这个函数可以深拷贝 对象和数组
小弟水平有限,大神勿喷,理解不对的地方请批评指正。谢谢~~
阅读全文
1 0
- 浅谈js的深拷贝与浅拷贝
- JS的深拷贝与浅拷贝
- 【转】浅谈深拷贝与浅拷贝
- js 深拷贝与浅拷贝Demo
- js 浅拷贝与深拷贝
- JS深拷贝与浅拷贝
- js对象浅拷贝与深拷贝
- Js中的深拷贝与浅拷贝
- js深拷贝与浅拷贝
- js深拷贝与浅拷贝
- js中深拷贝与浅拷贝的区别
- 浅谈js中的浅拷贝和深拷贝
- js的深拷贝和浅拷贝
- 黑马程序员_浅谈浅拷贝与深拷贝
- c++中 拷贝构造函数的深拷贝和浅拷贝--“浅拷贝”与“深拷贝”
- js 浅拷贝 深拷贝
- js浅拷贝、深拷贝
- js-浅拷贝,深拷贝
- 概述FaceRecognizer人脸识别类contrib
- 批处理中Copy与Xcopy的区别
- 申请审核和出库审核逻辑
- 解决base64上传文件,后台读取不到文件格式
- URG与PSH的联系和区别
- 浅谈js的深拷贝与浅拷贝
- AOSP Android 源码开源工程镜像获取方法
- java多线程之创建和启动线程
- 解决Mac book pro外接现实器有黑边问题
- 自定义侧边字母导航栏和三阶贝塞尔曲线的轨迹画心
- vue.js学习09之vue2.x实现vue1.x中默认的过滤器
- React 认知 三 组件Component
- 只能输入整数或小数的正则表达式
- Codeforces Round #419 A. Karen and Game