【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>
相关文章
|
15天前
|
JavaScript
JS 获取对象数据类型的键值对的键与值
JS 获取对象数据类型的键值对的键与值
|
25天前
|
JavaScript 前端开发
Math对象:JavaScript中的数学工具
Math对象:JavaScript中的数学工具
27 1
N..
|
1月前
|
存储 JavaScript 前端开发
JavaScript中的对象
JavaScript中的对象
N..
10 0
|
1月前
|
JavaScript 前端开发
JavaScript对象系列(菜菜出品,必看!!!)
JavaScript对象系列(菜菜出品,必看!!!)
|
18天前
|
JavaScript 算法
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
|
1月前
|
存储 JavaScript 前端开发
在JavaScript中,对象和数组是如何进行扩展的?
在JavaScript中,对象和数组是如何进行扩展的?
22 4
|
2天前
|
存储 JavaScript 索引
js开发:请解释什么是ES6的Map和Set,以及它们与普通对象和数组的区别。
ES6引入了Map和Set数据结构。Map的键可以是任意类型且有序,与对象的字符串或符号键不同;Set存储唯一值,无重复。两者皆可迭代,支持for...of循环。Map有get、set、has、delete等方法,Set有add、delete、has方法。示例展示了Map和Set的基本操作。
16 3
|
4天前
|
JavaScript 前端开发 开发者
JavaScript中的错误处理:try-catch语句与错误对象
【4月更文挑战第22天】JavaScript中的错误处理通过try-catch语句和错误对象实现。try块包含可能抛出异常的代码,catch块捕获并处理错误,finally块则无论是否出错都会执行。错误对象提供关于错误的详细信息,如类型、消息和堆栈。常见的错误类型包括RangeError、ReferenceError等。最佳实践包括及时捕获错误、提供有用信息、不忽略错误、利用堆栈信息和避免在finally块中抛错。
|
10天前
|
JavaScript
【Js】检查Date对象是否为Invalid Date
【Js】检查Date对象是否为Invalid Date
14 0
|
10天前
|
存储 JavaScript 前端开发
JavaScript的引用数据类型主要包括对象
【4月更文挑战第16天】JavaScript的引用数据类型主要包括对象
16 4