zoukankan      html  css  js  c++  java
  • ES6参考---对象的深度克隆

    ES6参考---对象的深度克隆

    一、总结

    一句话总结:

    先判断类型,找出对象和数组,因为对象和数组默认值引用(也就是浅克隆),对对象和数组里面的元素再递归进行 对象的深度克隆 判断
      // 深度克隆(复制)
    
      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);

    二、对象的深度克隆

    博客对应课程的视频位置:

      1 <!DOCTYPE html>
      2 <html lang="en">
      3 <head>
      4   <meta charset="UTF-8">
      5   <title>对象的深度克隆</title>
      6 </head>
      7 <body>
      8 
      9 
     10 <!--
     11   1、数据类型:
     12     * 数据分为基本的数据类型(String, Number, boolean, Null, Undefined)和对象数据类型
     13     - 基本数据类型:
     14       特点: 存储的是该对象的实际数据
     15     - 对象数据类型:
     16       特点: 存储的是该对象在栈中引用,真实的数据存放在堆内存里
     17   2、复制数据
     18     - 基本数据类型存放的就是实际的数据,可直接复制
     19       let number2 = 2;
     20       let number1 = number2;
     21     - 克隆数据:对象/数组
     22       1、区别: 浅拷贝/深度拷贝
     23          判断: 拷贝是否产生了新的数据还是拷贝的是数据的引用
     24          知识点:对象数据存放的是对象在栈内存的引用,直接复制的是对象的引用
     25          let obj = {username: 'kobe'}
     26          let obj1 = obj; // obj1 复制了obj在栈内存的引用
     27       2、常用的拷贝技术
     28         1). arr.concat(): 数组浅拷贝
     29         2). arr.slice(): 数组浅拷贝
     30         3). JSON.parse(JSON.stringify(arr/obj)): 数组或对象深拷贝, 但不能处理函数数据
     31         4). 浅拷贝包含函数数据的对象/数组
     32         5). 深拷贝包含函数数据的对象/数组
     33 -->
     34 <script type="text/javascript">
     35   // 复制的对象的方式
     36   // 浅度复制
     37   let obj = {username: 'kobe', age: 39, sex: {option1: '', option2: ''}};
     38   let obj1 = obj;
     39   console.log(obj1);
     40   obj1.sex.option1 = '不男不女'; // 修改复制的对象会影响原对象
     41   console.log(obj1, obj);
     42   
     43   console.log('-----------');
     44   // Object.assign();  浅复制
     45   let obj2 = {};
     46   Object.assign(obj2, obj);
     47   console.log(obj2);
     48   obj2.sex.option1 = ''; // 修改复制的对象会影响原对象
     49   console.log(obj2, obj);
     50 
     51   // 深度克隆(复制)
     52 
     53   function getObjClass(obj) {
     54     let result = Object.prototype.toString.call(obj).slice(8, -1);
     55     if(result === 'Null'){
     56       return 'Null';
     57     }else if(result === 'Undefined'){
     58       return 'Undefined';
     59     }else {
     60       return result;
     61     }
     62   }
     63   // for in 遍历数组的时候遍历的是下标
     64   let testArr = [1,2,3,4];
     65   for(let i in testArr){
     66     console.log(i); // 对应的下标索引
     67   }
     68 
     69   // 深度克隆
     70   function deepClone(obj) {
     71     let result, objClass = getObjClass(obj);
     72     if(objClass === 'Object'){
     73       result = {};
     74     }else if(objClass === 'Array'){
     75       result = [];
     76     }else {
     77       return obj; // 如果是其他数据类型不复制,直接将数据返回
     78     }
     79     // 遍历目标对象
     80     for(let key in obj){
     81       let value = obj[key];
     82       if(getObjClass(value) === "Object" || 'Array'){
     83         result[key] = deepClone(value);
     84       }else {
     85         result[key] = obj[key];
     86       }
     87     }
     88     return result;
     89   }
     90   
     91   
     92   let obj3 = {username: 'kobe',age: 39, sex: {option1: '', option2: ''}};
     93   let obj4 = deepClone(obj3);
     94   console.log(obj4);
     95   obj4.sex.option1 = '不男不女'; // 修改复制后的对象不会影响原对象
     96   console.log(obj4, obj3);
     97 
     98 
     99 </script> 
    100 </body>
    101 </html>
     
  • 相关阅读:
    Window 窗口类
    使用 Bolt 实现 GridView 表格控件
    lua的table库
    Windows编程总结之 DLL
    lua 打印 table 拷贝table
    使用 xlue 实现简单 listbox 控件
    使用 xlue 实现 tips
    extern “C”
    COleVariant如何转换为int double string cstring
    原来WIN32 API也有GetOpenFileName函数
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/12590246.html
Copyright © 2011-2022 走看看