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 相关文章推荐
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
Jan 06 Javascript
基于Bootstrap+jQuery.validate实现Form表单验证
Dec 16 Javascript
原生JavaScript编写canvas版的连连看游戏
May 29 Javascript
jquery 抽奖小程序实现代码
Oct 12 Javascript
js实现可输入可选择的select下拉框
Dec 21 Javascript
js实现的xml对象转json功能示例
Dec 24 Javascript
jQuery日程管理插件fullcalendar使用详解
Jan 07 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
Jul 11 Javascript
Node.js中流(stream)的使用方法示例
Jul 16 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
Jun 29 Javascript
仿ElementUI实现一个Form表单的实现代码
Apr 23 Javascript
taro开发微信小程序的实践
May 21 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
vBulletin HACK----显示话题大小和打开新窗口于论坛索引页
2006/10/09 PHP
php 无法加载mysql的module的时候的配置的解决方案引发的思考
2012/01/27 PHP
windows下安装php的memcache模块的方法
2015/04/07 PHP
php获取本周星期一具体日期的方法
2015/04/20 PHP
gearman中worker常驻后台,导致MySQL server has gone away的解决方法
2020/02/27 PHP
一个用js实现的页内搜索代码
2007/05/23 Javascript
File文件控件,选中文件(图片,flash,视频)即立即预览显示
2009/04/09 Javascript
Js 本页面传值实现代码
2009/05/17 Javascript
js中将URL中的参数提取出来作为对象的实现代码
2011/08/16 Javascript
jquery学习总结(超级详细)
2014/09/04 Javascript
jQuery实现鼠标悬停显示提示信息窗口的方法
2015/04/30 Javascript
JS基于面向对象实现的拖拽库实例
2015/09/24 Javascript
node.js回调函数之阻塞调用与非阻塞调用
2015/11/13 Javascript
jquery.cookie实现的客户端购物车操作实例
2015/12/24 Javascript
分析js闭包引起的事件注册问题
2016/03/29 Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
2016/05/20 Javascript
js实现canvas图片与img图片的相互转换的示例
2017/08/31 Javascript
vue中的inject学习教程
2019/04/24 Javascript
实例分析JS中的相等性判断===、 ==和Object.is()
2019/11/17 Javascript
JavaScript中的执行环境和作用域链
2020/09/04 Javascript
JavaScript 中判断变量是否为数字的示例代码
2020/10/22 Javascript
python动态监控日志内容的示例
2014/02/16 Python
Python绑定方法与非绑定方法详解
2017/08/18 Python
对Python信号处理模块signal详解
2019/01/09 Python
python实践项目之监控当前联网状态详情
2019/05/23 Python
python 实现多维数组转向量
2019/11/30 Python
python 实现逻辑回归
2020/12/30 Python
用CSS3实现无限循环的无缝滚动的实例代码
2017/07/04 HTML / CSS
Sisley法国希思黎美国官方网站:享誉全球的奢华植物美容品牌
2020/06/27 全球购物
双立人美国官方商店:ZWILLING集团餐具和炊具
2020/05/07 全球购物
同步和异步有何异同,在什么情况下分别使用他们
2013/04/09 面试题
护理个人求职信范文
2014/01/08 职场文书
优秀共产党员先进事迹
2014/01/27 职场文书
主管竞聘书范文
2014/03/31 职场文书
大国崛起日本观后感
2015/06/02 职场文书
spring项目中切面及AOP的使用方法
2021/06/26 Java/Android