浅析深浅拷贝

这篇具有很好参考价值的文章主要介绍了浅析深浅拷贝。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

       我们在对对象进行复制时就用到深浅拷贝。

一、普通复制

<script>
    const people={
        name:'tim',
        age:22
    }
    const test=people;
    console.log(test);//tim 22
    test.age=20;
    console.log(test);//tim 20
    console.log(people);//tim 20
</script>

控制台打印结果: 

     浅析深浅拷贝,前端,javascript

       之所以我们要用到拷贝,是因为直接赋值的复制可能不能满足我们的需求。向上面代码所展示的,我们复制代码时,复制到的是地址,所以对复制体修改实际修改的是原对象的值,这个时候我们再对对象进行复制的意义就不大了。

二、浅拷贝

        浅拷贝是创建一个新的对象,但只复制原对象的第一层属性,如果原对象的属性是基本类型,那么复制的是值,在对复制体进行更改不会改变原对象的值;如果原对象的属性是引用类型,那么复制的是地址,复制的对象改变改变的就是地址里的内容,原对象内容也会改变。

浅拷贝方法:

  • 方法1:Object.assign(目标文件,原文件)
  • 方法2:const 目标文件={...原文件}

    拷贝数组:

           方法1:Array.prototype.concat()

          方式2:[...arr]

代码演示:

<script>
    const people={
        name:'tim',
        age:22,
        student:{
            student:'cc'
        }
    }
    //方法1
    //const test= {...people};
    //方法2
    const test= {};
    Object.assign(test,people);

    console.log(test);//tim 22 cc
    test.age=20;
    test.student.student='bb';
    console.log(test);//tim 20 bb
    console.log(people);//tim 22 bb
</script>

控制台打印结果:  

浅析深浅拷贝,前端,javascript

三、深拷贝

       深拷贝是创建一个新的对象,并递归地复制原对象的所有层级的属性,无论原对象的属性是基本类型还是引用类型,都会复制其实际的值,深拷贝后两个对象完全独立,互不影响。

深拷贝的方法:

1、递归实现

<script>
    const people = {
        name: 'tim',
        age: 22,
        student: {
            student: 'cc'
        }
    }
    const test = {};
    //拷贝函数
    function deepCopy(newObj,oldObj) {
        for(let k in oldObj){
            if(oldObj[k] instanceof Array){
                newObj[k]=[];
                deepCopy(newObj[k],oldObj[k]);
            }else if(oldObj[k] instanceof Object) {
                newObj[k]={};
                deepCopy(newObj[k],oldObj[k]);
            } else{
                newObj[k]=oldObj[k];
            }
        }
    }
   deepCopy(test,people);
    console.log(test);
    test.student.student = 'bb';
    console.log(test);
    console.log(people);
</script>

2、使用js库lodash里面cloneDeep内部实现

<script src="https://cdn.jsdelivr.net/lodash/4.17.21/lodash.min.js"></script>
<script>
    const people = {
        name: 'tim',
        age: 22,
        student: {
            student: 'cc'
        }
    };

    const test = _.cloneDeep(people);

    console.log(test);
    test.student.student = 'bb';
    console.log(test);
    console.log(people);
</script>

3、利用JOSN字符串转换

<script>
    const people = {
        name: 'tim',
        age: 22,
        student: {
            student: 'cc'
        }
    }
    //转换为字符串JSON.stringify(people);
    //再转换为对象
    const test = JSON.parse(JSON.stringify(people));
    console.log(test);
    test.student.student = 'bb';
    console.log(test);
    console.log(people);
</script>

 控制台打印结果: 

浅析深浅拷贝,前端,javascript文章来源地址https://www.toymoban.com/news/detail-659846.html

到了这里,关于浅析深浅拷贝的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端面试的话术集锦第 5 篇:高频考点( 类型转换 & 深浅拷贝 & 模块化机制等)

    这是记录 前端面试的话术集锦第五篇博文——高频考点(类型转换 深浅拷贝 模块化机制等) ,我会不断更新该博文。❗❗❗ typeof 对于原始类型来说,除了 null 都可以显示正确的类型:

    2024年02月09日
    浏览(56)
  • 深浅拷贝、函数

    普通函数 1、函数的定义与特性 2、函数的创建 3、函数的参数 4、函数的返回值 5、可变与不可变数据类型 6、作用域 递归函数 匿名函数 高级函数 装饰器 1、闭包 2、装饰器 3、装饰器之登录练习 列表生成式 1、列表推导式的概念 2、基本的使用方式 3、在循环的过程中使用i

    2024年02月03日
    浏览(33)
  • 深浅拷贝,温故知新

    1.1、概念 对象的深拷贝是指其属性与其拷贝的源对象的属性不共享相同的引用(指向相同的底层值)的副本。 因此,当你更改源或副本时,可以确保不会导致其他对象也发生更改;也就是说,你不会无意中对源或副本造成意料之外的更改。 在深拷贝中,源和副本是完全独立

    2024年02月03日
    浏览(43)
  • python的深浅拷贝

    copy函数是浅拷贝,只对可变类型的第一层对象进行拷贝,对拷贝的对象开辟新的内存空间进行存储,不会拷贝对象内部的子对象。对于不可变对象而言,浅拷贝只是引用赋值。 deepcopy函数是深拷贝,对于可变类型,深拷贝是逐层进行拷贝。对于不可变类型而言,也是引用赋值

    2024年02月12日
    浏览(31)
  • 认识Object类和深浅拷贝

    本文介绍了Object类以及Object类部分方法,toString方法,equals和hashCode方法(重写前和重写后的对比),getClass方法,clone方法,以及拷贝新对象时会出现的深浅拷贝, 内容较长,耗时一天,建议收藏后观看~ Object类是Java默认提供的一个类。而这个类是Java里所有类的顶级父类,即在继承体系下

    2023年04月20日
    浏览(34)
  • C# List 复制之深浅拷贝

    声明类 执行上述方法, 修改list1 中的属性值, 发现list2 的属性值会跟着变化, list3 的属性值不发生变化; 由于进行的是浅拷贝,所以直接将list1的内容复制给了list2,虽然list1和list2所在的地址不一样,但是两个list存储的对象仍然是相同的(因为把list1复制到list2时,浅拷贝复制的

    2024年02月07日
    浏览(52)
  • 深浅拷贝,类型检测及继承面试题

    基本类型:基本类型的值存在栈内存中 引用类型: 引用类型的地址存储在栈内存中,他的值存储在堆内存中,通过指针(地址)连接 基本类型:基本类型拷贝的是值 引用类型:引用类型拷贝的是变量的地址,会造成数据共享问题 基本类型: 基本类型传递的是值 引用类型:

    2024年02月02日
    浏览(32)
  • 【C++】string类的深浅拷贝问题

    我们知道,定义一个类的时候,如果我们没有写构造,拷贝构造,赋值运算符重载,析构方法的话,编译器会自动生成。当该类成员中涉及到资源的管理时,实现的就是浅拷贝。所以,以上这几种方式是必须要程序猿手动实现的。 举例来看: 图中所示:实现了构造和析构,

    2023年04月26日
    浏览(40)
  • 【C++】vector类的模拟实现(增删查改,拷贝构造,赋值运算,深浅拷贝)

    🌏博客主页: 主页 🔖系列专栏: C++ ❤️感谢大家点赞👍收藏⭐评论✍️ 😍期待与大家一起进步! 我们模拟vector是用迭代器(start,end,endofstorage)来控制增删查改操作的 1普通构造 2迭代器构造 3初始化字符构造 4拷贝构造: 1当前大小(size()) 2总体容量(capacity()) 1begin()

    2024年02月15日
    浏览(59)
  • 深入探索前端之道:JavaScript深拷贝与浅拷贝的解析与实现

    前端开发中,数据的复制是一个常见的操作。尤其是在处理对象和数组时,我们需要考虑的是一个浅拷贝还是深拷贝。那么,什么是深拷贝和浅拷贝?它们在前端开发中有什么作用?如何实现这两种拷贝?这是我们在本文将讨论的问题。 浅拷贝 浅拷贝是一种数据复制方式,

    2024年02月10日
    浏览(34)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包