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 asp.net 获取当前超链接中的文本
Apr 14 Javascript
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
Nov 18 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
Dec 04 Javascript
Javascript中的Prototype到底是什么
Feb 16 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
Sep 02 Javascript
AngularJS表格样式简单设置方法示例
Mar 03 Javascript
parabola.js抛物线与加入购物车效果的示例代码
Oct 25 Javascript
JavaScript选择排序算法原理与实现方法示例
Aug 06 Javascript
说说Vuex的getters属性的具体用法
Apr 15 Javascript
你了解vue3.0响应式数据怎么实现吗
Jun 07 Javascript
layui 对table中的数据进行转义的实例
Sep 12 Javascript
详解vite2.0配置学习(typescript版本)
Feb 25 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中使用Imagick实现各种图片效果实例
2015/01/21 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
Aster vs KG BO3 第一场2.19
2021/03/10 DOTA
简单的代码实现jquery定时器
2013/11/17 Javascript
js Object2String方便查看js对象内容
2014/11/24 Javascript
JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法
2015/07/01 Javascript
javascript封装 Cookie 应用接口
2015/08/07 Javascript
整理Javascript基础语法学习笔记
2015/11/29 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记8)
2015/12/24 Javascript
jQuery对table表格进行增删改查
2020/12/22 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
2017/03/02 Javascript
基于Vue中点击组件外关闭组件的实现方法
2018/03/06 Javascript
ES6之模版字符串的具体使用
2018/05/17 Javascript
js中位数不足自动补位扩展padLeft、padRight实现代码
2020/04/06 Javascript
[47:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python中日志logging模块的性能及多进程详解
2017/07/18 Python
Python基于正则表达式实现文件内容替换的方法
2017/08/30 Python
Django中的ajax请求
2018/10/19 Python
python2.7使用scapy发送syn实例
2020/05/05 Python
Python 开发工具通过 agent 代理使用的方法
2020/09/27 Python
Scrapy 配置动态代理IP的实现
2020/09/28 Python
加拿大鞋子连锁店:Town Shoes
2016/09/26 全球购物
Jeep牧马人、切诺基和自由人零配件:4 Wheel Drive Hardware
2017/07/02 全球购物
英国领先的品牌珠宝和配件供应商:Acotis Jewellery
2018/03/07 全球购物
SteelSeries赛睿官网:游戏外设和配件的领先制造商(耳机、键盘、鼠标和鼠标垫)
2018/06/17 全球购物
飞利浦美国官网:Philips美国
2020/02/28 全球购物
工程概预算专业毕业生求职信
2013/10/04 职场文书
幼儿园开学寄语
2014/04/03 职场文书
银行服务明星推荐材料
2014/05/29 职场文书
经济贸易系毕业生求职信
2014/05/31 职场文书
解除劳动关系协议书范文
2014/09/11 职场文书
交通事故和解协议书
2014/09/25 职场文书
比赛口号霸气押韵
2015/12/24 职场文书
导游词之永泰公主墓
2019/12/04 职场文书
JS数组方法some、every和find的使用详情
2021/10/05 Javascript
分享python函数常见关键字
2022/04/26 Python