有关于js的深拷贝和浅拷贝

最新推荐文章于 2024-07-24 16:20:17 发布

KINGSEAPEAK

最新推荐文章于 2024-07-24 16:20:17 发布

阅读量66

点赞数

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

本文链接：https://blog.csdn.net/KINGSEAPEAK/article/details/133085223

版权

有关于js的深拷贝和浅拷贝

深拷贝和浅拷贝

关于基本数据类型以及复杂数据类型的存储方式有所不同

基本数据类型的特点是将数据直接储存在栈中
复杂数据类型的特点是栈中存储的是对象的指针(地址)，真实的数据存储在堆中，通过栈中的地址来获取堆中的数据

有关于深拷贝和浅拷贝必须明白

浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。但深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象

浅拷贝拷贝引用数据类型，只拷贝第一层，深层值指向的是堆中原数据的地址，而深拷贝的整个原对象的值赋给新对象。

	和元数据是否指向同一对象	第一层数据为基本数据类型	原数据中包含子对象
赋值	是	改变会使原数据一同改变	改变会使原数据一同改变
浅拷贝	否	改变不会使原数据一同改变	改变会使原数据一同改变
深拷贝	否	改变不会使原数据一同改变	改变不会使原数据一同改变

对于对象中的深拷贝和浅拷贝

深拷贝

深拷贝：深拷贝等同于将要被拷贝的对象完全复制一份然后给另一个变量

使用**JSON.parse(JSON.stringify(arr))**方法实现深拷贝

    let arr = [1,2,{
      name:'zhangsan',
      age:18
      }
    ]
    let arr1 = JSON.parse(JSON.stringify(arr))
    arr1[0] = 100
    arr1[2].name = 'lisa'
    console.log(arr1);
    console.log(arr);

截屏2023-09-19 08.59.55

使用JQ库中的$.extend方法,其中的布尔值表示是否进行深度合并（true为深拷贝，false是浅拷贝）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
</head>
<body>
  <script>
    var obj = {
            a: 1,
            b: {
                f: {
                    g: 1
                }
            },
            c: [1, 2, 3]
        };
        var obj1 = $.extend(true, {}, obj);
        console.log(obj.b.f === obj1.b.f); // false
        obj1.a = 2;
        obj1.b.f.g = 2;
        console.log(obj);
        console.log(obj1);

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

浅拷贝

浅拷贝：将引用数据类型的地址赋给新变量，更改新变量后原数据也会跟着改变

    var obj = {
      name: 'xiaoming',
      age: 18,
      sex: 'male',
      say: function(){
        console.log('hello world');
      }
    }
    var obj1 = obj
    obj1.name = 'xiaohong'
    console.log(obj1);

有关于实现浅拷贝有两种方法：

使用for in只循环第一层
使用Object.assign()方法

语法：Object.assign(target, source1, source2)

object.assign方法的第一个参数是目标(多个对象中的属性都保存到第一个里面)对象，后面的参数都是源对象

    var obj = {
      name: 'xiaoming',
      age: 18,
      sex: 'male',
      friend:{
        name: 'xiaoqiang',
        age: 18,
        sex: 'male'
      }
    }
    // 浅拷贝 使用for in 遍历数据第一层
    function shallowCopy(obj){
      var newObj = {}
      for(var key in obj){
        newObj[key] = obj[key]
      }
      return newObj
    }
    var obj2 = shallowCopy(obj)
    obj2.name = 'xiaohong'
    console.log(obj2,'2');
    // 浅拷贝 使用assign方法
    var obj3 = Object.assign({},obj)
    obj3.name = 'xiaohong'
    obj3.friend.age = 109
    console.log(obj3,'3');
    console.log(obj,'3');

其中直接使用 = 赋值的方法即不属于浅拷贝，也不属于深拷贝

    var obj = {
      name: 'xiaoming',
      age: 18,
      sex: 'male',
      friend:{
        name: 'xiaoqiang',
        age: 18,
        sex: 'male'
      }
    }
        var obj1 = obj
    obj1.name = 'xiaohong'
    obj1.friend.age = 12
    console.log(obj1,'1');
    console.log(obj,'1');

KINGSEAPEAK

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
有关于js的深拷贝和浅拷贝

关于基本数据类型以及复杂数据类型的存储方式有所不同浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。但深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象浅拷贝拷贝引用数据类型，只拷贝第一层，深层值指向的是堆中原数据的地址，而深拷贝的整个原对象的值赋给新对象。
复制链接

扫一扫