【JavaScript】35_浅拷贝和深拷贝 + 对象的复制

简介: # 7、浅拷贝和深拷贝## 浅拷贝(shallow copy)- 通常对对象的拷贝都是浅拷贝- 浅拷贝顾名思义,只对对象的浅层进行复制(只复制一层)- 如果对象中存储的数据是原始值,那么拷贝的深浅是不重要- 浅拷贝只会对对象本身进行复制,不会复制对象中的属性(或元素)## 深拷贝(deep copy)- 深拷贝指不仅复制对象本身,还复制对象中的属性和元素- 因为性能问题,通常情况不太使用深拷贝```html <script> //创建一个数组 const arr = [{name:'孙悟空'},{name:'猪八戒'}]

7、浅拷贝和深拷贝

浅拷贝(shallow copy)

  • 通常对对象的拷贝都是浅拷贝
  • 浅拷贝顾名思义,只对对象的浅层进行复制(只复制一层)
  • 如果对象中存储的数据是原始值,那么拷贝的深浅是不重要
  • 浅拷贝只会对对象本身进行复制,不会复制对象中的属性(或元素)

深拷贝(deep copy)

  • 深拷贝指不仅复制对象本身,还复制对象中的属性和元素
  • 因为性能问题,通常情况不太使用深拷贝
    <script>
        //创建一个数组
        const arr = [{name:'孙悟空'},{name:'猪八戒'}]
        const arr2= arr.slice()//浅拷贝

        const arr3 = structuredClone(arr)//专门用来深拷贝的方法

        console.log(arr)
        console.log(arr3)
    </script>

8、对象的复制

对象的复制

  • Object.assign(目标对象, 被复制的对象)
  • 将被复制对象中的属性复制到目标对象里,并将目标对象返回
  • 也可以使用展开运算符对对象进行复制

... (展开运算符)

  • 可以将一个数组中的元素展开到另一个数组中或者作为函数的参数传递
  • 通过它也可以对数组进行浅复制
    <script>
        const arr = ['孙悟空','猪八戒','沙和尚']
        const arr2 = arr.slice()

        console.log(arr===arr2)//false

        // const arr3 = [arr[0],arr[1],arr[2]]
        const arr3 = [...arr]//效果一致
        // const arr3 = ['唐僧',...arr,'白骨精']

        console.log(arr)
        console.log(arr3)
    </script>
相关文章
|
3月前
|
JavaScript 前端开发
如何在 JavaScript 中使用 __proto__ 实现对象的继承?
使用`__proto__`实现对象继承时需要注意原型链的完整性和属性方法的正确继承,避免出现意外的行为和错误。同时,在现代JavaScript中,也可以使用`class`和`extends`关键字来实现更简洁和直观的继承语法,但理解基于`__proto__`的继承方式对于深入理解JavaScript的面向对象编程和原型链机制仍然具有重要意义。
|
3月前
|
Web App开发 JavaScript 前端开发
如何确保 Math 对象的方法在不同的 JavaScript 环境中具有一致的精度?
【10月更文挑战第29天】通过遵循标准和最佳实践、采用固定精度计算、进行全面的测试与验证、避免隐式类型转换以及持续关注和更新等方法,可以在很大程度上确保Math对象的方法在不同的JavaScript环境中具有一致的精度,从而提高代码的可靠性和可移植性。
|
3月前
|
JSON 前端开发 JavaScript
JavaScript中对象的数据拷贝
本文介绍了JavaScript中对象数据拷贝的问题及解决方案。作者首先解释了对象赋值时地址共享导致的值同步变化现象,随后提供了五种解决方法:手动复制、`Object.assign`、扩展运算符、`JSON.stringify`与`JSON.parse`组合以及自定义深拷贝函数。每种方法都有其适用场景和局限性,文章最后鼓励读者关注作者以获取更多前端知识分享。
39 1
JavaScript中对象的数据拷贝
|
3月前
|
JavaScript 前端开发 图形学
JavaScript 中 Math 对象常用方法
【10月更文挑战第29天】JavaScript中的Math对象提供了丰富多样的数学方法,涵盖了基本数学运算、幂运算、开方、随机数生成、极值获取以及三角函数等多个方面,为各种数学相关的计算和处理提供了强大的支持,是JavaScript编程中不可或缺的一部分。
|
4月前
|
JavaScript 前端开发
JavaScript中的深拷贝与浅拷贝
JavaScript中的深拷贝与浅拷贝
61 4
|
4月前
|
存储 JavaScript 前端开发
JavaScript 对象的概念
JavaScript 对象的概念
67 4
|
4月前
|
存储 JavaScript 前端开发
js中函数、方法、对象的区别
js中函数、方法、对象的区别
48 2
|
4月前
|
缓存 JavaScript 前端开发
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
71 1
|
4月前
|
JavaScript 前端开发 Unix
Node.js 全局对象
10月更文挑战第5天
57 2
|
4月前
|
存储 JavaScript 前端开发
js中的对象
js中的对象
36 3

热门文章

最新文章

  • 1
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    24
  • 2
    Node.js 中实现多任务下载的并发控制策略
    32
  • 3
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    25
  • 4
    【JavaScript】深入理解 let、var 和 const
    48
  • 5
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    44
  • 6
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    53
  • 7
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    55
  • 8
    如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
    71
  • 9
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    55
  • 10
    JavaWeb JavaScript ③ JS的流程控制和函数
    62