vue深拷贝的三种实现方式示例详解
更新时间：2023年11月13日 14:15:45 作者：nav-item
vue深拷贝的三种实现方式：1、通过递归方式实现深拷贝；2、JSON.parse(JSON.stringify(obj))；3、jQuery的extend方法实现深拷贝,本文通过实例代码给大家介绍的非常详细,需要的朋友参考下吧
vue深拷贝的三种实现方式
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深拷贝内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Vue中keep-alive的两种应用方式，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下2020-07-07
这篇文章主要介绍了vue使用原生swiper代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-02-02
这篇文章主要为大家介绍了前端高效配置化vue2 element ui省时又省力,有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
Vue2 this 能够直接获取到 data 和 methods 的原理分析
这篇文章主要介绍了Vue2 this能够直接获取到data和methods的原理分析，因为methods里的方法通过bind指定了this为new Vue的实例2022-06-06
目中出现多级菜单时,需要多层for循环时,但是当菜单增加层级时,需要在页面结构中增加一层for循环,这时我们可以使用组件递归的思想来实现,下面这篇文章主要给大家介绍了关于vue业务实例之组件递归及其应用的相关资料,需要的朋友可以参考下2022-05-05
这篇文章主要介绍了SpringBoot+Vue 前后端合并部署的配置方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-12-12
这篇文章主要为大家介绍了Vben Admin 多标签页状态管理源码学习，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要介绍了Element Card 卡片的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
Vue的生命周期就是vue实例从创建到销毁的全过程,也就是new Vue()开始就是vue生命周期的开始。Vue实例有⼀个完整的⽣命周期,也就是从开始创建、初始化数据、编译模版、挂载Dom->渲染、更新->渲染、卸载等⼀系列过程,称这是Vue的⽣命周期2022-11-11
最近在学习axios，然后项目就用到了，所以这篇文章主要给大家介绍了关于vue中利用axios实现文件上传进度的实时更新的相关资料，文中先对axios进行了简单的介绍，方法大家理解学习，需要的朋友们下面随着小编来一起学习学习吧。2017-12-12
最新评论