在了解深浅拷贝之前，我们先一起来简单来了解一下，JavaScript 数据存储的方式，以及数据类型（）。

Boolean（布尔值 ）
String (字符型) 
number （数字型，不区分浮点型和double） 
undefined （定义了变量 但未给值）
Null  (定义了变量 但赋值为 Null)

和几种常见的引用数据类型

Object
Array
RegExp
Date
null
**// 以上几种都为 引用数据类型**

在这里插入图片描述

   const OldObj = {
      name: '张三',
      age: 18,
      hobby: ['size', 'color'],
      Around: {
        page: 10,
        size: '100KB'
      }
    }
    //将原对象赋值 新对象
    const newsObj = OldObj

    //  更改新对象的值 
    newsObj.name = '我更改了新对象的数据newsObj'
    //原对象
    console.log(OldObj);
    //新对象
    console.log(newsObj); 
  **此时会发现 我将新对象的name更改 
  但 原对象值也发生了改变，这就是因为内存地址的问题，因为它们一起引用的是同一个地址**

在这里插入图片描述

浅拷贝

实现浅拷贝的四种式。

1：使用Object 对象原型上的 ** assign（）**方法
assign（对象）
在这里插入图片描述

#方式二

利用 ES6 展开运算符，将对象展开，可以看到基本数据类型未发生更改

在这里插入图片描述

方式三：通过循环遍历

在这里插入图片描述

方式四利用lodash 组件库调用

loadsh 官网 https://www.lodashjs.com/
在这里插入图片描述

引入 loadsh 

var objects = [{ 'a': 1 }, { 'b': 2 }];
 
var shallow = _.clone(objects);
console.log(shallow[0] === objects[0]);
// => true

实现深拷贝的四种方式

    const obj = {
      uname: 'pink',
      age: 18,
      hobby: ['乒乓球', '足球'],
      family: {
        baby: '小贝贝'
      }
    }
    // 把对象转换为 JSON 字符串
    const o = JSON.parse(JSON.stringify(obj))
    //输出新对象
    console.log(o)
    // 进行数据更改 
    o.family.baby = '123'
    console.log(obj)

 **// 方法 1** 
    function deepClone (obj) {
      //  通过 constructor 反射  创建实例
      let ObjClone = new obj.constructor()
      if (obj && typeof (obj) === 'object') {
        // 遍历原来的对象
        for (key in obj) {
>          // 判断对象的属性是不是本身的属性（不能是通过原型链继承获取过来），如果是则进行下一步
          if (obj.hasOwnProperty(key)) {
            // 对象的每一位不能为空 为空无法进行拷贝
            if (obj[key] && typeof (obj[key]) === 'object') {
            // 如果是复杂数据类型 则进行递归深拷贝 否则则进行浅拷贝
              ObjClone[key] = deepClone(obj[key])
            }
            else {
            // 浅拷贝
              ObjClone[key] = obj[key]
            }
          }
        }
      }
      
      return ObjClone
    }
    // 将 拷贝的对象赋值 
    const NewsObject = deepClone(OldObj)
    // 更改 复杂数据类型数据
    NewsObject.Around.page = 1000
    // 源对象 
    console.log(OldObj);
    // 新对象
    console.log(NewsObject);