视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
JS实现数组深拷贝的方法分析
2020-11-27 22:00:17 责编:小采
文档


本文实例讲述了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.jb51.net/code/HtmlJsRun测试上述代码运行效果。

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

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

下载本文
显示全文
专题