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 相关文章推荐
javascript 屏蔽鼠标键盘的几段代码
Jan 02 Javascript
javascript创建createXmlHttpRequest对象示例代码
Feb 10 Javascript
JS实现图片高亮展示效果实例
Nov 24 Javascript
Jquery uploadify上传插件使用详解
Jan 13 Javascript
jQuery验证插件validate使用详解
May 11 Javascript
js阻止默认浏览器行为与冒泡行为的实现代码
May 15 Javascript
React Native实现进度条弹框的示例代码
Jul 17 Javascript
关于JavaScript中forEach和each用法浅析
Jul 27 Javascript
JS Testing Properties 判断属性是否在对象里的方法
Oct 01 Javascript
vue element-ui实现input输入框金额数字添加千分位
Dec 29 Javascript
Angular8 实现table表格表头固定效果
Jan 03 Javascript
Vue Elenent实现表格相同数据列合并
Nov 30 Vue.js
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巧获服务器端信息
2006/12/06 PHP
mysql 的 like 问题,超强毕杀记!!!
2007/01/18 PHP
Yii2框架数据验证操作实例详解
2018/05/02 PHP
jQuery 加上最后自己的验证
2009/11/04 Javascript
js输出列表实现代码
2010/09/12 Javascript
javascript 获取元素样式必杀技
2014/05/04 Javascript
js实现星星打分效果的方法
2020/07/05 Javascript
JavaScript中数组的合并以及排序实现示例
2015/10/24 Javascript
JavaScript学习笔记之ES6数组方法
2016/03/25 Javascript
js仿微信语音播放实现思路
2016/12/12 Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
2017/10/27 Javascript
vue2过滤器模糊查询方法
2018/09/16 Javascript
nuxt中使用路由守卫的方法步骤
2019/01/27 Javascript
layui实现数据分页功能
2019/07/27 Javascript
python操作MongoDB基础知识
2013/11/01 Python
使用Python-OpenCV向图片添加噪声的实现(高斯噪声、椒盐噪声)
2019/05/28 Python
PyQt5通信机制 信号与槽详解
2019/08/07 Python
Python使用Pandas读写Excel实例解析
2019/11/19 Python
python3.7通过thrift操作hbase的示例代码
2020/01/14 Python
Python使用eval函数执行动态标表达式过程详解
2020/10/17 Python
开普敦通行证:Cape Town Pass
2019/07/18 全球购物
27个经典Linux面试题及答案,你知道几个?
2013/01/10 面试题
银行自荐信范文
2013/10/07 职场文书
公司员工的自我评价范例
2013/11/01 职场文书
企业行政文员岗位职责
2013/12/03 职场文书
大学生最新职业生涯规划书范文
2014/01/12 职场文书
餐饮业经理竞聘演讲稿
2014/01/14 职场文书
护士在校生自荐信
2014/02/01 职场文书
给校长的建议书100字
2014/05/16 职场文书
导游词格式
2015/02/13 职场文书
师德培训心得体会2016
2016/01/09 职场文书
2019辞职报告范本3篇!
2019/07/23 职场文书
python 破解加密zip文件的密码
2021/04/22 Python
Python实战之实现简易的学生选课系统
2021/05/25 Python
让文件路径提取变得更简单的Python Path库
2021/05/27 Python
详解Alibaba Java诊断工具Arthas查看Dubbo动态代理类
2022/04/08 Java/Android