深拷贝、浅拷贝、解构

最新推荐文章于 2023-06-11 11:46:25 发布
最新推荐文章于 2023-06-11 11:46:25 发布
阅读量328 收藏
点赞数
分类专栏： JavaScript基础 文章标签： 前端 javascript node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_55832273/article/details/120045912
版权

一、浅拷贝

  • 将对象里的每一个成员复制一份一模一样的内容，放到另一个对象里面
  • 当对象里的一个对象成员是复杂数据类型的时候，这个成员依旧是一样的
  • 也就是说浅拷贝只是操作对象里的一层是没有关系的，如果有深层次就会出问题

二、深拷贝

  • 对象里面不管有多少层嵌套，都是相互独立的，没有关系，这才是深拷贝
  • 深拷贝实现的方式
  • 使用for in遍历赋值
  • 只要碰到某一个复杂数据类型（对象、数组），就再次进入这个复杂数据类型进行二次遍历，如果还有就再进入遍历（不推荐）
  • 使用json
  • 不管多复杂的数据类型，转换为json字符串后，就是基本数据类型了，字符串的赋值换回来
  • json深拷贝是有局限性。函数、undefined转换为json字符串会过滤掉
  • 在第一层，修改其中一个，另外一个没有影响，就是深拷贝

三、变量的解构

  • 解构并赋值
  • es6允许按照一定的模式从数组和对象中提取值，对变量进行赋值，这就是解构
  • 解构数组
  • 格式：let [变量1， 变量2…] = [数据1，数据2…]
  • 数组的元素是按次排序的，变量的取值由它的位置决定

四、对象的解构（变量名与对象的属性名同名）

  • 对象的属性没有次序，变量必须与属性同名，才能取到正确的值
  • 格式：let {key1，key2…} = {键值对1，键值对2…}
  • 在对象解构时候我们可以给解构的变量起一个别名
  • 格式：let {key：别名} = {键值对1}
Mr._Dang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
深拷贝和浅拷贝
langmanboy的博客
04-07 1572
深拷贝和浅拷贝 1. 内存地址 Array， Function，Object 等等可以认为是除了基本数据类型 String，Number，Boolean，null，undefined，Symbol 以外，所有类型都是引用数据类型 引用数据类型存储在堆内存中，在栈中存储了指针，该指针指向堆中该实体的起始地址 当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体 let str = 'jsx'; // string let num = 100; // number let bool = tr
js 数组或对象浅拷贝深拷贝的几种方法
热门推荐
haogemr的博客
03-13 1万+
第一种 function deepClone(obj){ var str,newObj = obj instanceof Array? [] : {}; if(typeof obj !== 'object'){ return; }else if(window.json){ ...
ES6中解构赋值与深拷贝和浅拷贝
树上骑个猴的博客
01-27 5209
关于ES6中的解构赋值的知识点，想必大家都不陌生。所谓解构赋值就是利用一种模式来快速从目标结构中取出数据的方案，例如： 通过解构，我们很轻松的就从数组和对象中取出了我们想要的数据。但是，可能大家会问，这与深拷贝与浅拷贝又有什么关系呢？ 咱们，先回顾一下关于深拷贝和浅拷贝， 所谓的浅拷贝和深拷贝：浅拷贝是在在拷贝过程中，遍历时那部分为对象/数组类型指向原来的地址，而深拷贝，则是完全开辟新的内存地址。也就是说， 深拷贝：修改新变量的值不会影响原有变量的值。默认情况下基本数据类型（number，stri
JS基础：深拷贝和浅拷贝
qq_43835345的博客
06-22 1511
JS基础：深拷贝和浅拷贝
JS深拷贝和浅拷贝
RR_chen的博客
07-20 343
对于引用类型数据，浅拷贝 后，因为浅拷贝只拷贝了引用地址，所以两个对象均使用同一个引用地址，此引用地址指向同一个内存即数据值。对其中任何一个对象操作会改变引用地址对应的数据的值。 而 深拷贝 将一个对象从内存中完整的拷贝一份出来，从堆内存中开辟一个新的区域存放新对象，且修改新对象不会影响原对象。...
前端面试题---深拷贝、浅拷贝的实现和解构赋值
前端卷王小白的博客
06-11 1460
前端面试题,浅拷贝,深拷贝,解构赋值(数组解构赋值,对象解构赋值,函数参数解构赋值),剩余运算符,嵌套解构赋值
JS浅拷贝和深拷贝原理与实现方法分析
12-11
JavaScript中的浅拷贝和深拷贝是两种不同的对象复制方式，它们在处理复杂对象时有着显著的区别。在JavaScript中，对象是引用类型，因此当一个对象被复制时，如果不进行特殊处理，复制的只是指向原对象的引用，而非...
JS 数组和对象的深拷贝操作示例
10-15
`slice()`方法返回一个新的数组，包含从开始到结束（不包括结束）的数组的一部分浅拷贝的新数组。如果想实现深拷贝，需要配合`JSON.parse()`和`JSON.stringify()`，但这会导致丢失函数和循环引用。 4. `concat()` ...
js代码-对象深拷贝
07-15
2. **扩展运算符（...）**：与`Object.assign()`类似，扩展运算符也可以用于浅拷贝，尤其是在数组和对象的解构赋值中。 3. **克隆构造函数**：利用对象的构造函数来创建一个新的实例，然后将源对象的属性逐一复制...
js代码-浅拷贝练习
07-16
2. **扩展运算符**：`...` 也可以用于浅拷贝，它在解构赋值时创建一个新对象。 ```javascript let obj = {a: 1, b: {c: 2}}; let shallowCopy = {...obj}; ``` 3. **数组的slice()方法**：对于数组，`slice()` ...
js代码-冒泡排序 深拷贝
07-15
在JavaScript中，浅拷贝（如`Object.assign()`或扩展运算符`...`）只能复制对象的引用，这意味着原始对象和复制对象之间仍然共享同一内存空间。当修改其中一个对象时，另一个也会受到影响。为了创建一个完全独立的新...
简单数据和复杂数据，数组解构，深、浅拷贝
H524268015wsw的博客
07-29 284
本节中说的堆和栈问题可以百度一下。有巧方法当然优先利用啦，当自己有一定实力的时候再去深究一些完美方法，来增强自己。
对象深浅拷贝
我是一颗草，哪里荒凉往哪里长
06-10 997
对象深浅拷贝大集合
js深拷贝和浅拷贝
Vanessa_Li的博客
07-21 853
手写深拷贝-深度遍历 深拷贝: 深拷贝开辟一个新的栈，两个对象对应两个不同的地址，修改一个对象的属性，不会改变另一个对象的属性。指复制后的新对象重新指向一个新的内存地址，两个对象改变互不影响。...
常用的js数组复制（浅拷贝和深拷贝）
Crayon。博客
12-13 1661
常用的js数组复制（浅拷贝和深拷贝） 在js当中，我们常常遇到数组复制的的情况，许多人一般都会使用“=”来直接把一个数组赋值给一个变量，Array是引用类型，如果只是通过 arrayA = arrayB 简单的赋值，arrayA 和 arrayB 指向的是同一个地址，其实际的值是同一块东西，举个例子 let A = [ 1, 2, 3 ] let B = A B[0] = 2 // 此时改变B...
JavaScript数组拷贝的n种方法（浅拷贝）
haoduoyu2099的博客
03-07 903
JavaScript数组拷贝的n种方法（浅拷贝）
深拷贝，浅拷贝；解构赋值；
haisyn的博客
08-24 232
解构赋值的简单理解
什么是本地储存？
m0_55832273的博客
09-22 3671
本地储存的作用：把一些数据记录在浏览器中，是浏览器提供给我们的一些本地存储数据的机制 localStorage 永久缓存，除非手动删除 sessionStorage 会话缓存，关闭浏览器就没有了 共同点：只能存储字符串格式的数据 localStrorang localStrorage.setItem(‘名字’，‘值’) 存储一条数据 重复设置同一个名字的时候，就是修改数据 localStorage.setItem('name',{name:8});
vue深拷贝和浅拷贝
最新发布
09-14
Vue 中的深拷贝和浅拷贝是在处理对象和数组时常用的两种复制方式。下面是它们的简要介绍： 1. 浅拷贝：浅拷贝是创建一个新对象或数组，将原始对象或数组的引用复制给新对象或数组，新旧对象或数组共享同一块内存空间。当修改其中一个对象或数组时，另一个也会受到影响。在 Vue 中，可以使用`Object.assign()`或解构赋值来实现浅拷贝。 示例代码： ```javascript // 对象浅拷贝 let obj = { a: 1, b: 2 }; let newObj = Object.assign({}, obj); console.log(newObj); // { a: 1, b: 2 } // 数组浅拷贝 let arr = [1, 2, 3]; let newArr = [...arr]; console.log(newArr); // [1, 2, 3] ``` 2. 深拷贝：深拷贝是创建一个新对象或数组，并将原始对象或数组的所有属性值递归地复制给新对象或数组，新旧对象或数组不共享内存空间。当修改其中一个对象或数组时，另一个不会受到影响。在 Vue 中，可以使用`JSON.parse(JSON.stringify())`或第三方库（如 lodash 的`cloneDeep()`方法）来实现深拷贝。 示例代码： ```javascript // 对象深拷贝 let obj = { a: 1, b: { c: 2 } }; let newObj = JSON.parse(JSON.stringify(obj)); console.log(newObj); // { a: 1, b: { c: 2 } } // 数组深拷贝 let arr = [1, [2, 3], { a: 4 }]; let newArr = JSON.parse(JSON.stringify(arr)); console.log(newArr); // [1, [2, 3], { a: 4 }] ``` 需要注意的是，使用 `JSON.parse(JSON.stringify())` 进行深拷贝时，会忽略 undefined、symbol、函数等特殊值，并且无法处理引用循环的情况。在处理复杂对象或数组时，建议使用专门的深拷贝库来确保拷贝的完整性和准确性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值