js 数组的深拷贝

js数组、对象的深浅拷贝,真的是一个很复杂的问题。

如果是对象数组的话,处理起来又会更麻烦。

在遇到数据处理的时候,如果没注意到 深浅拷贝的问题,真的容易被带到沟里,怎么也找不到问题的所在。

而我今天,就遇到了这样的问题。每次操作,原数组都跟这变,让人很恼火。遂认定是深浅拷贝导致的问题。

我今天遇到的问题是,数组是对象数组,即类似下面这样的数组:

let a=[{a:1},{a:2}]

当我用 cancat() 和slice() 对数组进行深拷贝的时候,发现深拷贝根本没成功。实际上问题在于,数组里面的对象,没有被深拷贝出来。 也就是对这种复合型的数组的操作,需要更复杂的处理方式。

我最后是用jquery的深拷贝方法来解决的

$.extend(true,obj1,obj2)

 

 

### 三级标题:JavaScript 数组深拷贝方法 在 JavaScript 中,数组深拷贝是指创建一个与原始数组完全独立的新数组,使得对新数组的修改不会影响原始数组。与浅拷贝不同,深拷贝会递归复制所有层级的数据,确保新旧数组之间没有任何引用关系。 #### 使用 `JSON.parse` 和 `JSON.stringify` 一种常见且简洁的深拷贝方法是利用 `JSON.stringify` 将数组转换为字符串,再通过 `JSON.parse` 将其解析为新的对象或数组。这种方式适用于数组元素为基本类型或简单对象的情况: ```javascript const arr1 = [1, 2, [3, 4]]; const arr2 = JSON.parse(JSON.stringify(arr1)); arr2[2][0] = 10; console.log(arr1); // [1, 2, [3, 4]] console.log(arr2); // [1, 2, [10, 4]] [^5] ``` #### 使用 `Array.from` `Array.from` 方法可以创建一个新数组,其内容是原数组的一个副本。对于基本类型元素的数组,这是有效的深拷贝方式之一: ```javascript const arr1 = [1, 2, 3, 4]; const arr2 = Array.from(arr1); arr2[1] = 10; console.log(arr1); // [1, 2, 3, 4] console.log(arr2); // [1, 10, 3, 4] [^2] ``` #### 使用 `concat` 通过 `concat` 方法也可以实现数组的浅拷贝。对于基本类型元素的数组,这相当于深拷贝;但如果数组中包含对象,则只是复制了对象的引用: ```javascript const test = [1, 2, 3]; const testCopy = [].concat(test); testCopy[0] = 4; console.log(test); // [1, 2, 3] console.log(testCopy); // [4, 2, 3] [^3] ``` #### 使用展开运算符 `...` ES6 引入的展开运算符提供了一种简洁的数组复制方式,适用于浅拷贝。对于嵌套数组或对象,它不会进行层复制: ```javascript const mySkills = ['React', 'Vue', 'Node']; const copiedSkills = [...mySkills]; copiedSkills.push('GraphQL'); console.log(mySkills); // ['React', 'Vue', 'Node'] ``` #### 使用 `slice` `slice` 方法常用于创建数组的浅拷贝,它返回一个新数组,包含原数组的一部分或全部元素: ```javascript const arr1 = [1, 2, 3, 4]; const arr2 = arr1.slice(); arr2[1] = 10; console.log(arr1); // [1, 2, 3, 4] console.log(arr2); // [1, 10, 3, 4] ``` --- ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值