对象的拷贝

数据类型:

  • 数据分为基本的数据类型(String, Number, boolean, Null, Undefined)和对象数据类型
    • 基本数据类型:
      特点: 存储的是该对象的实际数据
    • 对象数据类型:
      特点: 存储的是该对象在栈中引用,真实的数据存放在堆内存里

复制数据

  • 基本数据类型存放的就是实际的数据,可直接复制
    let number2 = 2; let number1 = number2;
  • 克隆数据:对象/数组
    区别: 浅拷贝/深度拷贝
    判断: 拷贝是否产生了新的数据还是拷贝的是数据的引用
    知识点:对象数据存放的是对象在栈内存的引用,直接复制的是对象的引用
    let obj = {username: 'kobe'}; let obj1 = obj; // obj1 复制了obj在栈内存的引用

浅拷贝:

拷贝引用,修改拷贝以后的数据影响原数据
1). 直接赋值给一个变量
2). Object.assign()
3). Array.prototype.slice(): 数组浅拷贝
4). Array.prototype.concat(): 数组浅拷贝

深拷贝:

完全拷贝一个新对象,修改拷贝以后的数据不会影响原数据
1)JSON.parse(JSON.stringify(arr/obj)) :数组或对象深拷贝
* 具有循环引用的对象时,报错
* 当值为函数undefined、或symbol时,无法拷贝

实现深度克隆

递归进行逐一赋值

<script type="text/javascript">
  // 复制的对象的方式
  // 浅度复制
  let obj = {username: 'kobe', age: 39, sex: {option1: '男', option2: '女'}};
  let obj1 = obj;
  console.log(obj1);
  obj1.sex.option1 = '不男不女'; // 修改复制的对象会影响原对象
  console.log(obj1, obj);
  
  console.log('-----------');
  // Object.assign();  浅复制
  let obj2 = {};
  Object.assign(obj2, obj);
  console.log(obj2);
  obj2.sex.option1 = '男'; // 修改复制的对象会影响原对象
  console.log(obj2, obj);

  // 深度克隆(复制)

  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> 
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容