vue深拷贝的三种实现方式

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

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

1. function deepClone(obj) {
2.         var target = {};
3.         for (var key in obj) {
4.                 if (Object.prototype.hasOwnProperty.call(obj, key)) {
5.                         if (typeof obj[key] === 'object') {
6.                                 target[key] = deepClone(obj[key]);
7.                         } else {
8.                                 target[key] = obj[key];
9.                         }
10.                 }
11.         }
12.         return target;
13. }

复制代码

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

满意一样平常使用场景，但无法实现对象中方法(fountion)的深拷贝

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

复制代码

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

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

复制代码

拓展阅读

vue深拷贝的其他实现方式

1、Object.assign(obj1, obj2)
只有一级属性为深拷贝，二级属性后就是浅拷贝

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

复制代码

2、扩展运算符
只有一级属性为深拷贝，二级属性后就是浅拷贝

1. var obj = {
2.     a: 1,
3.     b: 2
4. }
6. var obj1 = {…obj}

复制代码

3、数组使用数组方法进行深拷贝（concat、slice）
只有一级属性为深拷贝，二级属性后就是浅拷贝，如[1,2,3,[1,2,3]]

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

复制代码

来源：https://blog.csdn.net/weixin_51747462/article/details/128766770
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！