assign 的使用以及深浅拷贝学习

一、Object.assign是什么

ES6官方文档介绍：Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象 简单来说，就是Object.assign()是对象的静态方法，可以用来复制对象的可枚举属性到目标对象，利用这个特征可以实现对象属性的合并

二、用法

Object.assign(target, ...sources)

参数：

• target ---> 目标对象
• source ---> 源对象

返回值： 

• target ---> 目标对象

​
​
  <script>
    /* 
    assign 函数： 1、对象浅拷贝   2、对象的合并
    Object.assign(target, ...sources)  
    target: 目标对象  sources: 源对象(可以是一个或多个)
    返回值: target 目标对象
    */

    let Person = {
      pname: 'Hello',
      page: 200
    }

    let Stu = {
      pname: 'Stu',
      sage: 300
    }

    let target = Object.assign({sname:'张三'},Person, Stu);

    console.log('target', target);


    // 三点(剩余参数)运算符 一定放在形参列表的最末位置
    function custAssign(target, ...sources){
        // console.log('target:', target, '\n srouces:', sources);

        for( source of sources ){
          // 兼容 对象浅拷贝与 对象合并
          target = {...target, ...source}
        }

        return target;

    }

    let t1 = custAssign({sname:'张三'},Person, Stu);
    console.log('t1=>', t1);

  </script>

​

​

 三、深拷贝和浅拷贝

 深拷贝是将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象（新旧对象不共享同一块内存）,且修改新对象不会影响原对象（深拷贝采用了在堆内存中申请新的空间来存储数据，这样每个可以避免指针悬挂）

 浅拷贝如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址（新旧对象共享同一块内存），所以如果其中一个对象改变了这个地址，就会影响到另一个对象

    <script>
        //   对象的浅拷贝：就是赋值象引用的储存的内存地址值 
        //   注：基础数据类型（srting number boolean）不在所谓的浅拷贝

        // Object.keys(target):获取对象的所有属性，返回字符串（对象的属性名称）数组

        //0X123
        // let person = {
        //     pname: '张三',
        //     page: 200
        // }
        // let stu = person;
        // stu.pname = 'abc';
        // stu.page = 300;

        // console.log('stu:', stu, '\n person:', person);

        //ox123
        let source = {
            pname: '张三',
            page: 200
        }

        //ox456
        let target = {}

        function copyObject(target, source) {
            // let keys = Object.keys(source);
            Object.keys(source).forEach((sourceAttrName, index, targetArray) => {
                console.log('sourceAttrName:', sourceAttrName, '\n index:', index, '\n targetArray:', targetArray);
                //获取source对象的属性值 source[item]等同source.item;循环遍历source对象每个属性，将每个属性值赋值给一个新的对象
                target[sourceAttrName] = source[sourceAttrName];
            });
            // console.log('keys:', keys);
        }
        copyObject(target, source);

        // 测试
        target.pname = '王五';
        target.page = 1000;
        console.log('target:', target, '\n source:', source);
    </script>