深拷贝和浅拷贝

最新推荐文章于 2025-11-30 09:20:25 发布

原创最新推荐文章于 2025-11-30 09:20:25 发布 · 220 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #json

js 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了JavaScript中的数据类型，包括原始类型和引用类型，并通过实例展示了浅拷贝和深拷贝的区别。在浅拷贝中，修改副本会影响到原对象，而通过JSON.parse(JSON.stringify(obj))进行深拷贝时，虽然能避免浅拷贝的问题，但会丢失function和undefined。最后，文章提出了一种递归深拷贝的方法，解决了这一问题，但要注意递归可能导致的死循环。

随手记录，有不足地方大伙们多多提醒

数据类型

原始类型：String、Number、Boolean、Null、Undefined、symbol（es6新增）
引用类型：Object、Arrary

引用类型是保存在内存中的对象,js是不允许直接访问对象内存位置，所以不能直接操作对象所在的内存空间，所以想要该对象只能是对该对象的引用而不是对象的本身

1、浅拷贝对于引用类型是会改变原来的数组

    let hobby = ["打游戏", "喝奶茶", "熬夜"];
    let copyhobby = hobby;
    copyhobby.push("看电影")
    console.log(hobby) //["打游戏", "喝奶茶", "熬夜", "看电影"]
    console.log(copyhobby); //["打游戏", "喝奶茶", "熬夜", "看电影"]

2、使用JSON.parse(JSON.stringify(obj));

 let obj = {
      name: "memory",
      hobby: ["打游戏", "喝奶茶", "熬夜"],
    };
    let copyhobby = JSON.parse(JSON.stringify(obj));
    copyhobby.hobby.push("看电影");
    console.log(obj,"obj"); 
    console.log(copyhobby,"copyhobby");

在这里插入图片描述

缺点：如果对象里有function、undefined，JSON.parse(JSON.stringify(obj))深拷贝会把function、undefined丢失

let obj = {
      name: "memory",
      hobby: ["打游戏", "喝奶茶", "熬夜"],
      add:()=>{
        console.log(222)
      },
      sex:undefined
    };
    let copyhobby = JSON.parse(JSON.stringify(obj));
    copyhobby.hobby.push("看电影");
    console.log(obj,"obj"); 
    console.log(copyhobby,"copyhobby");

在这里插入图片描述
3、使用递归深拷贝
优点：可以解决JSON.parse(JSON.stringify(obj));有function、undefined丢失问题
缺点：递归判断不好会出现死循环

 let obj = {
      name: "memory",
      hobby: ["打游戏", "喝奶茶", "熬夜"],
      add:()=>{
        console.log(222)
      },
      sex:undefined
    };

    function cloneDeep(obj){
      // 1、判断传参是否为对象或者数组，创建新的空数组或对象，存放数据
      let newObj = obj instanceof Array ? [] :{}
      // 2、遍历参数，
      for(let key in obj){
        // 3、判断属性值是否为object,如果嵌套是进行递归
        if(typeof obj[key] === 'object'){
          newObj[key] = cloneDeep(obj[key])
        }else{
          // 4、如果数据为基本类型，则直接赋值
          newObj[key] = obj[key]
        }
      }
      // 5、最后把存放新的对象返回
      return newObj
    }


    let copyhobby = cloneDeep(obj)
    copyhobby.hobby.push("看电影");
    console.log(obj,"obj"); 
    console.log(copyhobby,"copyhobby");