本文实例讲述了JavaScript实现浅拷贝与深拷贝的方法。分享给大家供大家参考,具体如下:
平时使用数组复制时,我们大多数会使用‘=',这只是浅拷贝,存在很多问题。比如
let arr = [1,2,3,4,5]; let arr2 = arr; console.log(arr) //[1, 2, 3, 4, 5] console.log(arr2) //[1, 2, 3, 4, 5] arr[0] = 6; console.log(arr) //[6, 2, 3, 4, 5] console.log(arr2) //[6, 2, 3, 4, 5] arr2[4] = 7; console.log(arr) //[6, 2, 3, 4, 7] console.log(arr2) //[6, 2, 3, 4, 7]
很明显,浅拷贝下,拷贝和被拷贝的数组会相互受到影响。所以,必须要有一种不受影响的方法,那就是深拷贝。
深拷贝的实现方式有很多种。
一、for循环实现深拷贝
//for循环copy function copy(arr) { let cArr = [] for(let i = 0; i < arr.length; i++){ cArr.push(arr[i]) } return cArr; } let arr3 = [1,2,3,4]; let arr4 = copy(arr3) //[1,2,3,4] console.log(arr4) //[1,2,3,4] arr3[0] = 5; console.log(arr3) //[5,2,3,4] console.log(arr4) //[1,2,3,4]
二、slice方法实现深拷贝
//slice实现深拷贝 let arr5 = [1,2,3,4]; let arr6 = arr5.slice(0); arr5[0] = 5; console.log(arr5); //[5,2,3,4] console.log(arr6); //[1,2,3,4]
三、concat实现深拷贝
//concat实现深拷贝 let arr7 = [1,2,3,4]; let arr8 = arr7.concat(); arr7[0] = 5; console.log(arr7); //[5,2,3,4] console.log(arr8); //[1,2,3,4]
四、es6扩展运算实现深拷贝
//es6扩展运算实现深拷贝 let arr9 = [1,2,3,4]; let [...arr10] = arr9; arr9[0] = 5; console.log(arr9) //[5,2,3,4] console.log(arr10) //[1,2,3,4]
五、对象的循环深拷贝
// 循环copy对象 let obj = { id:'0', name:'king', sex:'man' } let obj2 = copy2(obj) function copy2(obj) { let cObj = {}; for(var key in obj){ cObj[key] = obj[key] } return cObj } console.log(obj) //{id: "0", name: "king", sex: "man"} console.log(obj2) //{id: "0", name: "king", sex: "man"}
六、对象转换成json实现深拷贝
//转换成json let obj3 = JSON.parse(JSON.stringify(obj)); console.log(obj3) //{id: "0", name: "king", sex: "man"}
七、es6扩展运算实现深拷贝
let {...obj4}= obj console.log(obj4) //{id: "0", name: "king", sex: "man"}
八、通用深拷贝
var clone = function (v) { var o = v.constructor === Array "object" "_blank" href="//www.jb51.net/Special/85.htm">javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》希望本文所述对大家JavaScript程序设计有所帮助。
风云阁资源网 Design By www.bgabc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
风云阁资源网 Design By www.bgabc.com
暂无评论...
更新日志
2024年09月20日
2024年09月20日
- [电影原声带]黎允文《天将雄师》[FLAC+CUE]
- 曝NS继任机型已进入量产阶段:已花了30亿日元
- 不是Switch2?曝《马里奥惊奇》NS捆绑包即将公开
- 暖心任天堂!网友Switch维修返还时贴纸被完好保留
- 《国语老歌 经典对唱情歌 2CD》[WAV/分轨][1.1GB]
- 《刀郎 翻唱精选华语专辑 披着羊皮的狼 》[WAV+CUE][430MB]
- 《真的田震 中国乐坛红极一时的歌者 精品集》[WAV+CUE][300MB]
- 群星.1995-新滚石九大天王之情歌大全【滚石】【WAV+CUE】
- 群星.1993-滚石九大天王十二出好戏·纵夏欢唱【滚石】【WAV+CUE】
- 群星.1993-滚石九大天王十二出好戏·贺岁齐唱【滚石】【WAV+CUE】
- 黑神话悟空上品虫校尉精魄获取方法一览|上品虫校尉精魄收集攻略
- 《指环王:夏尔的传说》推迟至2025年初发行
- 黑神话悟空上品蝎太子精魄获取方法一览|上品蝎太子精魄收集攻略
- 银霞.1977-《台北66电影原声带》台湾复刻版[WAV+CUE]
- 银霞.1980-《你那好冷的小手》台湾珍藏纪念版[WAV+CUE]