前端的深拷贝与浅拷贝

哆来A梦没有口袋

已于 2022-01-28 10:50:48 修改

阅读量270

点赞数

分类专栏：一天一个小知识文章标签：深拷贝与浅拷贝实现深拷贝与浅拷贝什么是拷贝

于 2019-12-12 20:02:56 首次发布

本文链接：https://blog.csdn.net/qq_42625428/article/details/103515192

版权

一天一个小知识专栏收录该内容

14 篇文章 2 订阅

订阅专栏

什么是拷贝？

拷贝，就是将一个对象obj1复制给另个对象obj2，且obj2的数据发生改变时，obj1不发生改变

浅拷贝

只拷贝第一层对象的数据

浅拷贝实现方式 - 1.循环遍历对象，复制

2.利用Object.assign()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>浅拷贝 -1.循环遍历对象，复制</title>
</head>
<body>
    <script>
        let user = {
            name: '张三',
            age: 18,
            obj:{
                fav:'打篮球'
            }
        }

        //实现浅拷贝 - 只可拷贝第一层数据 - 遍历对象添加
        let user2 = {}
        for (const key in user) {
            user2[key] = user[key];
        }
        //修改拷贝后第一层数据不会修改原数据
        user2.age = 20;
        //修改拷贝的第二层数据，会修改原数据
        user2.obj.fav = '打乒乓';
        console.log(user.age,user.obj.fav)//18,打乒乓

    </script> 
</body>
</html>

第二种方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>浅拷贝与深拷贝</title>
</head>
<body>
    <script>
        let user = {
            name: '张三',
            age: 18,
            obj:{
                fav:'打篮球'
            }
        }

        // 实现浅拷贝 - 利用方法实现
        let user3 = Object.assign({},user);
        user3.age = 20;
        user3.obj.fav = '打乒乓';
        console.log(user.age,user.obj.fav)//18,打乒乓
    </script> 
</body>
</html>

深拷贝

拷贝所有的对象，改变拷贝后的数据不会修改原对象

1.利用递归，向浅拷贝一样去循环

function deepClone(obj) {
  if(typeof obj !== 'object' || obj == null) {
    return obj;
  }

  let result

  if(obj instanceOf Arrary){
     result = [];
  }else {
     result = {};
  }
 
  for(let key in obj){
     if(obj.hasOwnProperty(key)){
        result[key] = deepClone(obj[key])
     }
  }

  return result;

}

2.利用JSON转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>深拷贝</title>
</head>
<body>
    <script>
        let user = {
            name: '张三',
            age: 18,
            obj:{
                fav:'打篮球'
            }
        }

        //实现深拷贝 - 1.利用递归 2.利用json
        //将对象转换为字符串，利用基本数据类型赋值
        let user4 = JSON.stringify(user);
        //字符串转换为对象
        user4 = JSON.parse(user4);
        user4.age = 20;
        user4.obj.fav = '打乒乓';
        console.log(user.age,user.obj.fav)//18,打篮球

    </script> 
</body>
</html>

哆来A梦没有口袋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端的深拷贝与浅拷贝

什么是拷贝？拷贝，就是将一个对象obj1复制给另个对象obj2，且obj2的数据发生改变时，obj1不发生改变浅拷贝只拷贝第一层对象的数据浅拷贝实现方式 - 1.循环遍历对象，复制 2.利用Object.assign()<!DOCTYPE html><html la...
复制链接

扫一扫