JS实现数组深拷贝的方法分析


Posted in Javascript onMarch 06, 2019

本文实例讲述了JS实现数组深拷贝的方法。分享给大家供大家参考,具体如下:

最近在网上看到一篇关于js数组复制最有效的方法是直接使用slice和concat方法。这2个方法的确是最快的把数组成功复制,而不是引用。可以运行实例:

<script type="text/javascript">
<!--
  var arr1=["1","2","3"],arr2;
  arr2=arr1.slice(0);
  arr1[0]=0; //改变arr1第一个元素
  alert("arr2[0]:"+arr2[0]); //不影响arr2
  var arr3=["1","2","3"],arr4;
  arr4=arr3.concat();
  arr3[0]= 0; //改变arr3第一个元素
  alert("arr4[0]:"+arr4[0]); //不影响arr4
</script>

运行结果可以看到改变原来数组中的元素并不影响拷贝后的数组。但是如果我们把上面例子中的a1换成[["1","2","3"],"2","3"],也就是二维数组,情况就不一样了。

<script type="text/javascript">
<!--
  var a1=[["1","2","3"],"2","3"],a2;
  a2=a1.slice(0);
  a1[0][0]=0; //改变a1第一个元素中的第一个元素
  alert(a2[0][0]); //影响到了a2
-->
</script>

可以看到这2个方法只是复制了数组的第一维,由于数组第一维存放的是第二维的引用,而第二维才是实际存放他们的内容。就此我们可以联想到网上流行的复制对象的函数,其实也只是复制对象的第一层。

<script type="text/javascript">
<!--
  function extend(destination,source)
  {
    for(var property in source)
    {destination[property]=source[property];}
  }
-->
</script>

所以要想深层复制对象,还得在该函数基础上修改下。完整实例如下:

<script type="text/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"}};
  var test1={};
  extend(test1,test);
  test1.c.d="change"; //改变test1的c属性对象的d属性
  alert(test.c.d); //不影响test
-->
</script>

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

更多关于JavaScript相关内容还可查看本站专题:《JavaScript数组操作技巧总结》、《JavaScript字符与字符串操作技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript错误与调试技巧总结》

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

Javascript 相关文章推荐
用js计算页面执行时间的函数
Dec 07 Javascript
分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
Sep 21 Javascript
JQuery获取样式中的background-color颜色值的问题
Aug 20 Javascript
js四舍五入数学函数round使用实例
May 09 Javascript
移动手机APP手指滑动切换图片特效附源码下载
Nov 30 Javascript
Jquery使用小技巧汇总
Dec 29 Javascript
Node.js静态文件服务器改进版
Jan 10 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
May 03 Javascript
用原生js做单页应用
Jan 17 Javascript
html5 canvas 详细使用教程
Jan 20 Javascript
Node.js编写CLI的实例详解
May 17 Javascript
JavaScript实现全选取消效果
Dec 14 Javascript
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
Mar 06 #Javascript
node.js中express模块创建服务器和http模块客户端发请求
Mar 06 #Javascript
微信小程序性能优化之checkSession的使用
Mar 06 #Javascript
详解在微信小程序的JS脚本中使用Promise来优化函数处理
Mar 06 #Javascript
移动端(微信等使用vConsole调试console的方法
Mar 05 #Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
Mar 05 #Javascript
深入理解Puppeteer的入门教程和实践
Mar 05 #Javascript
You might like
第十二节--类的自动加载
2006/11/16 PHP
php基础知识:类与对象(5) static
2006/12/13 PHP
php计算两个日期相差天数的方法
2015/03/14 PHP
对字符串进行HTML编码和解码的JavaScript函数
2010/02/01 Javascript
jQuery.ajax 用户登录验证代码
2010/10/29 Javascript
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
2013/01/27 Javascript
document.documentElement的一些使用技巧
2013/04/18 Javascript
JS实现匀速运动的代码实例
2013/11/29 Javascript
JS实现上下左右对称的九九乘法表
2016/02/22 Javascript
Jquery实现简单的轮播效果(代码管用)
2016/03/14 Javascript
js enter键激发事件实例代码
2016/08/17 Javascript
轻松掌握JavaScript单例模式
2016/08/25 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
2016/11/16 Javascript
使用jQuery ajaxupload插件实现无刷新上传文件
2017/04/23 jQuery
使用angular帮你实现拖拽的示例
2017/07/05 Javascript
浅谈gulp创建完整的项目流程
2017/12/20 Javascript
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
2018/01/20 Javascript
实现jquery放大镜的两种方法
2018/02/22 jQuery
详解关于vue2.0工程发布上线操作步骤
2018/09/27 Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
2020/02/14 Javascript
Python xlwt设置excel单元格字体及格式
2020/04/18 Python
python队列queue模块详解
2018/04/27 Python
Python2包含中文报错的解决方法
2018/07/09 Python
详解Python进阶之切片的误区与高级用法
2018/12/24 Python
python 多维高斯分布数据生成方式
2019/12/09 Python
pyCharm 实现关闭代码检查
2020/06/09 Python
python如何爬取动态网站
2020/09/09 Python
python 实现IP子网计算
2021/02/18 Python
小学学校门卫岗位职责
2014/08/03 职场文书
2014年国庆节寄语
2014/09/19 职场文书
副乡长群众路线教育实践活动个人对照检查材料
2014/09/19 职场文书
学校党委干部个人对照检查材料思想汇报
2014/10/09 职场文书
2015年个人实习工作总结
2015/05/28 职场文书
2015教师个人德育工作总结
2015/07/22 职场文书
Python制作一个随机抽奖小工具的实现
2021/07/07 Python
mysql数据插入覆盖和时间戳的问题及解决
2022/03/25 MySQL