JavaScript深度克隆（深度拷贝）一个对象

WEB前端开发 2013-03-11 13:55:16 累计浏览 5,842 次

本机暂存

内容概览

这篇文章从一道常见的前端笔试题“深度克隆一个对象”切入，解释了为什么很多人面对题目时会感到无从下手。作者首先厘清了JavaScript中的两种数据类型：基本类型（如Number、String）按值传递，而引用类型（如Object、Array）传递的是内存地址。这正是浅拷贝与深拷贝的根本区别所在——直接赋值只会复制地址，修改一个对象会影响到另一个。

接着，文章应该深入探讨了实现深度克隆的几种核心思路，例如使用递归遍历对象属性、利用JSON序列化与反序列化的特性，或是借助结构化克隆算法等现代API。这些方法在性能、处理循环引用以及保留特定对象类型（如Date、RegExp）上各有优劣，文章可能对此进行了分析和对比。

通过阅读这篇文章，开发者不仅能搞懂深度克隆问题的来龙去脉，还能掌握从基础原理到实际代码的完整解决方案，有效避免在状态管理或数据操作时因浅拷贝导致的意外副作用。

我有一个前端笔试题：使用JavaScript深度克隆一个对象。可是我发现大多数人都是空白，问他为什么不做，大部分说不懂这题目的意思。

科普一下：

js一般有两种不同数据类型的值：

基本类型（包括undefined,Null,boolean,String,Number），按值传递；

引用类型（包括数组，对象），按址传递，引用类型在值传递的时候是内存中的地址。例如：

1var a={"a":1};
2
3var b=a;
4
5b["b"]=2;
6
7console.log(a);//{"a":1,"b":2};

如果你修改b的值，那么a变量的值也发生了变化。

克隆或者拷贝分为2种：浅度克隆（拷贝），深度克隆（拷贝）；

浅度克隆：基本类型为值传递，对象仍为引用传递。

深度克隆：所有元素或属性均完全克隆，并于原引用类型完全独立，即，在后面修改对象的属性的时候，原对象不会被修改。

我的深度克隆代码如下：

01function cloneObject(o) {
       if(!o || 'object' !== typeof o) {
           return o;
       }
       var temp;
       if(o.constructor === Array){
           //temp=o.concat();
           temp = [];
           var i = o.length;
           while (i--) {
               temp[i] = cloneObject(o[i]);
           }
       }else if(o.constructor === Object){
           temp = {}; 
           for (var k in o) {
               if(o.hasOwnProperty(k)){
                   temp[k] = cloneObject(o[k]);
               }
           }
       }
       return temp;
   }

主要使用了递归。
不过代码看上去挺变扭的，被朋友批了一顿，数组本来就是对象，可以精简代码。优化了一下，欢迎拍砖：

1function cloneObject(obj){
   var o = obj.constructor === Array ? [] : {};
   for(var i in obj){
       if(obj.hasOwnProperty(i)){
           o[i] = typeof obj[i] === "object" ? cloneObject(obj[i]) : obj[i];

同分类推荐文章

translateZ() （2026-06-25 21:18:56）
translateY() （2026-06-25 21:17:56）
translateX() （2026-06-25 21:16:01）

查看更多前端文章 →

建议继续学习

JQuery实现Excel表格呈现（累计阅读 48,346）
深入理解Javascript之执行上下文(Execution Context) （累计阅读 18,401）
从输入 URL 到页面加载完成的过程中都发生了什么事情？（累计阅读 15,931）
图片动态局部毛玻璃模糊效果的实现（累计阅读 14,845）
天朝第二代身份证号码的验证机制（累计阅读 14,760）
HTML 5 的data-* 自定义属性（累计阅读 14,348）
分享一个JQUERY颜色选择插件（累计阅读 14,222）
什么是全栈工程师？（累计阅读 14,035）
快速排序（Quicksort）的Javascript实现（累计阅读 11,733）
7 天打造前端性能监控系统（累计阅读 11,187）