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

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

var obj = { a:1, arr: [2,3] };
var shadowObj = shadowCopy(obj); function shadowCopy(src) {
var dst = {};
for (var prop in src) {
if (src.hasOwnProperty(prop)) {
dst[prop] = src[prop];
}
}
return dst;
}

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

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

下面给出深复制的代码:

function deepCopy ( obj ) {
var tmp = {};
for ( var k in obj ) {
tmp[ k ] = obj[ k ];
}
return tmp;
}
//在这个函数中最关键的一步 tmp[ k ] = obj[ k ]
//所以这里只需要保证 obj[ k ] 这个赋值是一个深度拷贝的对象即可.
//注意: 函数的目的是得到 obj 的深拷贝副本. 因此递归一下. function deepCopy ( obj ) {
var tmp = {}, k;
for ( k in obj ) {
if ( typeof obj[ k ] === 'object' ) {
tmp[ k ] = deepCopy( obj[ k ] );
} else {
tmp[ k ] = obj[ k ];
}
}
return tmp;
} // 如果处理这个对象
var o3 = {
name: 'jim',
scores: [
90,
95,
85
]
}; // 该代码无法处理数组的情况,做如下改动
function deepCopy ( obj ) {
var tmp = obj.length >= 0 ?
obj instanceof Array ? [] : { length: 0 } :
{},
k;
for ( k in obj ) {
if ( typeof obj[ k ] === 'object' ) {
tmp[ k ] = deepCopy( obj[ k ] );
} else {
tmp[ k ] = obj[ k ];
}
}
return tmp;
}

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

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. pyspider 爬虫教程(一):HTML 和 CSS 选择器

      虽然以前写过 如何抓取WEB页面 和 如何从 WEB 页面中提取信息.但是感觉还是需要一篇 step by step 的教程,不然没有一个总体的认识.不过,没想到这个教程居然会变成一篇译文,在这个 ...

  2. 牛客网 牛客小白月赛1 D.多项式乘法

    D.多项式乘法   链接:https://www.nowcoder.com/acm/contest/85/D来源:牛客网 这个题想一下就能想出来了. 代码: 1 #include<iostrea ...

  3. JSP-Servlet-SpringMVC

    作者:码思客链接:https://zhuanlan.zhihu.com/p/37612412来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 本篇文章,我们来讲讲技术,系 ...

  4. HDU 3549 Flow Problem (dinic模版 && isap模版)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3549 题意: 给你一个有向图,问你1到n的最大流. dinic模版 (n*n*m) #include ...

  5. Apollo 分布式配置中心

    1.  介绍 Apollo(阿波罗)是携程框架部门研发的分布式配置中心,能够集中化管理应用不同环境.不同集群的配置,配置修改后能够实时推送到应用端,并且具备规范的权限.流程治理等特性,适用于微服务配置 ...

  6. Java线程池原理解读

    引言 引用自<阿里巴巴JAVA开发手册> [强制]线程资源必须通过线程池提供,不允许在应用中自行显式创建线程. 说明:使用线程池的好处是减少在创建和销毁线程上所消耗的时间以及系统资源的开销 ...

  7. PHP页面跳转几种实现方法

    转载自冠威博客 [ http://www.guanwei.org/ ]本文链接地址:http://www.guanwei.org/post/PHPnotes/04/php-redirect-metho ...

  8. EclipseADT(4.2) 安装 STS(spring )

    因为ADT 版本是4.2, 网上找了一圈 from: https://spring.io/blog/2012/03/14/early-access-springsource-tool-suite-fo ...

  9. linux中top命令的用法

    收集了两篇关于介绍Linux中监控命令top命令的详细使用方法的文章.总的来说,top命令主要用来查看Linux系统的各个进程和系统资源占用情况,在监控Linux系统性能方面top显得非常有用,下面就 ...

  10. 14. Spring Boot定时任务的使用【从零开始学Spring Boot】

    com.kfit.base.scheduling.SchedulingConfig: package com.kfit.base.scheduling; import org.springframew ...