浅拷贝

 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循环。得到的结果是:

  1. newObj[a]=deepCopy(obj1[a])=deepCopy({b:10})----->再次调用deepCopy函数,传入的参数是对象{b:10},执行for/in循环。得到的结果是:
  2. newObj[b]=deepCopy({b:10}[b])=deepCopy(10)-------->再调用deepCopy函数,传入的参数是{10},不是对象,返回obj,也就是10,得到的结果是:
  3. newObj[b]=deepCopy({b:10}[b])=deepCopy(10)=10.

至此,整个“递”的过程就完成了。下面是“归”的过程。也就是一个相反的过程

  1. deepCopy(10)=10.  代入上面的第二步,执行for/in循环得到newObj[b]=10,然后return newObj={b:10}
  2. 代入上面的第一步,执行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深浅拷贝的更多相关文章

  1. JavaScript深浅拷贝区别

    分享一篇自己关注的微信订阅号(前端大全)文章:JavaScript浅拷贝与深拷贝 作者:浪里行舟 https://github.com/ljianshu/Blog/issues/5 这里很详细的讲解了 ...

  2. JavaScript深浅拷贝

    深浅拷贝 基本类型和引用类型 ECMAScript 中的变量类型分为两类: 基本类型:undefined,null,布尔值(Boolean),字符串(String),数值(Number) 引用类型: ...

  3. JavaScript 深浅拷贝

    JavaScript有五种基本数据类型(Undefined, null, Boolean, String, Number),还有一种复杂的数据类型,就是对象. Undefined 其实是已声明但没有赋 ...

  4. javascript简单实现深浅拷贝

    深浅拷贝知识在我们的日常开发中还算是用的比较多,但是之前的状态一直都是只曾听闻,未曾使用(其实用了只是自己没有意识到),所以今天来跟大家聊一聊js的深浅拷贝: 首先我们来了解一下javascript的 ...

  5. JavaScript数据存储和深浅拷贝实际运用

    JavaScript分两种数据类型.1.简单数据类型有:number, string, boolean, undefined和null当声明一个简单数据类型的变量时,在内存中会把数据存在栈里.2.复杂 ...

  6. JavaScript中的事件委托机制跟深浅拷贝

    今天聊下JavaScript中的事件委托跟深浅拷贝 事件委托 首先呢,介绍一下事件绑定 //方法一:通过onclick <button onclick="clickEvent()&qu ...

  7. javascript实现深浅拷贝

    深浅拷贝通常是对于引用数据类型进行的(数据类型为:对象(Object).数组(Array).函数(Function)) 浅拷贝: let obj = {id: 1, name: 2}; let new ...

  8. Javascript 中的深浅拷贝

    工作中经常会遇到需要复制 JS 数据的时候,遇到 bug 时实在令人头疼:面试中也经常会被问到如何实现一个数据的深浅拷贝,但是你对其中的原理清晰吗?一起来看一下吧! 为什么会有深浅拷贝 想要更加透彻的 ...

  9. JavaScript中的深浅拷贝

    深浅拷贝 在JS中,数据类型分为两类: ​ 简单数据类型:Number.Boolean.String.undefined ​ 引用数据类型:Array.Object.Function 简单数据类型通常 ...

随机推荐

  1. SQL Server对数据进行修改

    SQL Server对数据进行修改,修改数据库中的数据. auto"> <tr style="background:red"> <td>编号 ...

  2. Linux各发行版配置总结

    Ubuntu 14.04(该版本下亲测好用) 1.修改开机启动项和默认启动项 sudo gedit /boot/grub/grub.cfg(修改前最好备份一个) 2.登陆界面图片的修改 /usr/sh ...

  3. ASP.NET MVC5 网站开发实践(一)

    一.开发环境 1.开发环境: Visual Studio 2013 2.数据库:Sql Server 2012 3.代码管理:TFS(微软免费提供的) 说明:VS2013与vs2012感觉变化不大,我 ...

  4. jsonp的作用

    jsonp(即JSON with padding),也就是json填充. 背景: json格式的数据对比xml格式的数据,性能上已经有了很大的提升.但是json可以被本地执行仍然会导致几个重要的性能问 ...

  5. url 传参数时出现中文乱码

    1.前端通过 url 传递参数,但是参数又有中文,在下一个页面接受参数的时候中文会乱码 解决方案为: 定义和用法 decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解 ...

  6. 团体程序设计天梯赛-练习集-L1-046. 整除光棍

    L1-046. 整除光棍 这里所谓的“光棍”,并不是指单身汪啦~ 说的是全部由1组成的数字,比如1.11.111.1111等.传说任何一个光棍都能被一个不以5结尾的奇数整除.比如,111111就可以被 ...

  7. Python总结1

    时间:24日下午输入:input()输出:print()格式化输出通过某种占位符用于替换字符串中某个位置的字符.占位符:%s:可以替换任意类型%d:可以替换数字类型 需要掌握的#1.strip去左右两 ...

  8. [MySQL优化案例]系列 — RAND()优化

    众所周知,在MySQL中,如果直接 ORDER BY RAND() 的话,效率非常差,因为会多次执行.事实上,如果等值查询也是用 RAND() 的话也如此,我们先来看看下面这几个SQL的不同执行计划和 ...

  9. [jzoj 5770]【2018提高组模拟A组8.6】可爱精灵宝贝 (区间dp)

    传送门 Description Branimirko是一个对可爱精灵宝贝十分痴迷的玩家.最近,他闲得没事组织了一场捉精灵的游戏.游戏在一条街道上举行,街道上一侧有一排房子,从左到右房子标号由1到n. ...

  10. 去除html标签 php

    function my_html($string,$sublen =80){ $string = strip_tags($string); $string = preg_replace ('/\n/i ...