文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue深拷贝的实现方法有哪些

2023-07-05 04:48

关注

这篇文章主要讲解了“vue深拷贝的实现方法有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue深拷贝的实现方法有哪些”吧!

vue深拷贝的三种实现方式:1、通过递归方式实现深拷贝;2、JSON.parse(JSON.stringify(obj));3、jQuery的extend方法实现深拷贝。深拷贝:拷贝的是对象或者数组内部数据的实体,重新开辟了内存空间存储数据;浅拷贝:拷贝的是引用类型的指针,副本和原数组或对象指向同一个内存。

1、通过递归方式实现深拷贝

比较全面的深拷贝,缺点是较为繁琐

function deepClone(obj) {var target = {};for (var key in obj) {if (Object.prototype.hasOwnProperty.call(obj, key)) {if (typeof obj[key] === 'object') {target[key] = deepClone(obj[key]);} else {target[key] = obj[key];}}}return target;}

2、JSON.parse(JSON.stringify(obj))

满足一般使用场景,但无法实现对象中方法(fountion)的深拷贝

let obj = {id: 1,name: '张三',age: 10,}let newObj = JSON.parse(JSON.stringify(obj))

3、jQuery的extend方法实现深拷贝

var array = [1,2,3,4];var newArray = $.extend(true,[],array); // true为深拷贝,false为浅拷贝

拓展阅读

vue深拷贝的其他实现方式

1、Object.assign(obj1, obj2)

只有一级属性为深拷贝,二级属性后就是浅拷贝

let obj = {id: 1,name: '张三',age: 10,}let newObj = Object.assign({}, obj)

2、扩展运算符

只有一级属性为深拷贝,二级属性后就是浅拷贝

var obj = {    a: 1,    b: 2} var obj1 = {…obj}

3、数组使用数组方法进行深拷贝(concat、slice)

只有一级属性为深拷贝,二级属性后就是浅拷贝,如[1,2,3,[1,2,3]]

var arr1 = [1, 2, 3, 4]var arr2 = arr1.concat()var arr3 = arr1.slice(1)

感谢各位的阅读,以上就是“vue深拷贝的实现方法有哪些”的内容了,经过本文的学习后,相信大家对vue深拷贝的实现方法有哪些这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯