JavaScript实现浅拷贝与深拷贝的方法分析


Posted in Javascript onJuly 05, 2018

本文实例讲述了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 ? [] : {};
    for(var i in v){
      o[i] = typeof v[i] === "object" ? clone(v[i]) : v[i];
    }
    return o;
}

总结:深刻理解javascript的深浅拷贝,可以灵活的运用数组,并且可以避免很多bug。

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

Javascript 相关文章推荐
关于JavaScript的gzip静态压缩方法
Jan 05 Javascript
与Math.pow 相反的函数使用介绍
Aug 04 Javascript
js获取当前日期时间及其它操作汇总
Apr 17 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
Apr 30 Javascript
jQuery往textarea中光标所在位置插入文本的方法
Jun 26 Javascript
zepto与jquery的区别及zepto的不同使用8条小结
Jul 28 Javascript
原生JS:Date对象全面解析
Sep 06 Javascript
Vue数据驱动模拟实现2
Jan 11 Javascript
JS实现的合并两个有序链表算法示例
Feb 25 Javascript
layui2.0使用table+laypage实现真分页
Jul 27 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
Sep 18 Javascript
vue cli3适配所有端方案的实现
Apr 13 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
Jul 05 #Javascript
vue使用ElementUI时导航栏默认展开功能的实现
Jul 04 #Javascript
vue两个组件间值的传递或修改方式
Jul 04 #Javascript
jQuery实现炫丽的3d旋转星空效果
Jul 04 #jQuery
jQuery实现table表格checkbox全选的方法分析
Jul 04 #jQuery
React组件内事件传参实现tab切换的示例代码
Jul 04 #Javascript
解决vue项目打包后提示图片文件路径错误的问题
Jul 04 #Javascript
You might like
无线电的诞生过程
2021/03/01 无线电
PHP一些常用的正则表达式字符的一些转换
2008/07/29 PHP
php-accelerator网站加速PHP缓冲的方法
2008/07/30 PHP
windows的文件系统机制引发的PHP路径爆破问题分析
2014/07/28 PHP
Cygwin中安装PHP方法步骤
2015/07/04 PHP
Laravel框架控制器的middleware中间件用法分析
2019/09/30 PHP
dwr spring的集成实现代码
2009/03/22 Javascript
js 鼠标点击事件及其它捕获
2009/06/04 Javascript
JavaScript QueryString解析类代码
2010/01/17 Javascript
jQuery 学习第五课 Ajax 使用说明
2010/05/17 Javascript
JavaScript中通过提示框跳转页面的方法
2016/02/14 Javascript
AngularJS基础 ng-value 指令简单示例
2016/08/03 Javascript
jQuery实现的模拟弹出窗口功能示例
2016/11/24 Javascript
关于在mongoose中填充外键的方法详解
2017/08/14 Javascript
微信小程序组件之srcoll-view的详解
2017/10/19 Javascript
vue better-scroll插件使用详解
2018/01/25 Javascript
vue .sync修饰符的使用详解
2018/06/15 Javascript
详解javascript函数写法大全
2019/03/25 Javascript
微信小程序 确认框的实现(附代码)
2019/07/23 Javascript
微信小程序 搜索框组件代码实例
2019/09/06 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
2019/09/20 Javascript
对vue中的事件穿透与禁止穿透实例详解
2019/10/28 Javascript
[55:03]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.20
2020/11/20 DOTA
python中将字典转换成其json字符串
2014/07/16 Python
Python实现自定义顺序、排列写入数据到Excel的方法
2018/04/23 Python
Python排序算法之选择排序定义与用法示例
2018/04/29 Python
python实现的Iou与Giou代码
2020/01/18 Python
Python多重继承之菱形继承的实例详解
2020/02/12 Python
CSS实现定位元素居中的方法
2015/06/23 HTML / CSS
HTML5实现表单自动验证功能实例代码
2017/01/11 HTML / CSS
html5简介及新增功能介绍
2020/05/18 HTML / CSS
服装设计专业自荐书范文
2013/12/30 职场文书
高中生职业规划范文
2014/03/09 职场文书
党委书记个人对照检查材料
2014/09/15 职场文书
党的群众路线教育实践活动个人对照检查材料(乡镇)
2014/11/05 职场文书
财政局个人总结
2015/03/04 职场文书