谈谈JavaScript深浅拷贝
浅拷贝
function shallowCopy(source){
var newObj = {};
for(var attr in source){
newObj[attr] = source[attr];
}
return newObj;
}
一般简单的对象用浅拷贝就行了,深拷贝是对付哪种对象中还有对象的类型。
深拷贝
function deepCopy(source){
var newObj = {};
if(typeof source != 'object'){
//console.trace();
return source;
}
for(var attr in source){
newObj[attr] = deepCopy(source[attr]);
}
//console.trace();
//console.log(newObj);
return newObj;
}
var obj1 = {
a : { b : 10 }
};
var obj2 = deepCopy(obj1);//第一层循环为 obj2=deepCopy(obj1)----->newObj[a]=deepCopy(obj1[a])=deepCopy({b:10})------->newObj[a]=
//第二层循环为 newObj[b]=deepCopy({b:10}[b])=deepCopy(10)=10------->newObj[b]=10------->return newObj={b:10}
//newObj[a]={b:10}------>return newObj=a:{b:10}
// obj2.a.b = 20;
alert(obj2.a.b); //
alert(obj1.a.b); //
console.log(obj1,obj2)
主要是用了递归的思想:
obj2=deepCopy(obj1)----->调用deepCopy函数,传入的参数是obj1.第一个if判断是否是对象,如果是则执行下面的for/in循环,如果不是则返回obj。第一个obj1显然是对象,所以执行for/in循环。得到的结果是:
- newObj[a]=deepCopy(obj1[a])=deepCopy({b:10})----->再次调用deepCopy函数,传入的参数是对象{b:10},执行for/in循环。得到的结果是:
- newObj[b]=deepCopy({b:10}[b])=deepCopy(10)-------->再调用deepCopy函数,传入的参数是{10},不是对象,返回obj,也就是10,得到的结果是:
- newObj[b]=deepCopy({b:10}[b])=deepCopy(10)=10.
至此,整个“递”的过程就完成了。下面是“归”的过程。也就是一个相反的过程
- deepCopy(10)=10. 代入上面的第二步,执行for/in循环得到newObj[b]=10,然后return newObj={b:10}
- 代入上面的第一步,执行for/in循环得到newObj[a]=deepCopy(obj1[a])=deepCopy({b:10}) deepCopy函数执行返回就是第一步的return newObj={b:10},所以newObj[a]={b:10},return newObj={a:{b:10}}
在return newObj;上添加console.log(newObj);输出结果如下:

可以看到的确是return了两次。第一次为{b:10},第二次为{a:{b:10}}.
另一种实现是使用parse和stringify:
var a = {
name : { age : 100 }
};
var str = JSON.stringify(a);
var b = JSON.parse(str);
b.name.age = 200;
alert( a.name.age ); //
它能正确处理的对象只有 Number, String, Boolean, Array, 扁平对象,即那些能够被 json 直接表示的数据结构。
谈谈JavaScript深浅拷贝的更多相关文章
- JavaScript深浅拷贝区别
分享一篇自己关注的微信订阅号(前端大全)文章:JavaScript浅拷贝与深拷贝 作者:浪里行舟 https://github.com/ljianshu/Blog/issues/5 这里很详细的讲解了 ...
- JavaScript深浅拷贝
深浅拷贝 基本类型和引用类型 ECMAScript 中的变量类型分为两类: 基本类型:undefined,null,布尔值(Boolean),字符串(String),数值(Number) 引用类型: ...
- JavaScript 深浅拷贝
JavaScript有五种基本数据类型(Undefined, null, Boolean, String, Number),还有一种复杂的数据类型,就是对象. Undefined 其实是已声明但没有赋 ...
- javascript简单实现深浅拷贝
深浅拷贝知识在我们的日常开发中还算是用的比较多,但是之前的状态一直都是只曾听闻,未曾使用(其实用了只是自己没有意识到),所以今天来跟大家聊一聊js的深浅拷贝: 首先我们来了解一下javascript的 ...
- JavaScript数据存储和深浅拷贝实际运用
JavaScript分两种数据类型.1.简单数据类型有:number, string, boolean, undefined和null当声明一个简单数据类型的变量时,在内存中会把数据存在栈里.2.复杂 ...
- JavaScript中的事件委托机制跟深浅拷贝
今天聊下JavaScript中的事件委托跟深浅拷贝 事件委托 首先呢,介绍一下事件绑定 //方法一:通过onclick <button onclick="clickEvent()&qu ...
- javascript实现深浅拷贝
深浅拷贝通常是对于引用数据类型进行的(数据类型为:对象(Object).数组(Array).函数(Function)) 浅拷贝: let obj = {id: 1, name: 2}; let new ...
- Javascript 中的深浅拷贝
工作中经常会遇到需要复制 JS 数据的时候,遇到 bug 时实在令人头疼:面试中也经常会被问到如何实现一个数据的深浅拷贝,但是你对其中的原理清晰吗?一起来看一下吧! 为什么会有深浅拷贝 想要更加透彻的 ...
- JavaScript中的深浅拷贝
深浅拷贝 在JS中,数据类型分为两类: 简单数据类型:Number.Boolean.String.undefined 引用数据类型:Array.Object.Function 简单数据类型通常 ...
随机推荐
- OpenCV:Python3使用OpenCV
Python3使用OpenCV安装过程应该是这样的,参考:http://blog.csdn.net/lixintong1992/article/details/61617025 ,使用conda ...
- python tips:dict的key顺序
python3.6+版本中,dict的键值保持插入有序. t = list(range(10)) b = t[:] d = dict(zip(t, b)) print(list(d.items())) ...
- day35-1 类的三大特性---继承,以及类的派生
目录 类的继承 继承的特性 类的派生 类的组合 类的继承 继承是为了拿到父类的所有东西 继承的特性 减少代码的冗余 Python中父类和子类的对应关系是多对多 使用__bases__方法获取对象继承的 ...
- Python学习教程(Python学习视频_Python学些路线):Day06 函数和模块的使用
Python学习教程(Python学习视频_Python学些路线):函数和模块的使用 在讲解本章节的内容之前,我们先来研究一道数学题,请说出下面的方程有多少组正整数解. $$x_1 + x_2 + x ...
- vue-属性传值 props
props属性传值 1.传具体的值 string(字符串) number(数值) boolean(布尔) 2.传一个引用 array(数组) object(对象) ----传引用----- 代码 ...
- shell脚本中source无效
发现在shell里面执行source,提示找不到命令.所以,我取搜了一些资料,总结一下. 一. 脚本中,source找不到命令--------------是因为用了sh执行脚本,而debian系统的s ...
- 学习Linux服务的方法
1.服务的概述:名字.功能.特点.原理.端口号 2.安装 3.配置文件的位置 4.服务器启动.关闭的脚本,查看端口 5.此服务的使用方法 6.修改配置文件,案例部署 7.排错调优
- js中window.location的用法
用window.location处理解析当前页面URL window.location 对象所包含的属性 属性 描述 hash 从井号(#)开始的URL(锚点) host 主机名和当前URL的端口号 ...
- Git 基础教程 之 撤销修改
Git跟踪并管理的是修改,而非文件.每次修改,如果不用git add到暂存区,那就不会加入到commit中, 要么全部改完后,再add → commit :要么改一点,就add → commit. 撤 ...
- android 权限问题分析
Android系统是运行在Linux内核上的,Android与Linux分别有自己的一套严格的安全及权限机制, 很多像我这样的新手,尤其是习惯了windows低安全限制的用户,很容易在这方面弄混淆,下 ...