赋值、浅拷贝与深拷贝-阿里云开发者社区

赋值、浅拷贝与深拷贝

2022-04-24 104

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 赋值、浅拷贝与深拷贝

前面我们讲过，基本数据类型存放的栈中，引用数据类型存放在堆中，指向引用数据类型的变量保存在栈中，它保存着指向堆中对应引用数据类型的内存地址（对以上问题不了解的朋友可以查看之前的一篇文章《JavaScript之内存空间》），由此看如下代码：

let a = 'a';
let b = a;
let obj1 = {
  name:'obj1.name'
}
let obj2 = obj1;
复制代码

首先声明了变量a并赋值'a',然后声明b = a,这个时候属于赋值，即创建变量b，并赋值'a'；

接下来声明对象obj1并赋值，此时在内存中创建了对象{name:'obj1.name'},然后声明obj2 = obj1,

这个时候只是把obj1中保存的指向对象{name:'obj1.name'}的内存地址赋给了obj2，并不会再创建一个对象{name:'obj1.name'}

那么接下来看如下代码：

let xm = {
  name:'小明',
  hobby:['足球','篮球']
}
let xz = xm;
console.log(xm);
// {
//   name:'小明',
//   hobby:['足球','篮球']
// }
console.log(xz);
// {
//   name:'小明',
//   hobby:['足球','篮球']
// }
xz.name = '小张';
console.log(xm);
// {
//   name:'小张',
//   hobby:['足球','篮球']
// }
console.log(xz);
// {
//   name:'小张',
//   hobby:['足球','篮球']
// }
复制代码

因为let xz = xm只是把xm保存的对象的内存地址赋给了xz,所以当通过xz.name = '小张'改变了这个对象的时候，打印xm和xz拿到的都是改变后的对象，那么如何复制一个对象呢？

可能你会想到Object.assign()

**Object.assign()** 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。 ---- (MDN)

那我们修改上面的代码如下：

let xm = {
  name:'小明',
  hobby:['足球','篮球']
}
let xz = Object.assign({},xm);
console.log(xm);
// {
//   name:'小明',
//   hobby:['足球','篮球']
// }
console.log(xz);
// {
//   name:'小明',
//   hobby:['足球','篮球']
// }
xz.name = '小张';
console.log(xm);
// {
//   name:'小明',
//   hobby:['足球','篮球']
// }
console.log(xz);
// {
//   name:'小张',
//   hobby:['足球','篮球']
// }
复制代码

可能你会觉得还不错嘛，那我们再修改一下：

let xm = {
  name:'小明',
  hobby:['足球','篮球']
}
let xz = Object.assign({},xm);
console.log(xm);
// {
//   name:'小明',
//   hobby:['足球','篮球']
// }
console.log(xz);
// {
//   name:'小明',
//   hobby:['足球','篮球']
// }
xz.name = '小张';
xz.hobby.push('乒乓球');
console.log(xm);
// {
//   name:'小明',
//   hobby:['足球','篮球','乒乓球']
// }
console.log(xz);
// {
//   name:'小张',
//   hobby:['足球','篮球','乒乓球']
// }
复制代码

你会发现，不对啊，我明明只想给xz添加爱好，xm的爱好怎么也多了?

下面我们正式引出浅拷贝和深拷贝

浅拷贝

其实浅拷贝就像我们上面说的变量赋值，当对象的属性值为基本数据类型，那么拷贝的就是基本数据类型的值，如果对象的属性值为引用数据类型，那么拷贝的就是内存地址，上面的代码可以用下图更形象的解释：

网络异常，图片无法展示

所以，类似于Object.assign()属于浅拷贝

深拷贝

理解了浅拷贝，深拷贝的概念就呼之欲出了，所谓深拷贝，即不管对象的属性是基本数据类型还是引用数据类型，都会进行拷贝，所以拷贝前后的两个对象是相互独立，互不影响的。

上面例子实现深拷贝代码如下：

let xm = {
  name:'小明',
  hobby:['足球','篮球']
}
let xz = JSON.parse(JSON.stringify(xm));
xz.name = '小张';
xz.hobby.push('乒乓球');
console.log(xm);
// {
//   name:'小明',
//   hobby:['足球','篮球']
// }
console.log(xz);
// {
//   name:'小张',
//   hobby:['足球','篮球','乒乓球']
// }
复制代码

JSON.parse(JSON.stringify(obj))存在以下几个问题：

let obj1 = {
  name:'obj',
  a:undefined,
  b:/\d{6}/g,
  c:function(){
    console.log(this)
  },
  d:new Date(),
  s:Symbol(123)
}
let obj2 = JSON.parse(JSON.stringify(obj1));
console.log(obj2);
// {
//   name: "obj",
//   b: {},
//   d: "2019-03-26T13:51:45.158Z"
// }
复制代码

可见对于undefined，函数，Symbol会直接忽略

对于new Date()转换后结果不正确

对于正则转换为{}

再看一种情况：

let obj1 = {
  a:{name:'a'}
}
obj1.b = obj1.a;
obj1.b.c = obj1.a;
console.log(obj1);
let obj2 = (JSON.parse(JSON.stringify(obj1)));
console.log(obj2);
// Uncaught TypeError: Converting circular structure to JSON
复制代码

可见对于循环引用，会报错。

如果有错误或者不严谨的地方，请给予指正，十分感谢！

赋值、浅拷贝与深拷贝

浅拷贝

深拷贝

热门文章

最新文章

相关电子书