js深拷贝与浅拷贝
来源:互联网 发布:淘宝客服人工服务时间 编辑:程序博客网 时间:2024/05/16 03:13
1 基础知识:基本类型与引用类型
JS中可以把变量分成两部分,基本类型和引用类型。
基本类型包括:Undefined、Null、Boolean、Number和String;
引用类型值可能由多个值构成的对象。
在对基础类型数据进行拷贝时,实际相当于创建新的相同数据'hello',赋值给b
var a='hello';var b = a;b = 'world';console.log(a);//"hello"
在对引用类型数据进行拷贝时,操作的不是实际的对象而是对象的引用,通过指针指向相同的内存区域,所以值相等;
在下面的代码中,因为arr和arr1指向同一内存区域,所以当改变arr1的值时,arr也跟着改变了
var arr = ['1','2'];var arr1 = arr;arr1[0] = '11';console.log(arr); //["11", "2"]
2 浅拷贝
当我们在对引用类型数据进行拷贝时,就会产生类似上面子对象数据改变引起父对象数据同时改变的情况,这种拷贝就叫浅拷贝。
function shallowCopy(src) { var dst = {}; for (var prop in src) { dst[prop] = src[prop]; } return dst;}var xiaoming = {hobby:['唱歌','书法']};var xiaoli = shallowCopy(xiaoming);//如果将拷贝后的对象xiaoli的爱好更改,原对象xiaoming就也被更改了// 因为xiaoli的hobby属性是个数组,即引用类型的数据,所以复制到的内容只是一个内存地址,并不是创建的新内容,详情请参考js的基本类型和引用类型xiaoli.hobby[0] = '画画';console.log(xiaoming);//{hobby: ["画画", "书法"]} 小明的内容也别改变了
3深拷贝
实现深拷贝的方法就是将浅拷贝递归,让每一次赋值都通过基础类型的创建新数据的赋值方式进行赋值
function deepCopy(src,dst){ var dst = dst || {}; for (var i in src) { if (typeof src[i] === 'object') { dst[i] = (src[i].constructor === Array) ? [] : {}; deepCopy(src[i],dst[i]); }else{ dst[i] = src[i]; } } return dst;}var xiaoming2 = {hobby:['唱歌','书法']};var xiaoli2 = deepCopy(xiaoming2);xiaoli2.hobby[0] = '画画';console.log(xiaoming2);//{hobby: ["唱歌", "书法"]} xiaoming的内容不变
4 代码地址 :http://jsbin.com/namajic/edit?js,console,output
阅读全文
0 0
- js 深拷贝与浅拷贝Demo
- js 浅拷贝与深拷贝
- JS深拷贝与浅拷贝
- js对象浅拷贝与深拷贝
- Js中的深拷贝与浅拷贝
- JS的深拷贝与浅拷贝
- js深拷贝与浅拷贝
- js深拷贝与浅拷贝
- js 浅拷贝 深拷贝
- js浅拷贝、深拷贝
- js-浅拷贝,深拷贝
- js深拷贝浅拷贝
- 深拷贝与浅拷贝
- 深拷贝与浅拷贝
- 深拷贝与浅拷贝
- “浅拷贝”与“深拷贝”
- 深拷贝与浅拷贝
- 深拷贝与浅拷贝
- dubbo负载均衡源码解析balance
- Hello, World!
- 校招拼多多笔试题(前端工程师)
- 最小K个数
- Mockito 学习篇(四)完结
- js深拷贝与浅拷贝
- leetcode 33. Search in Rotated Sorted Array 二分查找
- SpringMVC信息转换--处理XML和JSON
- MAC上查看PDM文件
- Linux下rsync 安装与配置
- 摸底
- 剑指OFFER纪念版(5)
- JavaWeb不要使用Eclipse内置浏览器!好处:F12检查JavaWeb页面代码Bug和避免“假的bug”
- Hadoop核心模块之MapReduce