浅拷贝和深拷贝

今天看到菜鸟教程3.2.3节 ES6 对象时，有一个‘assign()’对象合并函数是浅拷贝的概念。

找到了以下文章学习，摘自：js 赋值的两个数组、对象会相互影响，可使用深拷贝方法解决_时间飞逝的博客-优快云博客_js 两个数组赋值

浅拷贝的两个对象如果是基本类型（string,number,bollean...）互不影响，但数组和对象本质为一个指向的地址（指针，可以这么理解吧？），因此引用后，随意一方改变都会导致数组或对象的值真正改变，从而两个对象相互影响。

深拷贝：互不影响。 

---

在前端项目中，a 数组赋值给 b 数组，然后修改 a 数组中的内容，b 数组也会跟着改变。

var a = [666]
var b = a;
a[0] = 777;
console.log(b) // 777

原因：
a 数组本质是指向数组的一个地址，更改数组元素就是更改地址存储数据的内容，b 数组也是这个地址的，所以会跟着改变。

浅拷贝 ：如果数组元素是基本类型，就会拷贝一份，互不影响，而如果是对象或者数组，就会只拷贝对象和数组的引用，这样我们无论在新旧数组进行了修改，两者都会发生变化。
深拷贝：是指完全的拷贝一个对象，即使嵌套了对象，两者也相互分离，修改一个对象的属性，也不会影响另一个。

// 数组的深拷贝 
方法：不仅可拷贝数组还能拷贝对象（但不能拷贝函数）

var a = [666]
var b = JSON.parse(JSON.stringify(a));
a[0] = 777;
console.log(b) // 666
1、下面是浅拷贝一个通用方法，实现思路：遍历对象，把属性和属性值都放在一个新的对象里

var shallowCopy = function (obj) {
  // 只拷贝对象
  if (typeof obj !== 'object') return;
  // 根据obj的类型判断是新建一个数组还是一个对象
  var newObj = obj instanceof Array ? [] : {};
  // 遍历obj,并且判断是obj的属性才拷贝
  for (var key in obj) {
    if (obj.hasOwnProperty(key)) {
      newObj[key] = obj[key];
    }
  }
  return newObj;
}
2、下面是深拷贝一个通用方法，实现思路：拷贝的时候判断属性值的类型，如果是对象，继续递归调用深拷贝函数

var deepCopy = function(obj) {
  // 只拷贝对象
  if (typeof obj !== 'object') return;
  // 根据obj的类型判断是新建一个数组还是一个对象
  var newObj = obj instanceof Array ? [] : {};
  for (var key in obj) {
    // 遍历obj,并且判断是obj的属性才拷贝
    if (obj.hasOwnProperty(key)) {
      // 判断属性值的类型，如果是对象递归调用深拷贝
      newObj[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key];
    }
  }
  return newObj;
}
 

 

参考文章：https://blog.youkuaiyun.com/qq_37268201/article/details/80448848 
————————————————
版权声明：本文为优快云博主「时间飞逝子非鱼」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.youkuaiyun.com/lgysjfs/article/details/88850664