js对象深拷贝（深克隆）

半夏_2021

已于 2022-06-29 10:38:16 修改

阅读量1.4k

点赞数

分类专栏： Vue js 文章标签： v-html

于 2022-06-24 12:48:00 首次发布

本文链接：https://blog.csdn.net/fd2025/article/details/125443096

版权

Vue 同时被 2 个专栏收录

66 篇文章 17 订阅

订阅专栏

18 篇文章 0 订阅

订阅专栏

我们首先看下面的例子：

		var userInfo = {username:"zhangsan",age:20}
		var copyUserInfo = userInfo;
		userInfo.username='lisi';
		console.log(userInfo);
		console.log(copyUserInfo);

结果:
在这里插入图片描述
上面对象中的字段类型都是基本类型，所以上面拷贝的都是浅拷贝。

那么怎么实现深度拷贝的，也就说拷贝的对象再次修改互不影响呢?

1.通过JSON序列化

通过JSON.stringify() 和 JSON.parse() 将对象转为字符串之后在转为对象。

	var userInfo = {username:"zhangsan",age:20}
	var copyUserInfo = JSON.stringify(userInfo);
	userInfo.username='lisi';
	console.log(userInfo);
	console.log(copyUserInfo);

结果：
在这里插入图片描述

2.使用对象的合并，即通过Object.assign()方法

注意：该方法的第一个参数必须是空对象
如果已知克隆的对象的属性都是基本类型，如{name: ‘jack’, age: ‘18’}，可以利用ES6的Object.assign()实现克隆。

var userInfo = {username:"zhangsan",age:20}
   		var copyUserInfo = Object.assign({}, userInfo);
   		userInfo.username='lisi';
   		console.log(userInfo);
   		console.log(copyUserInfo);

     ![在这里插入图片描述](https://img-blog.csdnimg.cn/1a67d51161b6402c987c22102458d760.png)

不过，采用这种方法克隆，只能克隆原始对象自身的值，不能克隆它继承的值。如果想要保持继承链，可以采用下面的代码。

function clone(origin) {
  var originProto = Object.getPrototypeOf(origin);
  return Object.assign(Object.create(originProto), origin);
}
var obj = {name: 'jack', age: '18'};
var newObj = clone(obj);

3.使用拓展运算符+解构赋值

该方法的局限性在于，当值为undefined、function、symbol会在转换过程中被忽略。

			var userInfo = {username:"zhangsan",age:20}
  		var copyUserInfo = {...userInfo};
  		userInfo.username='lisi';
  		console.log(userInfo);
  		console.log(copyUserInfo);

4.利用循环递归

    以上四种方法只能进行一层拷贝，即当对象的属性值也是对象时，就无法实现该属性的深拷贝，在这里提供一种利用循环递归进行深拷贝的方法。

    var obj = {
        name: "123",
        sex: { age: "小花" }
    };
    var newObj = {};
    function deepClone(obj, newObj) {
        var newObj = newObj || {};
        for (let key in obj) {
            if (typeof obj[key] == 'object') {
                newObj[key] = (obj[key].constructor === Array) ? [] : {}
                deepClone(obj[key], newObj[key]);
            } else {
                newObj[key] = obj[key]
            }
        }
        return newObj;
    }
    console.log(deepClone(obj, newObj));//{name: "123",sex: {age: '小花'}}