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 相关文章推荐
Prototype RegExp对象 学习
Jul 19 Javascript
js屏蔽鼠标键盘(右键/Ctrl+N/Shift+F10/F11/F5刷新/退格键)
Jan 24 Javascript
js将当前时间格式转换成时间搓(自写)
Sep 26 Javascript
js获得网页背景色和字体色的方法
Mar 21 Javascript
jQuery中get和post方法传值测试及注意事项
Aug 08 Javascript
JavaScript禁止用户多次提交的两种方法
Jul 24 Javascript
JS中检测数据类型的几种方式及优缺点小结
Dec 12 Javascript
一个例子轻松学会Vue.js
Jan 02 Javascript
vue-router history模式下的微信分享小结
Jul 05 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
Sep 27 Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
Apr 27 Javascript
JavaScript事件委托实现原理及优点进行
Aug 29 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
PHP 和 MySQL 基础教程(三)
2006/10/09 PHP
PHP中获取内网用户MAC地址(WINDOWS/linux)的实现代码
2011/08/11 PHP
php使用codebase生成随机数
2014/03/25 PHP
Laravel 5框架学习之Blade 简介
2015/04/08 PHP
PHP defined()函数的使用图文详解
2019/07/20 PHP
JSChart轻量级图形报表工具(内置函数中文参考)
2010/10/11 Javascript
JavaScript 类型的包装对象(Typed Wrappers)
2011/10/27 Javascript
jQuery toggleClass应用实例(附效果图)
2014/04/06 Javascript
Js与Jq 获取页面元素值的方法和差异对比
2015/04/30 Javascript
jQuery满屏焦点图左右滚动特效代码分享
2015/09/07 Javascript
JS获取一个未知DIV高度的方法
2016/08/09 Javascript
Node.js与MySQL交互操作及其注意事项
2016/10/05 Javascript
浅谈JavaScript的自动垃圾收集机制
2016/12/15 Javascript
js前端日历控件(悬浮、拖拽、自由变形)
2017/03/02 Javascript
10行代码实现微信小程序滑动tab切换
2018/12/28 Javascript
validform表单验证的实现方法
2019/03/08 Javascript
Jquery 获取相同NAME 或者id删除行操作
2020/08/24 jQuery
JavaScript canvas实现跟随鼠标移动小球
2021/02/09 Javascript
跟老齐学Python之坑爹的字符编码
2014/09/28 Python
详解python里的命名规范
2018/07/16 Python
使用python接入微信聊天机器人
2020/03/31 Python
python中sort和sorted排序的实例方法
2019/08/26 Python
Python实现爬取并分析电商评论
2020/06/19 Python
python实现最短路径的实例方法
2020/07/19 Python
奥地利汽车配件店:Pkwteile.at
2017/03/10 全球购物
YSL圣罗兰美妆英国官网:Yves Saint Laurent Beauty UK
2019/08/03 全球购物
飞利信loadrunner和软件测试笔试题
2012/09/22 面试题
机电工程专业应届生求职信
2013/10/03 职场文书
接受捐赠答谢词
2014/01/27 职场文书
迎八一活动主题
2014/01/31 职场文书
商务英语广告词大全
2014/03/18 职场文书
雷峰塔导游词
2015/02/09 职场文书
优秀学生干部主要事迹材料
2015/11/04 职场文书
导游词之台湾安平古堡
2019/12/25 职场文书
Feign调用全局异常处理解决方案
2021/06/24 Java/Android
简单聊聊TypeScript只读修饰符
2022/04/06 Javascript