JavaScript基于遍历实现对象深拷贝功能示例

作者:闭包旅人

时间:2026-10-22

浏览:486

本文通过JavaScript遍历操作演示如何实现对象的深拷贝。示例代码包含类型判断与递归逻辑,验证修改副本属性不影响原对象。适合需要理解深拷贝原理及处理复杂嵌套结构的开发者参考。

文章目录

JavaScript对象深拷贝实现

本文通过JavaScript中的遍历操作,详细讲解如何实现对象的深拷贝功能。以下提供具体的代码示例供读者参考与学习。

核心代码与类型判断


function getType(o){
  var _t;
  return ((_t = typeof(o)) == "object" ? o==null && "null" || Object.prototype.toString.call(o).slice(8,-1):_t).toLowerCase();
}
function extend(destination,source){
  for(var p in source){
    if(getType(source[p])=="array"||getType(source[p])=="object"){
      destination[p]=getType(source[p])=="array"?[]:{};
      arguments.callee(destination[p],source[p]);
    }else{
      destination[p]=source[p];
    }
  }
}
var test={
  a:"ss",
  b:"dd",
  c:[
    {d:"css",e:"cdd"},
    {
      m:"ff",
      n:[
        {kk:"11",jj:"22"},
        {ll:"44"}
      ]
    }
  ]
};
var test1={};
extend(test1,test);
console.log(test);
console.log(test1);
test1.c[1].n[0].kk="change"; //改变test1的c属性对象的d属性
console.log(test);
console.log(test1);
console.log(test.c[1].n[0]);
console.log(test1.c[1].n[0]);

测试结果验证

测试结果

JavaScript对象深拷贝实现

根据测试结果分析,利用上述遍历方法,成功完成了对对象test的深拷贝,生成了副本test1。进一步验证显示,修改test1对象的属性值,不会对原始对象test产生任何影响,证明了深拷贝的有效性。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章