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 相关文章推荐
在jQuery中 关于json空对象筛选替换
Apr 15 Javascript
通过js获取div的background-image属性
Oct 15 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
Jan 09 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
Dec 20 Javascript
Javascript中的包装类型介绍
Apr 02 Javascript
jQuery动画效果图片轮播特效
Jan 12 Javascript
AngularJS 作用域详解及示例代码
Aug 17 Javascript
AngularJs  Using $location详解及示例代码
Sep 02 Javascript
JS控制HTML元素的显示和隐藏的两种方法
Sep 27 Javascript
微信小程序 闭包写法详细介绍
Dec 14 Javascript
利用jquery正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
JS实现深度优先搜索求解两点间最短路径
Jan 17 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 高手之路(三)
2006/10/09 PHP
php防止sql注入代码实例
2013/12/18 PHP
php parse_str() 函数的定义和用法
2016/05/23 PHP
php中str_pad()函数用法分析
2017/03/28 PHP
[原创]php正则删除img标签的方法示例
2017/05/27 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
PHP小白必须要知道的php基础知识(超实用)
2017/10/10 PHP
php数值计算num类简单操作示例
2020/05/15 PHP
alert中断settimeout计时功能
2013/07/26 Javascript
JavaScript编程中的Promise使用大全
2015/07/28 Javascript
JS绘制生成花瓣效果的方法
2015/08/05 Javascript
Jquery数字上下滚动动态切换插件
2015/08/08 Javascript
基于jquery实现页面滚动到底自动加载数据的功能
2015/12/19 Javascript
全面理解JavaScript中的继承(必看)
2016/06/16 Javascript
canvas绘制的直线动画
2017/01/23 Javascript
JavaScript对象引用与赋值实例详解
2017/03/15 Javascript
JS实现移动端按首字母检索城市列表附源码下载
2017/07/05 Javascript
js实现抽奖的两种方法
2020/03/19 Javascript
如何修改Vue打包后文件的接口地址配置的方法
2020/04/22 Javascript
Python中你应该知道的一些内置函数
2017/03/31 Python
Python实现的手机号归属地相关信息查询功能示例
2017/06/08 Python
解决python报错MemoryError的问题
2018/06/26 Python
Python3删除排序数组中重复项的方法分析
2019/01/31 Python
python使用Pandas库提升项目的运行速度过程详解
2019/07/12 Python
Python使用matplotlib 模块scatter方法画散点图示例
2019/09/27 Python
通过 Django Pagination 实现简单分页功能
2019/11/11 Python
关于初始种子自动选取的区域生长实例(python+opencv)
2020/01/16 Python
html5+css3之CSS中的布局与Header的实现
2014/11/21 HTML / CSS
POS解决方案:MUNBYN(热敏打印机、条形码扫描仪)
2020/06/09 全球购物
小学运动会入场式解说词
2014/02/18 职场文书
第一批党的群众路线教育实践活动工作总结
2014/03/03 职场文书
劲霸男装广告词
2014/03/21 职场文书
工地例会施工汇报材料
2014/08/22 职场文书
教师四风问题对照检查材料
2014/09/26 职场文书
导游词之绍兴柯岩古镇
2020/01/09 职场文书
java基础——多线程
2021/07/03 Java/Android