深拷贝和浅拷贝（Es6）

最新推荐文章于 2024-07-29 11:53:27 发布

Miketutu

最新推荐文章于 2024-07-29 11:53:27 发布

阅读量1.4k

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/Miketutu/article/details/128472593

版权

深拷贝和浅拷贝

深拷贝和浅拷贝，都只针对应用类型的数据。

浅拷贝：当一个变量的数据拷贝到另一个变量身上后，只要拷贝后的数据中有任意一条数据的地址没有发生改变，都属于“浅拷贝”。
深拷贝：当一个变量的数据拷贝到另一个变量身上后，所有数据的地址发生了改变，就属于“深拷贝”

一、浅拷贝

1. 扩展运算符

const student = { name: '张三', age: { num: 20 } };

浅拷贝
        const newStudent = { ...student } //说明扩展运算符只能浅拷贝

       student.name = '李四',

       student.age.num = 30

        console.log(newStudent)  //输出结果为：name：“张三”，num：30

2、Object.assign( )

        const student = { name: '张三', age: { num: 20 } }

        const newStudent = Object.assign({},student); //只改变了外层地址，所以依然是浅拷贝

       student.name = '李四';

       student.age.num = 30

       console.log(newStudent);

二、深拷贝

1、JSON对象的方法

 const student = { name: '张三', age: { num: 20 } }
  
   const newStudent = JSON.parse(JSON.stringify(student)); //外层和内层地址都发生改变，所以是深拷贝
         student.age.num = 30;
         console.log(newStudent);  //num依然是20

2、手写函数实现深拷贝

在手写函数实现深拷贝当中用到 使用递归的方式实现数组、对象的深拷贝

 const obj = {a:1,b:2,c:{d:3}}
       function deepClone(data){

         if(typeof data == 'object'){

  //判断拷贝的要进行深拷贝的是数组还是对象，是数组的话进行数组拷贝，对象的话进行对象拷贝

         const newData = {}
           for(const key in data){
   
             newData[key] = deepClone(data[key]);
   
          }
           return newData;
       }
         return data
   }
      const newObj = deepClone(obj)
    
      obj.c.d = 4;
     
      console.log(newObj);//输出d：3