在工作中遇到了深浅复制的问题,所以详细总结一下:

深复制和浅复制只针对像 Object, Array 这样的复杂对象的。简单来说,浅复制只复制一层对象的属性,而深复制则递归复制了所有层级。

  1. var obj = { a:1, arr: [2,3] };
  2. var shadowObj = shadowCopy(obj);
  3.  
  4. function shadowCopy(src) {
  5. var dst = {};
  6. for (var prop in src) {
  7. if (src.hasOwnProperty(prop)) {
  8. dst[prop] = src[prop];
  9. }
  10. }
  11. return dst;
  12. }

这是一种典型的浅复制,shadowCopy方法将对象的各个属性进行依次复制,并不会进行递归复制,而 JavaScript 存储对象都是存地址的,所以浅复制会导致 obj.arr 和 shadowObj.arr 指向同一块内存地址。当其中一个变量对指向的值做了修改,另一个变量在调用时数值也就修改了。

  1. shadowObj.arr[1] = 5;
  2. obj.arr[1] // = 5

下面给出深复制的代码:

  1. function deepCopy ( obj ) {
  2. var tmp = {};
  3. for ( var k in obj ) {
  4. tmp[ k ] = obj[ k ];
  5. }
  6. return tmp;
  7. }
  8. //在这个函数中最关键的一步 tmp[ k ] = obj[ k ]
  9. //所以这里只需要保证 obj[ k ] 这个赋值是一个深度拷贝的对象即可.
  10. //注意: 函数的目的是得到 obj 的深拷贝副本. 因此递归一下.
  11.  
  12. function deepCopy ( obj ) {
  13. var tmp = {}, k;
  14. for ( k in obj ) {
  15. if ( typeof obj[ k ] === 'object' ) {
  16. tmp[ k ] = deepCopy( obj[ k ] );
  17. } else {
  18. tmp[ k ] = obj[ k ];
  19. }
  20. }
  21. return tmp;
  22. }
  23.  
  24. // 如果处理这个对象
  25. var o3 = {
  26. name: 'jim',
  27. scores: [
  28. 90,
  29. 95,
  30. 85
  31. ]
  32. };
  33.  
  34. // 该代码无法处理数组的情况,做如下改动
  35. function deepCopy ( obj ) {
  36. var tmp = obj.length >= 0 ?
  37. obj instanceof Array ? [] : { length: 0 } :
  38. {},
  39. k;
  40. for ( k in obj ) {
  41. if ( typeof obj[ k ] === 'object' ) {
  42. tmp[ k ] = deepCopy( obj[ k ] );
  43. } else {
  44. tmp[ k ] = obj[ k ];
  45. }
  46. }
  47. return tmp;
  48. }

对于深复制,如果对象比较大,层级也比较多,深复制会带来性能上的问题。在遇到需要采用深复制的场景时,可以考虑有没有其他替代的方案。在实际的应用场景中,也是浅复制更为常用。

JSON.parse( JSON.stringify(a) )这种方法比较简单,但同时也存在问题

  • 无法复制函数
  • 原型链没了,对象就是object,所属的类没了。这会抛弃对象的constructor,也就是深复制之后,无论这个对象原本的构造函数是什么,在深复制之后都会变成Object。另外诸如RegExp对象是无法通过这种方式深复制的。

javaScript 深层复制的更多相关文章

  1. java数组对象的浅层复制与深层复制

    实际上,java中数组对象的浅层复制只是复制了对象的引用(参考),而深层复制的才是对象所代表的值.

  2. javascript禁止复制网页内容,兼容三大浏览器

    javascript禁止复制网页内容可以通过以下方式实现:禁止鼠标右键+禁止选中文本. 代码很简单,只需要在head标签的javascript内加入以下两行代码即可. document.onconte ...

  3. js中的深层复制

    同java一样,数据的复制,不小心就是一个浅复制,莫名其妙的数据就被修改了,所以我们需要考虑深层复制的问题.这里提供一个深层复制的方法. 1.脚本 /** * 深层复制 */ cloneObject ...

  4. Java深层复制方式

    为什么需要深层复制 Object 的 clone() 方法是浅层复制(但是 native 很高效).另外,Java 提供了数组和集合的复制方法,分别是 Arrays.copy() 和 Collecti ...

  5. c++中深层复制(浅层复制运行错误)成功运行-----sample

    下面随笔给出c++中深层复制(浅层复制运行错误)成功运行------sample. 浅层复制与深层复制 浅层复制 实现对象间数据元素的一一对应复制. 深层复制 当被复制的对象数据成员是指针类型时,不是 ...

  6. 【javascript】复制到剪贴板功能(支持目前各种浏览器)

    本demo支持各种浏览器复制,亲测可用(IE8,IE9,IE10,火狐,谷歌). 本demo中使用了ZeroClipboard(下载地址:https://github.com/zeroclipboar ...

  7. Javascript 实现复制(Copy)动作方法大全

    一.实现点击按钮,复制文本框中的的内容 <script type="text/javascript"> function copyUrl2() { var Url2=d ...

  8. JavaScript对象复制(一)(转载)

    在JavaScript很多人复制一个对象的时候都是直接用"=",因为大家都觉得脚本语言是没有指针.引用.地址之类的,所以直接用"="就可以把一个对象复制给另外一 ...

  9. javascript 复制与粘贴操作

    <script language="javascript"> function readTxt() { alert(window.clipboardData.getDa ...

随机推荐

  1. C/C++初学攻略

    最近有朋友问我C++(or C)怎么入门,其实这个还真不是很好回答的,想了下就写下这篇博文以说下我自己的学习路程吧! 正儿八经的,其实我觉得自己也学得不咋地,不管是C还是C++都是如此的强大,要真正的 ...

  2. RSTP介绍

    1. 介绍 RSTP(Rapid Spanning Tree Protocol),快速生成树协议,标准为802.1w(已合入802.1D-2004)RSTP是对STP技术的修改和补充,最大特点就是快速 ...

  3. linux下kodi没有声音的解决

    前几天,心血来潮,就安装了manjaro的pre3版本,由于是mini kde版本的,就随手安装了kodi,可以用来看视频,听音乐和看图片. 结果在所有插件都折腾好了之后发现,在屏幕的右上角有一个喇叭 ...

  4. Bitmap类

    一.Bitmap类 Bitmap对象封装了GDI+中的一个位图,此位图由图形图像及其属性的像素数据组成.因此Bitmap是用于处理由像素数据定义的图像的对象.该类的主要方法和属性如下: 1. GetP ...

  5. HDU 1005 Number Sequence【斐波那契数列/循环节找规律/矩阵快速幂/求(A * f(n - 1) + B * f(n - 2)) mod 7】

    Number Sequence Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)T ...

  6. 站点部署,IIS配置优化指南

    目录 一. 二. 三. 四. 五. 六. 七.       安全性 八.       多服务器IIS集中化管理web 通常把站点发布到IIS上运行正常后,很少会去考虑IIS提供的各种参数,如何配置才是 ...

  7. ES6十大特性

    本文主要针对ES6做一个简要介绍. 主要译自:  http://webapplog.com/ES6/comment-page-1/.也许你还不知道ES6是什么, 实际上, 它是一种新的javascri ...

  8. 从int 3探索Windows应用程序调试原理

    http://www.cnblogs.com/xuanyuan/p/3998408.html

  9. Android程序员的进阶之路

    本文主要论述的是Android程序员的进阶之路,博主本人就是一名android开发攻城狮,所以这里讲述的大多数是android开发攻城狮的技术进阶之路,如有问题请多指正. 大家都知道程序员之中有有菜鸟 ...

  10. ylb:SQL 系统函数

    ylbtech-SQL Server: SQL Server-SQL 系统函数 SQL 系统函数 1,ylb:SQL 系统函数 返回顶部 -- ============================ ...