JS中的浅拷贝和深拷贝 以及 深拷贝的实现

一、ES6中对对象的扩展方法：

        Object.assign(target, source1, source2..) : 将源对象的属性复制到目标对象上

实例：

<script type="text/javascript">

    let obj = {name : 'kobe', age : 39, c: {d: 2}};
    let obj1 = {};
    Object.assign(obj1, obj);
    console.log(obj1, obj1.name);    

</script>

输出的结果：

二、理论知识

1、数据类型：

        1.1 数据分为基本的数据类型(String, Number, boolean, Null, Undefined)和对象数据类型

                基本数据类型 ==>> 特点： 存储的是该对象的实际数据

                对象数据类型 ==>> 特点： 存储的是该对象在栈中引用，真实的数据存放在堆内存里

2、复制数据

        2.1 基本数据类型存放的就是实际的数据，可直接复制

                let number2 = 2;
                let number1 = number2;  

        2.2 克隆数据：对象/数组

                a. 区别： 浅拷贝/深度拷贝

                    判断： 拷贝是否产生了新的数据还是拷贝的是数据的引用

                    知识点：对象数据存放的是对象在栈内存的引用，直接复制的是对象的引用                    

let obj = {username: 'aaa'}
let obj1 = obj; // obj1 复制了obj在栈内存的引用

                b. 常用的拷贝技术

                    1). 直接赋值给一个变量（对象数据） // 浅拷贝

                    2). Object.assign()   // 浅拷贝

                    3). Array.prototype.concat()   //浅拷贝 ==> 合并到一个空数组中，相当于拷贝

                    4). Array.prototype.slice()   //浅拷贝 ==>> 直接返回已有数组的全部元素

                                ==>> slice() 方法可从已有的数组中返回选定的元素。返回一个新的数组

                    5). JSON.parse(JSON.stringify(arr/obj)) : 深拷贝（深度克隆），但不能处理函数数据

                    

3、浅拷贝和深拷贝的区别

        浅拷贝（数组/对象）：拷贝的引用，修改拷贝后的数据会影响原数据，使得数据不安全。

        深拷贝（数组/对象）：拷贝的时候生成新数据，修改拷贝以后的数据不会影响原数据

三、深拷贝的实现

1. 前提知识

        判断数据的类型：Object.prototype.toString

        优点：可以分别区分 String、Number、Boolean、Null、Undefined、Object、Array、Function（需要处理）

        实际使用：Object.prototype.toString.call(obj).slice(8, -1);        

<script type="text/javascript">
   
    console.log(Object.prototype.toString.call(null) )           //"[object Null]"
 
    console.log(Object.prototype.toString.call(undefined) )        //"[object Undefined]"
 
    console.log(Object.prototype.toString.call('aa') )          //"[object String]"
 
    console.log(Object.prototype.toString.call(3) )       //"[object Number]"
 
    console.log(Object.prototype.toString.call(true) )       //"[object Boolean]"
 
    console.log(Object.prototype.toString.call({a:1}) )        //"[object Object]"
 
    console.log(Object.prototype.toString.call([1,2]) )       //"[object Array]"
 
    console.log(Object.prototype.toString.call(function(){console.log(11)}) )        //"[object Function]"
 
</script>

2. 深度克隆的实现（重要）

<script type="text/javascript">

   // 深度克隆(复制)
  function getObjClass(obj) {
    let result = Object.prototype.toString.call(obj).slice(8, -1);     //得到数据类型（注意：首字母是大写）
    if(result === 'Null'){
      return 'Null';
    }else if(result === 'Undefined'){
      return 'Undefined';
    }else {
      return result;
    }
  }

  // for in 遍历数组的时候遍历的是下标
  //let testArr = [1,2,3,4];
  //for(let i in testArr){
  //  console.log(i); // 对应的下标索引
  //}

  // 深度克隆
  function deepClone(obj) {
    // 初始化数据
    let result, objClass = getObjClass(obj);
    if(objClass === 'Object'){        // 如果克隆的是对象，最后返回的将是一个对象
      result = {};
    }else if(objClass === 'Array'){        // 如果克隆的是数组，最后返回的将是一个数组
      result = [];
    }else {
      return obj; // 如果是其他数据类型不复制，直接将数据返回
    }
    // 遍历目标对象
    for(let key in obj){
      let value = obj[key];
      if(getObjClass(value) === "Object" || 'Array'){    //如果数组元素值或者对象属性值是引用数据（对象/数组）
        result[key] = deepClone(value);      //递归调用
      }else {
        result[key] = obj[key];
      }
    }
    return result;
  }


  let obj3 = {username: 'kobe',age: 39, sex: {option1: '男', option2: '女'}};
  let obj4 = deepClone(obj3);
  console.log(obj4);
  obj4.sex.option1 = '不男不女'; // 修改复制后的对象不会影响原对象
  console.log(obj4, obj3);

</script>

 

文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出