vue深拷贝的三种实现方式示例详解
作者：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深拷贝内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！